首頁 >web前端 >js教程 >AngularJS依賴注入的幾種方式

AngularJS依賴注入的幾種方式

php中世界最好的语言原創: 2018-03-16 17:17:481862瀏覽

本文參考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實例化這個模組時，會尋找greeter並自然而然地把對它的引用傳遞進去

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);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

我們為我們的函數設定的參數名稱分別是renamed$scope和renamedGreeter，然後我們在後面使用

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

明確的將我們需要的依賴注入到MyController函數中；

所以在MyController函數中，renamed

scope,MyController.

scope', 'greeter'];代表greeter

#3、行內注入宣告

AngularJS提供的注入宣告的最後一種方式，是可以隨時使用的行內注入宣告。

允許我們在函數定義時從行內將參數傳入。此外，它可以避免在定義過程中使用臨時變數。

這種方式其實是一個語法糖，它同前面提到的透過$inject屬性進行注入宣告的原理是完全一樣的

範例：（跟上面的例子一樣，只是修改了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!");
            };
        }]);

演示效果還是一樣的，就不貼圖了

由於需要處理的是一個字符串組成的列表，行內注入聲明也可以在壓縮後的程式碼中正常運作。