AngularJS $injector 依赖注入详解


Posted in Javascript onSeptember 14, 2016

推断式注入

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

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的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
Node.js+Express配置入门教程
May 19 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 #Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 #Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 #Javascript
js实现文字截断功能
Sep 14 #Javascript
jQuery版AJAX简易封装代码
Sep 14 #Javascript
原生JS实现首页进度加载动画
Sep 14 #Javascript
jquery判断iPhone、Android设备类型
Sep 14 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python配置grpc环境
2019/01/01 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
安全责任书范文
2014/03/12 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
学前班学生评语
2014/12/29 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
入党培养人考察意见
2015/06/08 职场文书
新教师教学工作总结
2015/08/14 职场文书
升学宴家长答谢词
2015/09/29 职场文书
八年级历史教学反思
2016/02/19 职场文书