AngularJs Injecting Services Into Controllers详解


Posted in Javascript onSeptember 02, 2016

     把service当作被依赖的资源加载到controller中的方法,与加载到其他服务中的方法很相似。

由于javascript是一个动态语言,DI不能弄明白应该通过static types(like in static typed languages)注入哪一个service。因此,我们需要通过$inject属性指定service名称, 它是一个包含需要注入的service名称的字符串数组。service ID顺序的重要性:工厂方法中的参数顺序,与service在数组中的顺序一致。工厂方法的参数名称并不重要,但是按照惯常的做法,他们与service ID一一匹配,下面将讨论这样做的好处。

1.显式依赖注入

function myController($scope,$loc,$log) {
$scope.firstMethod = function() {
  
//使用$location service
    $loc.setHash();
  };

$scope.secondMethod = function() {
    //使用$log service
    $log.info(‘…')

};
}
myController.$inject = [‘$location','$log'];

例子:

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
  <meta charset="UTF-8">
  <title>explicit-inject-service</title>
</head>
<body>
<div ng-controller="MyController">
  <input type="text" ng-model="msg"/>
  <button ng-click="saveMsg()">save msg</button>
  <ul>
    <li ng-repeat="msg in msgs">{{msg}}</li>
  </ul>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("MainApp",[],function($provide) {
    $provide.factory("notify",["$window","$timeout",function(win,timeout) {
      //这里是服务依赖服务,通过这种显式的方式,参数名可以乱填,但顺序要对应
      var msgs = [];
      return function(msg) {
        msgs.push(msg);
        if(msgs.length==3) {
          timeout(function() {
            win.alert(msgs.join("\n"));
            msgs = [];
          },10);
        }
      }
    }]);
  });

  function MyController($s,$noti) {
    //这里是controller依赖服务,通过这种显式的方式,参数名可以乱填,但顺序要对应
    $s.msgs = [];
    $s.saveMsg = function() {
      this.msgs.push(this.msg);
      $noti(this.msg);
      this.msg = "";
    };
  }
  //指定注入的东东
  //也可以参考http://www.cnblogs.com/lcllao/archive/2012/10/16/2725317.html里面的例子
  MyController.$inject = ['$scope','notify'];

</script>
</body>
</html>

 2. 隐式依赖注入

 angular DI的一个新特性,允许通过参数名称决定依赖。让我们重写上面的例子,展示如何隐式注入$window、$scope与notify service。

例子:

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
  <meta charset="UTF-8">
  <title>implicit-inject-service</title>
</head>
<body>
<div ng-controller="MyController">
  <input type="text" ng-model="msg"/>
  <button ng-click="saveMsg()">save msg</button>
  <ul>
    <li ng-repeat="msg in msgs">{{msg}}</li>
  </ul>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("MainApp",[],function($provide) {
    $provide.factory("notify",function($window,$timeout) {
      //服务依赖服务,隐式依赖,名称一致即可
      var msgs = [];
      return function(msg) {
        msgs.push(msg);
        if(msgs.length==3) {
          $timeout(function() {
            $window.alert(msgs.join("\n"));
            msgs = [];
          },10);
        }
      }
    });
  });

  function MyController($scope,notify) {
    //服务依赖服务,隐式依赖,名称一致即可
    $scope.msgs = [];
    $scope.saveMsg = function() {
      this.msgs.push(this.msg);
      notify(this.msg);
      this.msg = "";
    };
  }
</script>
</body>
</html>
 

虽然这样很方便,但是假如我们需要压缩、混淆我们的代码,这可能会导致参数名称被更改,遇到这种情况的时候,我们还是需要使用显式声明依赖的方式。

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

Javascript 相关文章推荐
jQuery随机切换图片的小例子
Apr 18 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 #Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 #Javascript
AngularJs  Using $location详解及示例代码
Sep 02 #Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 #Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 #Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 #Javascript
AngularJs  Understanding Angular Templates
Sep 02 #Javascript
You might like
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python实现的计数排序算法示例
2017/11/29 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
建筑文秘专业个人求职信范文
2013/12/28 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
认识深刻的检讨书
2014/02/16 职场文书
关于责任的演讲稿
2014/05/20 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
简短清晨问候语
2015/11/10 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python