浅谈Angular中的$injector对象


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章和大家一起了解一下Angular依赖注入对象$injector。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

$injector其实是一个IOC容器,包含了很多我们通过.module()和$provide创建的模块和服务。$injector服务提供了对依赖注入器对象的访问,当然我们也可以调用angular.injector()来获得注入器。【相关推荐:《angular教程》】

1

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

angular.injector()可以调用多次,每次都返回新建的injector对象,所以我们自己创建的myInjector和angular自动创建的$injector不是同一个对象。

1

2

3

4

var injector1 = angular.injector(["myModule","herModule"]); 

var injector2 = angular.injector(["myModule","herModule"]); 

   

alert(injector1 == injector2);//false

$injector常用的方法

通过$injector.get('serviceName')根据名字获得服务的实例,通过$injector.annotate('xxx')获得xxx的所有依赖项。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

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中,并执行该函数,所以底层实际上是使用了以下三种方式声明依赖。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// 创建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变量,下面是一个理论上实践:

1

2

3

4

5

$injector.invoke(function ($scope, $http) {

   //在这里使用$scope,$http

 },

 null,

 {$scope: {}});

$rootScope对象

$rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ")能够获取到某个模块的根作用域。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// 新建一个模块

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对象的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

详解Angular中自定义创建指令的方法

浅谈Angular控制器通信的4种方式

浅析Angular路由中的懒加载、守卫、动态参数

浅谈Angular中插槽的用法

聊聊Angular中的单元测试

深入了解Angular中的pipe(管道)

浅谈Angular如何借助第三方组件和懒加载技术进行性能优化

浅谈Angular8兼容ie10+版本的方法

Angular material的使用详解

聊聊Angular指令中的prelink和postlink函数

更多相关阅读请进入《Angular》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...