淺談Angular中的$injector對象

本篇文章和大家一起了解一下Angular依賴注入物件$injector。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

$injector其實是IOC容器，包含了許多我們透過.module()和$provide所建立的模組和服務。 $injector服務提供了對依賴注入器物件的訪問，當然我們也可以呼叫angular.injector()來獲得注入器。 【相關推薦：《angular教學》】

var injector1 = angular.injector(["myModule","herModule"]); //获得myModule和herModule模块下的注入器实例

angular.injector()可以呼叫多次，每次都返回新建的injector對象，所以我們自己建立的myInjector和angular自動建立的$injector不是同一個物件。

    var injector1 = angular.injector(["myModule","herModule"]);  
    var injector2 = angular.injector(["myModule","herModule"]);  
      
    alert(injector1 == injector2);//false

$injector常用的方法

透過$injector.get('serviceName')根據名字獲得服務的實例，透過$injector.annotate('xxx' )獲得xxx的所有依賴項。

var app = angular.module("myApp",[]);
  app.factory("hello1",function(){
    return {
      hello:function(){
        console.log("hello1 service");
      }
    }
  });
  app.factory("hello2",function(){
    return {
      hello:function(){
        console.log("hello2 service");
      }
    }
  });
 
  var $injector = angular.injector(['myApp']);
  console.log(angular.equals($injector.get('$injector'),$injector));//true
  var myCtrl2 = function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = ['hello1','hello2'];
  app.controller("myCtrl2", myCtrl2);
  console.log($injector.annotate(myCtrl2));//["$scope","hello1","hello2"]

angular中三種宣告所依賴的方式

#在我們使用.controller()函數的時候，會呼叫$controller服務，而在底層，則將使用$injector服務的invoke()函數來建立該控制器，函數invoke()將負責分析什麼參數需要被傳入controller中，並執行該函數，所以底層實際上是使用了以下三種方式聲明依賴。

    // 创建myModule模块、注册服务  
    var myModule = angular.module('myModule', []);  
    myModule.service('myService', function() {  
                this.my = 0;  
    });  
      
    // 获取injector  
    var injector = angular.injector(["myModule"]);  
      
    // 第一种inference（推断）
    injector.invoke(function(myService){alert(myService.my);});  
      
    // 第二种annotation （注入）
    function explicit(serviceA) {alert(serviceA.my);};  
    explicit.$inject = ['myService'];  
    injector.invoke(explicit);  
      
    // 第三种inline  （内联）
    injector.invoke(['myService', function(serviceA){alert(serviceA.my);}]);

$scope物件

因為$scope是局部的，不是一個服務，所以Angular使用它的方式和服務的方式不同，為了正確注入$scope變量，以下是一個理論上實踐：

 $injector.invoke(function ($scope, $http) {
  	//在这里使用$scope,$http
  },
  null,
  {$scope: {}});

$rootScope物件

$rootScope是由angularJS載入模組的時候自動建立的，每個模組只會有1個rootScope。 rootScope創建好會以服務的形式加入到 $injector中。也就是說透過 $injector.get("$ rootScope ")能夠取得到某個模組的根作用域。  

// 新建一个模块
var module = angular.module("app",[]);
 
// true说明$rootScope确实以服务的形式包含在模块的injector中
var hasNgInjector = angular.injector(['app','ng']);  
console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true
 
// 获取模块相应的injector对象,不获取ng模块中的服务
// 不依赖于ng模块,无法获取$rootScope服务
var noNgInjector = angular.injector(['app']);
console.log("no $rootScope=" + noNgInjector.has("$rootScope"));//false
 
// 获取angular核心的ng模块
var ngInjector = angular.injector(['ng']);  
console.log("ng $rootScope=" + ngInjector.has("$rootScope"));//true

更多程式相關知識，請造訪：程式設計影片！ ！

以上是淺談Angular中的$injector對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！