Angular.jsコントローラーパラメーターを理解する


80

私はAngular.jsを学び始めたばかりで、Angularホームページの「WireupaBackend」の例でproject.jsを見てきました。

コントローラー関数のパラメーターについて混乱しています。

function ListCtrl($scope, Projects) {
  ... 
}   

function CreateCtrl($scope, $location, $timeout, Projects) {
  ... 
}

function EditCtrl($scope, $location, $routeParams, angularFire, fbURL) {
   angularFire(fbURL + $routeParams.projectId, $scope, 'remote', {}).
   then(function() {
     ...
   });
}  

これらのコントローラー関数はrouteProviderで呼び出されますが、パラメーターは指定されていません。

$routeProvider.
  when('/', {controller:ListCtrl, templateUrl:'list.html'}).
  when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
  when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
  otherwise({redirectTo:'/'});
});

私がこれまでに見つけた唯一のことは、おそらく何が起こっているのかを説明しているのは「コントローラーへのサービスの注入」です。これは$location、を説明して$timeoutいますが、パラメーターメソッドangularFireとは説明していませんfbURL

私の具体的な質問は次のとおりです。

  1. コントローラのパラメータは何でしょうか?

  2. コントローラー関数はパラメーターとともにどこで呼び出されますか?または、パラメーターは呼び出されませんが、多くのAngular.jsマジックで関連付けが行われるコントローラーに関連付けられたものです(そうであれば、githubでソースコードを確認できますか?)

  3. どこでangularFire定義されていますか?

  4. fbURLパラメータ内はどのようにリンクされていますか:

    angular.module('project', ['firebase']).
        value('fbURL', 'https://angularjs-projects.firebaseio.com/').
        factory ...
    
  5. Angular.jsが提供するすべてのサービス($locationおよびなど$timeout)を確認できる場所はありますか?(リストを見つけようとしましたが失敗しました。)


5. Angularに含まれるすべての組み込みサービス、フィルター、ディレクティブのリストについては、APIをご覧ください
jpmorin

1
4.ご存知のように、コントローラーのパラメーターは、コントローラーの定義から角度によって注入されています。Angularは登録されているすべてのサービスを調べ、指定されたパラメーター名と一致するものを見つけて、それに応じたサービスを注入しようとします。
jpmorin 2013年

3.プロジェクトモジュールを定義するときに、firebaseモジュールの依存関係も含めました。Firebaseモジュールの内部には、前のfbURLのようなangularFireサービスが必要です。
jpmorin 2013年

1
2.コントローラーを定義する適切な方法はangular.module('project').controller('EditCtrl', ['$scope', '$location', '$routeParams', 'angularFire', 'fbURL', function($scope, $location, $routeParams, angularFire, fbURL) { ... } ]);次のとおりです。この方法では、最初に注入するサービスの名前を設定し、次に必要に応じてそれらのサービスに別の名前を付けます。実際、後でAngularコードを最小化する場合は、これは必須です(最小化によって変数の名前が変更されるため、Angularは引き続きサービス名を見つけることができる必要があります)。
jpmorin 2013年

1
@jpmorinはあなたのコメントを答えとして追加するだけです、それらはすべて正しいです。
toxaq 2013年

回答:


152
  • コントローラのパラメータは何でしょうか?

    コントローラーパラメーターは依存関係であり、AngularJSインジェクターサービスによって注入されます。それらは何でもかまいません。ただし、これらは通常、コントローラー内で使用されるサービスです。

  • コントローラー関数はパラメーターとともにどこで呼び出されますか?

    AngularJSのコントローラー、ディレクティブ、フィルター、サービス、その他多くのものは関数です。しかし、フレームワークは、多くの管理するときどのようにこれらの関数が呼び出されます。

    関連付けられているものと呼ぶものには、前述のように、依存関係という名前があります。マジックと呼ばれるのは、動作中のAngularJS依存性注入メカニズムです。

    これらの関数(コントローラーなど)がインジェクターによって呼び出されると、パラメーター名(たとえば、$scopeまたは$httpまたはangularFire)が読み取られ、その名前で登録されたサービスが検索されます。この名前は、関数が呼び出されたときにパラメーターとして提供されます。

    それは単純だ。インジェクターへの「依存関係」(インジェクターによって管理されるパラメーター)について指示する方法はいくつかあります。

    関数をとして宣言するだけfunction myCtrl($scope) {}で、インジェクターは$scopeパラメーター名からサービスを見つけることができます。ただし、JavaScriptコードを縮小すると、パラメーター名が「a」や「x」などの小さな文字列に変更されるため、インジェクターはサービスを見つけることができなくなります。この問題を回避するために、配列表記を使用して注入するサービス名を指定することができます。この場合、次のように関数を宣言します。myCtrl = ['$scope', function($scope) {}]

    AngularJSの世界では多くの配列表記の使用法が見られます。今、あなたはそれを理解し始めます。関数内で他の名前を挿入$scopeangularFireて使用することもできます(名前の変更はお勧めしません-この例は学習目的で提供されます):-このように、関数内で$ scopeを「skop」として使用し、angularFireを「af」。ため、アレイ内のサービスのパラメータの順序と一致します。['$scope', 'angularFire', function(skop, af) {}]

もう一つの例:

var myController = ['$scope', '$resource', '$timeout',
    function($scope, $resource, $timeout) {
        // this controller uses $scope, $resource and $timeout
        // the parameters are the dependencies to be injected
        // by AngularJS dependency injection mechanism
    }
];
  • angleFireはどこで定義されていますか?

    firebase モジュール

    あなたが今すでに知っているように、インジェクターは、その「もの」の名前が登録され、その記録に利用可能である限り、何でも注入します。その名前の「サービス」があれば、彼はそれを提供することができます

    name => stuffでは、インジェクターが使用するこのリストはどのように作成されますか?

    モジュールがその答えです。モジュールは、リストより少しですname => stuff。これは、サービス、ファクトリ、フィルタ、ディレクティブなどを登録するモジュール内にあります。

    公式ドキュメントのModuleメソッドを注意深く見てください...それらのほとんどすべてがパラメーターとして受け取ります:名前といくつかの「もの」(「もの」はほとんどの場合関数であり、コントローラー、ファクトリー、またはディレクティブのいずれかを定義します) )。指定された名前で注入できるようになるのは、このすべての「もの」です。

    「$ timeout」、「$ http」などのAngularJSサービスは、ngモジュールがフレームワークによってすでにロードされているため、デフォルトで使用できます。

    追加のサービスについては、モジュールをロード/要求する必要があります。あなたが何をすべきかというのngRouterfirebaseロードすることにより...など、モジュールは、その登録したものであり、注射のために利用可能、あなたのモジュール/アプリ。

ステップバイステップの例を見てみましょう:

// An empty module:
var module = angular.module('myModule', []);

// Now, adding an "injectable" constant: 
module.constant('niceStuff', { blip: 'blop', blup: 307 });

// We could add a service:
module.service('entityManager', ['$http', function($http){  }]);

// and so on... if I wanted to use "$resource" instead of "$http"
// in the entityManager service above...
// ...I would need to require the ngResource when creating the module above,
// like this: var module = angular.module('myModule', ['ngResource']);
// because "$resource" is not available by default

// NOW, anywhere else, since the code above already ran
// I can use those NAMES as dependencies like this:

// We are creating another module now:
var koolModule = angular.module('km', ['myModule']);
// Note that I am requiring the previous module through its registered name

// Now, anything I've declared in that module
// - just like "ng" (by default) and "firebase" (required) does -
// is available for "injection"!!!

koolModule.controller('koolController',
    ['niceStuff', 'entityManager', function(niceStuff, entityManager) {
        console.log(niceStuff.blip);      // 'blop'
        console.log(niceStuff.blup + 10); // 317
    }]
);

これが、angularFireのようなfirebaseのものが利用可能になる方法です!私たちは何をしましたか?まず、「myModule」を作成し、それにNAMEDのものを登録しました。後で、「koolModule」に「myModule」が必要になりました。これらの名前は、インジェクターname => stuffリストですでに使用可能です。

  • パラメータ内のfbURLはどのようにリンクされていますか

    今見てきたように、ほとんどのモジュールメソッドは単に物事を登録するだけです-物事に名前を付けて、後でこれらの名前を介して注入および/または使用できるようにします。

    ときmodule.value('fbURL', 'https://angularjs-projects.firebaseio.com/')に呼び出され、fbURL(および指定された値が)に登録されているname => stuffリスト...この場合には、名前が「fbURL」であり、その値は/ stuffがURL文字列である-しかし、それは何でもかまいません!

  • Angular.jsが提供するすべてのサービス($ locationや$ timeoutなど)を確認できる場所はありますか?

    はい、APIリファレンス:http//docs.angularjs.org/api/

    で、ご注意ください左側のナビゲーションの編成方法...によってモジュール!最初に、多数のディレクティブ、サービス、フィルターなどを含むngモジュール。次に、他のモジュール(ngRoute、ngResource、ngMockなど)。それぞれに独自のサービス、フィトラー、またはディレクティブが含まれます。

これらの考えを共有する機会をありがとう。私はそれらを書くのを楽しんだ。


4
ありがとうございました!何と理由の良い説明。
Kevin Shea

4
名前付きパラメーターの存在のみに基づく暗黙の動作は、直感的ではなく、絶対に嫌いですが、すばらしい回答に感謝します。
jarmod 2015年

1
@jarmod私の考えを正確に-この投稿を最初に見ずに「phonecat」AngularJSチュートリアルを実行するのは困惑します!
モンクピット2016年

1
"それは単純だ。" いいえ。
J. Dimeo 2016

2
素晴らしい説明。いくつかのチュートリアルでは当然のことと思われることがたくさんあります。「このように入力するだけで機能します。」私はその方法と理由を知る必要があり、これが多くの答えになりました。どうもありがとうございました!
ジョンカレル2016

1

まず、このフレームワークを選択する素晴らしい仕事です。最も良い。$記号で表示される変数は挿入され、標準フレームワークの一部です。これらのサービスはあなたの人生をとても楽にしてくれます。コントローラについて考える最良の方法は、スクリプトシートです。それらはコードを分離するのに役立ちます。それらをメソッドとは考えないでください。$ timeoutや$ scopeなどの変数は、特定の処理が必要な場合に役立つサービスです。フレームワークのすべてのドキュメントはhttp://docs.angularjs.org/api/にありますが、このチュートリアルhttp://docs.angularjs.org/tutorial/から始め ます。

角火はフレームワークの一部ではありません。これは、強力なリアルタイム分散ネットワークを作成するためにフレームワークを活用する別のサービスです。anglefirejsをロードすると、サービスが付属し、表示されるパラメーターとして挿入されます。

2番目の質問に答えるために、渡すパラメーターは、対応するサービスを作成する限り、何でもかまいません。コントローラ用の独自のパラメータを作成するには、これを参照してください:http//docs.angularjs.org/guide/dev_guide.services.creating_services

fbURLは作成できる変数であり、質問に配置したコードは、作成方法の説明にすぎません。

Angularjsは、Angularjsが提供するものを見て学ぶことができるタイプのフレームワークではありません。それがすべてを提供するという理由だけで。素晴らしいアプリを作るために持っていくことができるすべてのもの。代わりに、Angularの問題を解決する方法をグーグルに尋ねることに集中する必要があります。

YouTubeのビデオもチェックしてください。あなたはいくつかの素晴らしいものを見つけるでしょう。


1

toxaqのコメントによると、ここに答えとしてのコメントがあります

  1. コントローラのパラメータは何でしょうか?

    ほとんどの場合、以前にどこかで定義した、またはルート定義でresolveを使用して定義したサービス、ファクトリ、値、定数などです。

  2. コントローラー関数はパラメーターとともにどこで呼び出されますか?

    コントローラを定義する適切な方法は次のとおりです。

    angular.module('project').controller('EditCtrl', [
        '$scope', 
        '$location', 
        '$routeParams', 
        'angularFire', 
        'fbURL', 
        function($scope, $location, $routeParams, angularFire, fbURL) { 
            ... 
        } 
    ]); 
    

    このようにして、最初に注入するサービスの名前を設定し、次に必要に応じてそれらのサービスに別の名前を付けます。実際、後でAngularコードを最小化する場合、これは必須です(最小化によって変数の名前が変更されるため、Angularは引き続きサービス名を見つけることができる必要があります)。

  3. angleFireはどこで定義されていますか?

    プロジェクトモジュールを定義するときに、firebaseモジュールの依存関係も含めました。Firebaseモジュールの内部には、前のfbURLのようなangularFireサービスが必要です。

  4. パラメータ内のfbURLはどのようにリンクされていますか

    ご存知のように、コントローラーのパラメーターは、コントローラーの定義から角度によって注入されています。Angularは登録されているすべてのサービスを調べ、指定されたパラメーター名と一致するものを見つけて、それに応じたサービスを注入しようとします。

  5. Angular.jsが提供するすべてのサービス($ locationや$ timeoutなど)を確認できる場所はありますか?

    Angularに含まれるすべての組み込みサービス、フィルター、ディレクティブのリストについては、APIをご覧ください:http//docs.angularjs.org/api


1

コントローラー関数はパラメーターとともにどこで呼び出されますか?

コントローラ関数は、ngControllerディレクティブを使用して、またはルート作成中に$routeProvider。を使用してコントローラについて言及した場合にインスタンス化されます。AngularJSはこれを透過的に実行し、を使用してコントローラーで定義したパラメーターを挿入します。DI

DIは、パラメーターの名前(または場合によっては順序)を照合することによって機能します。したがって$scope、現在のスコープ$httpを取得し、httpサービスを取得します

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.