詳解Angularjs中的依賴注入

字號:


    這篇文章主要為大家詳細介紹了Angularjs中的依賴注入,AngularJS提供了一個至高無上的依賴注入機制,感興趣的小伙伴們可以參考一下
    一個對象通常有三種方式可以獲得對其依賴的控制權(quán):
    在內(nèi)部創(chuàng)建依賴;
    通過全局變量進行引用;
    在需要的地方通過參數(shù)進行傳遞
    依賴注入是通過第三種方式實現(xiàn)的。比如:
    function SomeClass(greeter) {
    this.greeter = greeter;
    }
    SomeClass.prototype.greetName = function(name) {
    this.greeter.greet(name);
    };
    SomeClass能夠在運行時訪問到內(nèi)部的greeter,但它并不關(guān)心如何獲得對greeter的引用。
    為了獲得對greeter實例的引用,SomeClass的創(chuàng)建者會負責構(gòu)造其依賴關(guān)系并傳遞進去。
    基于以上原因,AngularJS使用$injetor(注入器服務(wù))來管理依賴關(guān)系的查詢和實例化。
    事實上,$injetor負責實例化AngularJS中所有的組件,包括應(yīng)用的模塊、指令和控制器等。
    例如下面這段代碼。這是一個簡單的應(yīng)用,聲明了一個模塊和一個控制器:
    angular.module('myApp', [])
    .factory('greeter', function() {
    return {
    greet: function(msg) {alert(msg);}
    }
    })
    .controller('MyController',
    function($scope, greeter) {
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
    });
    當AngularJS實例化這個模塊時,會查找greeter并自然而然地把對它的引用傳遞進去:
    <div ng-app="myApp">
    <div ng-controller="MyController">
    <button ng-click="sayHello()">Hello</button>
    </div>
    </div>
    而在內(nèi)部,AngularJS的處理過程是下面這樣的:
    // 使用注入器加載應(yīng)用
    var injector = angular.injector(['ng', 'myApp']);
    // 通過注入器加載$controller服務(wù):var $controller = injector.get('$controller');
    var scope = injector.get('$rootScope').$new();
    // 加載控制器并傳入一個作用域,同AngularJS在運行時做的一樣
    var MyController = $controller('MyController', {$scope: scope})
    以上就是本文的全部內(nèi)容,希望本文對大家學習Angularjs依賴注入有所幫助。