Angularjs_AngularJS の依存性注入の詳細な説明-jsチュートリアル-php.cn

Angularjs_AngularJS の依存性注入の詳細な説明

WBOY

リリース： 2016-05-16 15:11:11

オリジナル

1352 人が閲覧しました

オブジェクトがその依存関係を制御するには通常、次の 3 つの方法があります。

内部で依存関係を作成します。
グローバル変数を通じて参照されます。
必要な場所にパラメータを渡します

依存性注入は 3 番目の方法で実装されます。例:

function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};

ログイン後にコピー

SomeClass は実行時に内部グリーターにアクセスできますが、グリーターへの参照を取得する方法については考慮しません。
グリーターインスタンスへの参照を取得するには、SomeClass の作成者がその依存関係を構築し、それらを渡す必要があります。

上記の理由に基づいて、AngularJS は $injetor (インジェクターサービス) を使用して依存関係のクエリとインスタンス化を管理します。
実際、$injetor は、アプリケーションモジュール、ディレクティブ、コントローラーなど、AngularJS のすべてのコンポーネントをインスタンス化する役割を果たします。

たとえば、次のコードです。これはモジュールとコントローラーを宣言する単純なアプリケーションです:

angular.module('myApp', [])
.factory('greeter', function() {
return {
greet: function(msg) {alert(msg);}
}
})
.controller('MyController',
function($scope, greeter) {
$scope.sayHello = function() {
greeter.greet("Hello!");
};
});

ログイン後にコピー

AngularJS がこのモジュールをインスタンス化するとき、グリーターを探し、自然にそれに参照を渡します。

<div ng-app="myApp">
<div ng-controller="MyController">
<button ng-click="sayHello()">Hello</button>
</div>
</div>

ログイン後にコピー

AngularJS の内部的な処理プロセスは次のとおりです:

// 使用注入器加载应用
var injector = angular.injector(['ng', 'myApp']);
// 通过注入器加载$controller服务：var $controller = injector.get('$controller');
var scope = injector.get('$rootScope').$new();
// 加载控制器并传入一个作用域，同AngularJS在运行时做的一样
var MyController = $controller('MyController', {$scope: scope})

ログイン後にコピー

上記がこの記事の全内容です。この記事が Angularjs の依存関係挿入を学ぶすべての人に役立つことを願っています。