質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

0回答

1271閲覧

Angular JS 処理の流れの説明

yositigu

総合スコア17

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2019/06/12 05:53

下記のプログラムについてわからないことがあります。
引用元: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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問