温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Angular中$injector对象的示例分析

发布时间:2021-05-20 10:16:42 来源:亿速云 阅读:141 作者:小新 栏目:web开发

这篇文章给大家分享的是有关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对象的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI