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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
javascript的几种写法总结
Sep 30 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
ztree+ajax实现文件树下载功能
May 18 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
生成sessionid和随机密码的例子
2006/10/09 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Python yield 使用浅析
2015/05/28 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python3跳出一个循环的实例操作
2020/08/18 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
《三个小伙伴》教学反思
2014/04/11 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
社区母亲节活动总结
2015/02/10 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js