[解決済み] Angular.jsのコントローラパラメータを理解する

質問

Angular.jsの勉強を始めたばかりで、このサイトでは プロジェクト.jsを見ましたが、Angularホームページの"Wire up a Backend"の例では .

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

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. すべてのサービスを見ることができる場所はありますか、例えば $location と $timeout は、Angular.jsが提供するものですか？(リストを見つけようとしましたが、失敗しました。)

どのように解決するのですか？

• コントローラのパラメータは何にすればよいのでしょうか？

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

• コントローラ関数がパラメータとともに呼び出される場所はどこですか？

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

  呼び出す内容 関連するもの には名前があります。 依存関係 という名前があります。呼び出すものは マジック はAngularJSの 依存性注入 のメカニズムが動作しています。

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

  単純な話です。依存関係(インジェクタが管理するパラメータ)をインジェクタに指示する方法がいくつかあります。

  単に関数を function myCtrl($scope) {} と宣言すると、インジェクターは $scope サービスを見つけることができます。しかし、もし ミニファイ とすると、パラメータ名が "a" や "x" のような小さな文字列に変更されてしまうため、インジェクタはサービスを見つけられなくなります。この問題を回避するために、インジェクションするサービス名を 配列記法 . この場合、以下のような関数を宣言します。 myCtrl = ['$scope', function($scope) {}]

  あなたは、多くの 配列表記 の使い方をよく見かけますが、これはAngularJSの世界です。これで理解できたと思います。さらに $scope と angularFire で、それらを 他の名前 を使ってください（名前を変更するのは 推奨されません。 - この例は学習のためのものです）。 ['$scope', 'angularFire', function(skop, af) {}] - このように、関数内部では $scope を "skop" として、angularFire を "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
    }
];

• angularFireはどこで定義されていますか？

  このページでは ファイアベース モジュール .

  もうお分かりのように、インジェクターはその "thing" を持つ限り、何でも注入します。 名前 が登録され、利用可能である限り、何でも注入します。もし、そのを持つがあれば、それを注入することができます。 名前 があれば、その人は を提供する である。

  では、どのようにして、この name => stuff のリストはどのように作られるのでしょうか？

  モジュール が答えです。A モジュール のリストに過ぎません。 name => stuff . にあります。 モジュール で、サービス、ファクトリー、フィルタ、ディレクティブなどを登録します。

  を注意深く見てください。 モジュールのメソッドを公式ドキュメントの ... ほとんどすべてのメソッドがパラメータとして受け取ります。 名前 と、いくつかの " のもの "（ここで、"stuff"はほとんど常に 機能です。 であり、コントローラ、ファクトリ、ディレクティブのいずれかを定義しています)。この「もの」はすべて、次のようになります。 インジェクタブル になるものです。 名前 .

  "$timeout"、"$http"などのAngularJSのサービスは、デフォルトで利用できるのは ngモジュール がすでにフレームワークによって読み込まれているためです。

  追加のサービスのために、ロード/要求する必要があるのは モジュール . それは、あなたが ngRouter , ファイアベース などなど... を読み込むことで モジュール を読み込むと、その登録されているものは インジェクションのために利用可能 で あなたの モジュール/アプリの中にあります。

// 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
    }]
);