快捷導(dǎo)航

AngularJs Injecting Services Into Controllers詳解

更新時(shí)間：2016年09月02日 15:18:10 作者：Lcllao

本文主要介紹AngularJs Injecting Services Into Controllers的知識(shí),這里整理了一下相關(guān)資料，及示例代碼，幫助大家學(xué)習(xí)和理解，有興趣的小伙伴可以參考下

　把service當(dāng)作被依賴的資源加載到controller中的方法，與加載到其他服務(wù)中的方法很相似。

　　由于javascript是一個(gè)動(dòng)態(tài)語言，DI不能弄明白應(yīng)該通過static types（like in static typed languages）注入哪一個(gè)service。因此，我們需要通過$inject屬性指定service名稱，它是一個(gè)包含需要注入的service名稱的字符串?dāng)?shù)組。service ID順序的重要性：工廠方法中的參數(shù)順序，與service在數(shù)組中的順序一致。工廠方法的參數(shù)名稱并不重要，但是按照慣常的做法，他們與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) {
      //這里是服務(wù)依賴服務(wù)，通過這種顯式的方式，參數(shù)名可以亂填，但順序要對(duì)應(yīng)
      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依賴服務(wù)，通過這種顯式的方式，參數(shù)名可以亂填，但順序要對(duì)應(yīng)
    $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的一個(gè)新特性，允許通過參數(shù)名稱決定依賴。讓我們重寫上面的例子，展示如何隱式注入$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) {
      //服務(wù)依賴服務(wù)，隱式依賴，名稱一致即可
      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) {
    //服務(wù)依賴服務(wù)，隱式依賴，名稱一致即可
    $scope.msgs = [];
    $scope.saveMsg = function() {
      this.msgs.push(this.msg);
      notify(this.msg);
      this.msg = "";
    };
  }
</script>
</body>
</html>

　　雖然這樣很方便，但是假如我們需要壓縮、混淆我們的代碼，這可能會(huì)導(dǎo)致參數(shù)名稱被更改，遇到這種情況的時(shí)候，我們還是需要使用顯式聲明依賴的方式。

以上就是關(guān)于AngularJS Injecting Services Into Controllers的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: