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 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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显示MySQL数据的三种方法
2008/06/05 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
PHP 文件上传限制问题
2019/09/01 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
详解vue中组件参数
2018/07/09 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python定时执行指定函数的方法
2015/05/27 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python实现多进程的四种方式
2019/02/22 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
股权转让协议书范本
2014/04/12 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL