Angular中声明注入依赖的方法有三种
- 数组注解
- $inject属性
- 隐式注释
隐式注释虽然简单，但是在压缩代码的时候会出错，所以一般还是需要选用方法一或者方法二。
样例如下：
module.controller('controller', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);
var controller = function($scope, greeter) {
// ...
}
controller .$inject = ['$scope', 'greeter'];
module.controller('controller ', controller );
ng-annotate是专门处理这种情况的插件，因为对于注入的处理毕竟是为了程序运行，而不是开发逻辑需要，这种自动化交给插件比较快。
安装插件以后只需要加一个@ngInject就行了。
/* @ngInject */
function Avengers(storageService, avengerService) {
var vm = this;
vm.heroSearch = '';
vm.storeHero = storeHero;
function storeHero() {
var hero = avengerService.find(vm.heroSearch);
storageService.save(hero.name, hero);
}
}
ng-annotate会采用方案二生成需要的东西。
Gulp配置样例如下：
gulp.task('js', ['jshint'], function() {
var source = pkg.paths.js;
return gulp.src(source)
.pipe(sourcemaps.init())
.pipe(concat('all.min.js', {newLine: ';'}))
.pipe(ngAnnotate({
add: true
}))
.pipe(bytediff.start())
.pipe(uglify({mangle: true}))
.pipe(bytediff.stop())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(pkg.paths.dev));
});
参考文档：
https://docs.angularjs.org/guide/di
http://bguiz.github.io/js-standards/angularjs/minification-and-annotation/
