Question

对于非缩小代码，angular可以根据您为指令，控制器，服务等的回调函数提供的参数名称自动计算依赖注入：

angular.module('myApp')
    .directive('myDirective', function(myDependency1, myDependency2, myDependency3) {
        return whatever;
    });

但是，如果我希望我的代码可以缩小，我必须使用冗余的依赖列表来解决它，如下所示：

angular.module('myApp')
    .directive('myDirective', ['myDependency1', 'myDependency2', 'myDependency3', function(myDependency1, myDependency2, myDependency3) {
        return whatever;
    }]);

这不是那么可怕，但它有点烦人，而且是一个永远存在的额外维护步骤。

将代码示例1转换为代码示例2是教会机器做的事情并不难，所以我猜测有人已经构建了一个可以自动执行此操作的工具作为预缩小步骤，以便我实际使用的代码可以保持去除和非冗余。

有没有人知道那里有这样的工具？我没有运气找到一个...我可能会建立一个，但我不想重新发明轮子，如果已经存在。

Answer 1

关于Dave的注释建议，我发现在app的构建阶段还有一个gulp task（或grunt task）用于自动添加依赖关系列表。我确定这对于大多数有角度的人来说都是旧闻，但我想我会把它添加到其他那些偶然发现这个问题的角落里。

我当时并没有使用gulp或grunt，但我现在是一个粉丝（特别是gulp）。我使用了基本的gulpfile.js here，但修改了它以向＆＃34;脚本＆＃34;添加ngAnnotate（）阶段。在丑化/缩小之前的任务：

var gulp = require('gulp');

// Include Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/src/**/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(ngAnnotate())       // AWESOME!
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

现在我的原始资源可以永远保存，没有丑陋的多余注释列表！

是否有angularjs util用于自动构建依赖项列表？

1 个答案: