AngularJS $injector 依赖注入详解  更新时间:2016年09月14日 14:46:42   作者:xingoo   这篇文章主要介绍了AngularJS $injector 依赖注入的相关资料,需要的朋友可以参考下 推断式注入 这种注入方式,需要在保证参数名称与服务名称相同。如果代码要经过压缩等操作,就会导致注入失败。 app.controller(“myCtrl1”, function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } }); 标记式注入 这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性。 var myCtrl2 = function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } } myCtrl2.$injector = [‘hello1′,’hello2’]; app.controller(“myCtrl2”, myCtrl2); 内联式注入 这种注入方式直接传入两个参数,一个是名字,另一个是一个数组。这个数组的最后一个参数是真正的方法体,其他的都是依赖的目标,但是要保证与方法体的参数顺序一致(与标记注入一样)。 app.controller(“myCtrl3”,[‘$scope’,’hello1′,’hello2′,function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } }]); $injector常用的方法 在angular中,可以通过angular.injector()获得注入器。 var $injector = angular.injector(); 通过$injector.get(‘serviceName’)获得依赖的服务名字 $injector.get(‘$scope’) 通过$injector.annotate(‘xxx’)获得xxx的所有依赖项 $injector.annotate(xxx) 样例代码 以上就是对AngularJS injector的资料整理,后续继续补充相关资料,谢谢大家对本站的支持! 您可能感兴趣的文章: angular 服务的单例模式(依赖注入模式下)详解 深入理解Angular中的依赖注入 Angular 4依赖注入学习教程之InjectToken的使用(八) Angular 4依赖注入学习教程之ValueProvider的使用(七) AngularJS学习第二篇 AngularJS依赖注入 AngularJS的依赖注入实例分析(使用module和injector) 自学实现angularjs依赖注入 Angular.JS学习之依赖注入$injector详析 详解Angular依赖注入 AngularJS $injector 相关文章 详解关于Angular4 ng-zorro使用过程中遇到的问题 这篇文章主要介绍了详解关于Angular4 ng-zorro使用过程中遇到的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 AngularJs基本特性解析(一) angularjs是javascript的一个框架,通过script标签添加到网页中。这篇文章主要介绍了AngularJs基本特性解析(一)的相关资料,需要的朋友可以参考下 2016-07-07 AngularJS中过滤器的使用与自定义实例代码 这篇文章运用实例代码给大家介绍了angularjs中过滤器的使用和自定义过滤器,对大家学习AngularJS具有一定的参考借鉴价值,感兴趣的朋友们可以参考借鉴。 2016-09-09 AngularJs directive详解及示例代码 本文主要讲解AngularJs directive的知识,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下 2016-09-09 Angularjs 滚动加载更多数据 AngularJS 通过新的属性和表达式扩展了 HTML。本文主要给大家介绍Angularjs 滚动加载更多数据的相关知识,需要的朋友参考下吧 2016-03-03 AngularJS过滤器filter用法总结 这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式较为详细的总结分析了过滤器filter的功能、分类、使用技巧及自定义过滤器的实现方法,需要的朋友可以参考下 2016-12-12 angular 用拦截器统一处理http请求和响应的方法 下面小编就为大家带来一篇angular 用拦截器统一处理http请求和响应的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 Angularjs单选改为多选的开发过程及问题解析 在项目中遇到这样的需求想把下拉框的单选改为多选,怎么实现呢?下面小编通过本文给大家分享angularjs单选改为多选的开发过程及问题解析,需要的朋友参考下 2017-02-02 highcharts 在angular中的使用示例代码 本篇文章主要介绍了highcharts 在angular中的使用示例代码,非常具有实用价值,需要的朋友可以参考下 2017-09-09 详解Angular的8个主要构造块 Angular 主要分为八大构造块(也就是八个核心概念):模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下 2017-06-06 最新评论

推断式注入

这种注入方式,需要在保证参数名称与服务名称相同。如果代码要经过压缩等操作,就会导致注入失败。

 app.controller("myCtrl1", function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  });

标记式注入

这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性。

var myCtrl2 = function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = ['hello1','hello2'];
  app.controller("myCtrl2", myCtrl2);

内联式注入

这种注入方式直接传入两个参数,一个是名字,另一个是一个数组。这个数组的最后一个参数是真正的方法体,其他的都是依赖的目标,但是要保证与方法体的参数顺序一致(与标记注入一样)。

app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }]);

$injector常用的方法

在angular中,可以通过angular.injector()获得注入器。

var $injector = angular.injector();

通过$injector.get(‘serviceName’)获得依赖的服务名字

$injector.get(‘$scope’)

通过$injector.annotate(‘xxx’)获得xxx的所有依赖项

$injector.annotate(xxx)

样例代码

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl1">
    <input type="button" ng-click="hello()" value="ctrl1"></input>
  </div>
  <div ng-controller="myCtrl2">
    <input type="button" ng-click="hello()" value="ctrl2"></input>
  </div>
  <div ng-controller="myCtrl3">
    <input type="button" ng-click="hello()" value="ctrl3"></input>
  </div>
  <script type="text/javascript">
  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();
  console.log(angular.equals($injector.get('$injector'),$injector));//true
  console.log(angular.equals($injector.invoke(function($injector) {return $injector;}),$injector));//true

  //inferred
  // $injector.invoke(function(serviceA){});
  app.controller("myCtrl1", function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  });

  //annotated
  // function explicit(serviceA) {};
  // explicit.$inject = ['serviceA'];
  // $injector.invoke(explicit);
  var myCtrl2 = function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = ['hello1','hello2'];
  app.controller("myCtrl2", myCtrl2);

  //inline
  app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
  // app.controller("myCtrl3",['$scope','hello1','hello2',function(a,b,c){
    // a.hello = function(){
    // b.hello();
    // c.hello();
    // }
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }]);

  console.log($injector.annotate(myCtrl2));//["$scope","hello1","hello2"]
  </script>
</body>
</html>







以上就是对AngularJS injector的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • angular 服务的单例模式(依赖注入模式下)详解
  • 深入理解Angular中的依赖注入
  • Angular 4依赖注入学习教程之InjectToken的使用(八)
  • Angular 4依赖注入学习教程之ValueProvider的使用(七)
  • AngularJS学习第二篇 AngularJS依赖注入
  • AngularJS的依赖注入实例分析(使用module和injector)
  • 自学实现angularjs依赖注入
  • Angular.JS学习之依赖注入$injector详析
  • 详解Angular依赖注入
张贴在3