在前端开发中，使用 AngularJS 时通常需要进行依赖注入控制器和服务，而这种机制需要保持 AngularJS 中的注释。这时如果我们用 Gulp 进行构建的话，就需要用到 broccoli-ng-annotate 这个包来帮助我们自动添加注释。
1. 安装 broccoli-ng-annotate
首先，我们需要使用 npm 包管理器来安装 broccoli-ng-annotate：
npm install --save-dev broccoli-ng-annotate
2. 配置使用
2.1 在 Brocfile.js 中添加配置
在 Brocfile.js 文件中添加以下代码，用来配置 broccoli-ng-annotate：
var ngannotate = require('broccoli-ng-annotate');
var appTree = 'app';
appTree = ngannotate(appTree, {
map: true
});
module.exports = appTree;在上面的代码中，我们先引入了 broccoli-ng-annotate 包，并使用了它的函数。其中，第一个参数 appTree 是使用 broccoli 构建的输出目录，而第二个参数传递了一个对象，包含了选项参数。
2.2 配置项参数说明
- map: 默认值为 true，生成与原始文件对应的 .map 映射文件。
- add: 当值为 true 时，给没有注释的函数自动添加注释。
- sourceMap: 同样是生成 .map 映射文件，但是有些不同，这个选项可以指定映射文件的输出目录。如果想把 .js 和 .map 文件分别放到不同的目录下，则此选项非常有用。
- prefix: 在生成注释时，添加的前缀。这个需要和代码风格一致。
3. 使用示例
假设我们有一个 anguar.js 的控制器，代码如下：
angular.module('app').controller('TestController', function($scope) {
$scope.title = 'Hello World';
});可以看到，在上面的代码中并没有注释。现在，我们通过使用 broccoli-ng-annotate 来自动添加注释。只需运行构建命令 broccoli build，然后再打开目标文件，就会看到如下代码：
angular.module('app').controller('TestController', [ '$scope', function($scope) {
$scope.title = 'Hello World';
} ]);可以看出，注释已经自动添加进来了。这样，我们就避免了手动书写注释带来的麻烦，同时也保证了 AngularJS 依赖注入的正确性。
4. 总结
在构建 AngularJS 应用时，如果需要依赖注入控制器和服务，那么需要在代码中添加注释。而 broccoli-ng-annotate 这个 npm 包则可以自动添加注释，避免手动书写注释带来的麻烦，同时也保证了 AngularJS 依赖注入的正确性。在使用过程中，我们可以根据需要配置添加注释的前缀和输出目录，以满足项目的要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde505f