AngularJS での依存関係注入のいくつかの方法

この記事は、AngularJs決定版ガイド

概念

依存性注入は、依存関係のハードコーディングを削除し、実行時に依存関係を変更したり削除したりできるようにする設計パターンを参照しています。

機能の観点から見ると、依存関係注入は事前に依存関係を自動的に検出し、注入ターゲットの依存リソースに通知するため、ターゲットが必要なときにリソースをすぐに注入できます。

AngularJS は $injetor (インジェクター サービス) を使用して依存関係のクエリとインスタンス化を管理します。

実際、$injetor は、アプリケーション モジュール、ディレクティブ、コントローラー などを含む、AngularJS のすべてのコンポーネントのインスタンス化を担当します。

実行時、$injetor は起動時にモジュールをインスタンス化し、必要なすべての依存関係をモジュールに渡します。

---

依存関係注入のいくつかの方法

1. 推論注入ステートメント

明示的なステートメントがない場合、AngularJS はパラメーター名が依存関係の名前であると想定します。

AngularJS では解析に元の非圧縮パラメータ リストが必要であるため、このプロセスは非圧縮および難読化されていないコードでのみ機能することに注意してください。

例: (モジュールとコントローラーの宣言)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

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

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

2. 明示的なインジェクション宣言

AngularJS は明示的な方法を提供します。関数が呼び出されるときに使用する必要がある依存関係を明確に 定義するためです。

この方法で依存関係を宣言すると、ソース コードが圧縮され、パラメーター名が変更された場合でも、引き続き正常に動作します。

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

関数に設定したパラメータ名は、$scope と renamedGreeter です。そして、

MyController.$inject=['$scope','greeter'];

を使用して、必要な依存関係を MyController 関数に明示的に注入します。したがって、MyController 関数では、

scope という名前に変更されます。 ,MyController.

scope', 'greeter']; は、greeter を表します

3. インライン注入ステートメント

---

AngularJS が提供するインライン注入ステートメントの最後の方法は、いつでも使用できるインライン注入ステートメントです。

関数定義からパラメーターをインラインで渡すことができます。さらに、定義中に一時変数を使用する必要がなくなります。

このメソッドは、実際には構文上の糖衣です。

例: (上記の例と同じですが、js 部分のみが変更されています)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

デモの効果はグラフィックスなしでも同じです

処理する必要があるのは文字列のリストであるため、インライン注入ステートメントは圧縮コードでも通常どおり実行できます。

この記事は、AngularJs Definitive Guide を参照しています

概念

依存関係の挿入は、依存関係のハード コーディングを削除する設計パターンであり、実行時に依存関係を変更したり削除したりできるようになります。

機能の観点から見ると、依存関係注入は事前に依存関係を自動的に検出し、注入ターゲットの依存リソースに通知するため、ターゲットが必要なときにリソースをすぐに注入できます。

AngularJS は $injetor (インジェクター サービス) を使用して依存関係のクエリとインスタンス化を管理します。

実際、$injetor は、アプリケーション モジュール、ディレクティブ、コントローラーなど、AngularJS のすべてのコンポーネントをインスタンス化する役割を果たします。

実行時、$injetor は、起動時にモジュールをインスタンス化し、必要なすべての依存関係を渡す責任を負います。

---

依存関係注入のいくつかの方法

1. 推論注入宣言

明示的な宣言がない場合、AngularJS はパラメーター名が依存関係の名前であると想定します。

AngularJS では解析に元の非圧縮パラメータ リストが必要であるため、このプロセスは非圧縮および難読化されていないコードでのみ機能することに注意してください。

例: (モジュールとコントローラーの宣言)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

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

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

2. 明示的なインジェクション宣言

AngularJS は、次の明示的なメソッドを提供します。関数が呼び出されるときに使用する必要がある依存関係を明確に定義します。

この方法で依存関係を宣言すると、ソース コードが圧縮され、パラメーター名が変更された場合でも、引き続き正常に動作します。

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

関数に設定したパラメータ名は、$scope と renamedGreeter です。そして、

MyController.$inject=['$scope','greeter'];

を使用して、必要な依存関係を MyController 関数に明示的に注入します。したがって、MyController 関数では、

scope という名前に変更されます。 ,MyController.

scope', 'greeter']; は、greeter を表します

3. インライン注入ステートメント

---

AngularJS が提供するインライン注入ステートメントの最後の方法は、いつでも使用できるインライン注入ステートメントです。

関数定義からパラメーターをインラインで渡すことができます。さらに、定義中に一時変数を使用する必要がなくなります。

このメソッドは、実際には構文上の糖衣です。

例: (上記の例と同じですが、js 部分のみが変更されています)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

処理する必要があるのは文字列のリストであるため、インライン注入ステートメントは圧縮コードでも通常どおり実行できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

$watch、$apply、$digestのデータバインディングプロセスの詳細な説明

Html5 localStorageの使用方法の詳細な説明

AJAXクロスドメインの知識

以上がAngularJS での依存関係注入のいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。