烦人的Angular注解 - grunt-ng-annotate的使用烦人的Angular注解 - grunt-ng-a

angular加入了依赖注入

编写代码的时候,大致的写法如下

app.controller('tempController', function($scope, $http, $state, $timeout) {

  ...

 })

可是这样的代码,压缩后会造成一个问题.
函数的参数:$scope, $http, $state, $timeout会变成: a,b,c,d

导致这个函数找不到需要注入的服务,因为每个参数的命名都是严格规定的.

如下:

app.controller('tempController', function(a,b,c,d) {

  ...

 })

为了解决这个问题,angular支持如下写法:

app.controller('tempController', ["$scope", "$http", "$state", "$timeout", function($scope, $http, $state, $timeout) {



 }])

那么问题来了:

每一次添加一个服务的时候,都需要写两遍.
每一次删除一个服务的时候,都需要删两遍.

表示大大降低了变成的愉悦.

那么我们怎么解决这个问题呢?

今天的主角来了,那就是grunt-ng-annotate

这是一个grunt的插件,当然在glup上也有.因为我的项目主要是用grunt写的.
那么这次主要讲grunt版本的ng-annotate.

首先我们需要安装ng-annotate:

npm install grunt-ng-annotate --save-dev

在你的Gruntfile里运行这个插件:

grunt.loadNpmTasks('grunt-ng-annotate');

配置代码:

grunt.initConfig({
  ngAnnotate: {
    dist: {
      files: [{
        expand: true,
        cwd: '<%= yeoman.dist %>', //相对路径
        src: '**/*Controller.js',  //需要匹配的文件
        dest: '<%= yeoman.dist %>' //文件输出的路径
      }]
    }
  }
})

js代码在函数里加入 “ngInject”:

app.controller('tempController', function($scope, $http, $state, $timeout) {
  "ngInject";
  ...

 })

一切准备完毕,我们在控制台输入命令

grunt ngAnnotate

最后我们的代码就变成了下面这个样子

app.controller('tempController', ["$scope", "$http", "$state", "$timeout", function(a, b, c, d) {


 }])

这个插件还支持另外一种方式,比如我们的js代码写成:

//因为我的项目使用了模块加载器,而我又不想代码嵌套太多层
//所以我就写成下面的样子了
define(function(require) {
  require('app').controller('tempController',controller)
  function controller($scope, $rootScope, $http, $state, $timeout) {
  "ngInject";

  }
})

最后生成:

define(function(require) {
  require('app').controller('tempController',Controller)
  function controller(a, b, c, d) {
  "ngInject";

  }
  controller.$inject = ["$scope", "$http", "$state", "$timeout"];
})

OK,再也不用写两次注解了.