詳解Angularjs中的依賴注入_AngularJS

來源:互聯網
上載者:User

一個對象通常有三種方式可以獲得對其依賴的控制權:

  • 在內部建立依賴;
  • 通過全域變數進行引用;
  • 在需要的地方通過參數進行傳遞

依賴注入是通過第三種方式實現的。比如:

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

SomeClass能夠在運行時訪問到內部的greeter,但它並不關心如何獲得對greeter的引用。
為了獲得對greeter執行個體的引用,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執行個體化這個模組時,會尋找greeter並自然而然地把對它的引用傳遞進去:

<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依賴注入有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.