下記のプログラムについてわからないことがあります。
引用元:https://www.angularjshub.com/examples/modules/configurationrunphases/
表示結果が
provider1 ID: provider1-childModule2
provider2 ID: provider2-childModule1
provider3 ID: provider3-childModule2
provider4 ID: provider4-childModule3
になっていて、
①provider1 ID: provider1-childModule3にならない理由。
②angular.module("mainModule", ["childModule2", "childModule3"])
にするとうまく表示ができなくなる理由
③ $get: function ()の意味
HTML5
1<!DOCTYPE html> 2<html> 3<head> 4 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 5 <script src="script.js"></script> 6</head> 7 8<body ng-app="mainModule"> 9 <div ng-controller="mainController"> 10 <strong>provider1 ID:</strong> {{provider1.getProviderID()}}<br /> 11 <strong>provider2 ID:</strong> {{provider2.getProviderID()}}<br /> 12 <strong>provider3 ID:</strong> {{provider3.getProviderID()}}<br /> 13 <strong>provider4 ID:</strong> {{provider4.getProviderID()}} 14 </div> 15</body> 16</html>
AngularJS
1// Definition of a BaseProvider object to use 2// in multiple instances across different modules. 3var BaseProvider = function () 4{ 5 var providerID; 6 7 return { 8 setID: function (id) 9 { 10 providerID = id; 11 }, 12 $get: function () 13 { 14 return { 15 getProviderID: function () 16 { 17 return providerID; 18 } 19 }; 20 } 21 }; 22}; 23 24angular.module("childModule1", []) 25 .provider("provider1", BaseProvider) 26 .config(function (provider1Provider) 27 { 28 provider1Provider.setID("provider1-childModule1"); 29 }) 30 .provider("provider2", BaseProvider) 31 .config(function (provider2Provider) 32 { 33 provider2Provider.setID("provider2-childModule1"); 34 }); 35 36angular.module("childModule2", ["childModule3"]) 37 .provider("provider1", BaseProvider) 38 .config(function (provider1Provider) 39 { 40 provider1Provider.setID("provider1-childModule2"); 41 }) 42 .provider("provider3", BaseProvider) 43 .config(function (provider3Provider) 44 { 45 provider3Provider.setID("provider3-childModule2"); 46 }); 47 48angular.module("childModule3", []) 49 .provider("provider1", BaseProvider) 50 .config(function (provider1Provider) 51 { 52 provider1Provider.setID("provider1-childModule3"); 53 }) 54 .provider("provider4", BaseProvider) 55 .config(function (provider4Provider) 56 { 57 provider4Provider.setID("provider4-childModule3"); 58 }); 59 60// "mainModule" depends on "childModule1" and "childModule2". The "provider1" instance 61// in "childModule2" overrides the "provider1" instance defined in "childModule1" 62// because both the modules are dependencies of "mainModule" and in the dependencies 63// array "childModule2" comes after "childModule1". If the dependencies array was 64// ["childModule2", "childModule1"] then "provider1" in "childModule1" would override 65// "provider1" in "childModule2". "provider1" in "childModule3" is overridden by the 66// same definition in the other modules because the other modules are closer to 67// the root of the hierarchy (they are children of "mainModule", while "childModule3" 68// is a child of "childModule2"). 69angular.module("mainModule", ["childModule1", "childModule2"]) 70 // I can get all the providers in the other modules through Dependency Injection 71 // because there's only a flat (with no hierarchy) collection of provider names 72 // in the whole AngularJS application and it doesn't depend on the modules hierarchy. 73 .controller("mainController", function ($scope, provider1, provider2, provider3, provider4) 74 { 75 // Set variables on the scope to reference the different providers from the HTML template 76 $scope.provider1 = provider1; 77 $scope.provider2 = provider2; 78 $scope.provider3 = provider3; 79 $scope.provider4 = provider4; 80 });
あなたの回答
tips
プレビュー