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 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
简单的js表格操作
Sep 24 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
详解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
php 获取客户端的真实ip
2009/11/30 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
总结一些js自定义的函数
2006/08/05 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python匿名函数及应用示例
2019/04/09 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
初中生学习的自我评价
2013/11/14 职场文书
园林设计师自荐信
2013/11/18 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
设计顾问服务计划书
2014/05/04 职场文书
村居抓节水倡议书
2014/05/19 职场文书
社区两委对照检查材料
2014/08/23 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers