前端开发框架总结之Angular实用技巧（五）

                          前端开发框架总结之Angular实用技巧（五）

上文讲了Angular中网络请求相关的知识，掌握了这些，我们就可以在前端与后台进行通讯了，这样可以实现复杂的业务功能了。今天我们再来介绍下angular 依赖注入相关的知识。

• angular 依赖注入

依赖注入的写法一共有三种

第一种

app.add.controller('manageCtrl', ['$scope','$rootScope', '$state','$http',function ($scope, $rootScope,$state,$http) {

}]);

第二种

app.add.controller('manageCtrl',function ($scope, $rootScope,$state,$http) {

});

第三种

app.add.controller('manageCtrl',manageCtrl) {

}]);

function manageCtrl($scope, $rootScope,$state,$http){
}

manageCtrl.$inject = [$scope, $rootScope,$state,$http];

其中第二种写法在代码混淆时会出错。

• 加载顺序

constant---->provider---->config---->value---->factory---->service----->run---->directive---->controller;

其中factory，service，directive是有使用的时候才会加载。

• 自定义服务

​​​​​​​自定义服务的方法有三种，factory、service、provider。每种定义的语法不同，但是作用一样。其中provider比较特殊，他可以注入到config函数。这个从上边的加载顺序就可以看出来。

具体每种的写法如下：

  <script>
      var app = angular.module('ExampleApp', []);

      app.config(['myConstants',function (myConstants) {
          console.log('enter config function1');
          console.log("myConstants.aaa:" + myConstants.aaa);
      }]);

      app.run(['myValues','myFactory','myService','myProvider','$rootScope',function (myValues,myFactory,myService,myProvider,$rootScope) {
          console.log('enter run function');
          console.log("myValues.bbb:" + myValues.bbb);
          console.log("myFactory.fff:" + myFactory.fff);
          console.log("myService.ddd:" + myService.ddd);
          console.log("myProvider.eee:" + myProvider.eee);
          $rootScope.globalVar = 'rootScope的全局变量';
      }]);

      app.config(['myProviderProvider',function (myProviderProvider) {
          console.log('enter config function2');
          console.log("myProviderProvider.eee:" + myProviderProvider.eee);
          myProviderProvider.eee = 'eee变化';
      }]);

      app.constant('myConstants',{
          aaa:'aaa初值'
      });

      app.value('myValues',{
          bbb:'bbb初值'
      });

      app.controller('testCtrl',['$scope','myProvider', function ($scope,myProvider) {
          console.log('enter control function');
          $scope.inputValue = '初值';

          console.log("myProvider.eee:" + myProvider.eee);
          console.log("rootScope.globalVar:" + $scope.globalVar);
      }]);

      app.factory('myFactory',function () {
          console.log('enter myFactory');
          var myFactory = {};
          myFactory.fff = 'myFactory fff初始值';
          return myFactory;
      });

      app.service('myService',function () {
          console.log('enter myService');
          this.ddd = 'ddd初值';
      });

      app.provider('myProvider',function (myConstants) {
          console.log('enter myProvider');
          this.eee = 'eee初值';

          console.log("myProvider,myConstants.aaa:" + myConstants.aaa);
          this.$get = function () {
              var that = this;
              return {
                  eee: that.eee
              }
          }
      });

      app.directive('myDirective',function () {
          console.log('enter myDirective');
          return {
              restrict: 'A',
              require: '?^ngModel',
          }
      })
  </script>

• 全局变量

​​​​​​​实现全局变量的方式有如下几种：constant、value、$rootScope、通过var定义全局变量（原生js语法）、通过service共享变量。

其中constant可以在config中注入，value不可以，$rootScope也不可以。他们都可以在run及以后使用。