AngularJs Injecting Services Into Controllers详解

更新时间：2016年09月02日 15:18:10 作者：Lcllao

本文主要介绍AngularJs Injecting Services Into Controllers的知识,这里整理了一下相关资料，及示例代码，帮助大家学习和理解，有兴趣的小伙伴可以参考下

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

您可能感兴趣的文章:

利用Ionic2 + angular4实现一个地区选择组件
ionic是一个移动端开发框架，使用hybird技术，只要使用前端开发技术就可以开发出电脑端，安卓端和ios端的站点程序。下面这篇文章主要给大家介绍了关于利用Ionic2 + angular4实现一个地区选择组件的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
Angular2 NgModule 模块详解
这篇文章主要介绍了Angular2 NgModule 模块详解的相关资料,并附简单实例，需要的朋友可以参考下
2016-10-10
Angular学习教程之RouterLink花式跳转
这篇文章主要给大家介绍了关于Angular学习教程之RouterLink花式跳转的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2018-05-05
AngularJS基础 ng-init 指令简单示例
本文主要介绍AngularJS ng-init 指令,这里帮大家整理了关于ng-init 指令的基本知识资料,并附有简单的代码示例,有需要学习的小伙伴可以参考下
2016-08-08
用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式)
这篇文章主要介绍了用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
AngularJS中的拦截器实例详解
这篇文章主要介绍了AngularJS中的拦截器实例详解的相关资料,需要的朋友可以参考下
2017-04-04
Angular4集成ng2-file-upload的上传组件
本篇文章主要介绍了Angular4集成ng2-file-upload的上传组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
AngularJS中监视Scope变量以及外部调用Scope方法
在AngularJS中，有时候需要监视Scope中的某个变量，因为变量的改变会影响一些界面元素的显示，接下来通过本文给大家介绍AngularJS中监视Scope变量以及外部调用Scope方法，需要的朋友参考下吧
2016-01-01
Angular应用里环境变量SERVER_REQUEST_ORIGIN含义解析
这篇文章主要为大家介绍了Angular应用里环境变量SERVER_REQUEST_ORIGIN的含义解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-10-10
Angular中使用ui router实现系统权限控制及开发遇到问题
这篇文章主要介绍了Angular中使用ui router实现系统权限控制及开发遇到问题的相关资料,本文分步骤介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09