Gulp 丑化导致 AngularJS 无法解决提供商问题
Gulp uglify causing AngularJS to not solve provider
虽然我很熟悉使用 Angular 时的 uglify 问题,但我现在使用特定指令再次开始 运行 解决这个问题,即使我正在使用类似数组的样式进行依赖声明:
angular.module('app.directives').directive('domainImg', ['Endpoint', function (Endpoint) {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs) {
$attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
}
};
}]);
我的主文件单独声明模块。
angular.module('app.providers', []).constant('Endpoint', 'http://www.multzfidelidade.com.br/sistema/');
angular.module('app.tools', []);
angular.module('app.services', []);
angular.module('app.resources', []);
angular.module('app.controllers', []);
angular.module('app.directives', []);
angular.module('App', ['ui.mask', 'templates', 'app.providers', 'app.tools', 'app.services', 'app.resources', 'app.controllers', 'app.directives'])
现在,当我使用这个指令时,我遇到了 unknown eProvider <- e 问题
Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=rProvider%20%3C-%20r
我是这样使用的:
<img class="prize-directive-image" ng-src="{{prize.image}}" domain-img/>
如果我删除 domain-img 标签,问题就会消失。另外,如果我不丑化代码,问题也会消失。
gulp.task('default', function () {
// Concat all JS files into a single one called app.min.js
gulp.src(['public_html/js/*.js', 'public_html/js/**/*.js', 'public_html/*.js', 'public_html/modules/**/*.js', '!public_html/app.min.js'])
.pipe(concat('app.min.js'))
// .pipe(uglify()) // Without this line the problem doesn't happen
.pipe(gulp.dest('dist/'));
// Concat all HTML directives into a single one
gulp.src('public_html/js/**/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(templateCache('templates.min.js', {standalone: true}))
.pipe(gulp.dest('dist/'));
})
我希望我能深入了解我在这个特定指令中可能出错的地方。
提前致谢。
您错过了像指令控制器一样遵循 DI 的内联数组注释。
代码
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
$attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
}]`
您需要像这样更改指令 controller
的语法:
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
$attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
}]
查看 了解更多详情。
或者你也可以保持原样,用GulpJS为你做注解。在我的项目中 SkeletonSPA 我做的完全一样。
我使用 GulpJS 插件 gulp-ng-annotate 为我做这件事。您的 Gulp 任务将如下所示:
// require gulp-ng-annotate plugin
let ngannotate = require('gulp-ng-annotate');
// Concat all JS files into a single one called app.min.js
gulp.src(['public_html/js/*.js', 'public_html/js/**/*.js', 'public_html/*.js', 'public_html/modules/**/*.js', '!public_html/app.min.js'])
.pipe(ngannotate({gulpWarnings: false})) // annotate angular DI
.pipe(concat('app.min.js'))
.pipe(uglify()) // do the minification
.pipe(gulp.dest('dist/'));
这样您就不必自己动手了,您的 Gulp 任务会为您代劳 ;-)
虽然我很熟悉使用 Angular 时的 uglify 问题,但我现在使用特定指令再次开始 运行 解决这个问题,即使我正在使用类似数组的样式进行依赖声明:
angular.module('app.directives').directive('domainImg', ['Endpoint', function (Endpoint) {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs) {
$attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
}
};
}]);
我的主文件单独声明模块。
angular.module('app.providers', []).constant('Endpoint', 'http://www.multzfidelidade.com.br/sistema/');
angular.module('app.tools', []);
angular.module('app.services', []);
angular.module('app.resources', []);
angular.module('app.controllers', []);
angular.module('app.directives', []);
angular.module('App', ['ui.mask', 'templates', 'app.providers', 'app.tools', 'app.services', 'app.resources', 'app.controllers', 'app.directives'])
现在,当我使用这个指令时,我遇到了 unknown eProvider <- e 问题
Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=rProvider%20%3C-%20r
我是这样使用的:
<img class="prize-directive-image" ng-src="{{prize.image}}" domain-img/>
如果我删除 domain-img 标签,问题就会消失。另外,如果我不丑化代码,问题也会消失。
gulp.task('default', function () {
// Concat all JS files into a single one called app.min.js
gulp.src(['public_html/js/*.js', 'public_html/js/**/*.js', 'public_html/*.js', 'public_html/modules/**/*.js', '!public_html/app.min.js'])
.pipe(concat('app.min.js'))
// .pipe(uglify()) // Without this line the problem doesn't happen
.pipe(gulp.dest('dist/'));
// Concat all HTML directives into a single one
gulp.src('public_html/js/**/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(templateCache('templates.min.js', {standalone: true}))
.pipe(gulp.dest('dist/'));
})
我希望我能深入了解我在这个特定指令中可能出错的地方。
提前致谢。
您错过了像指令控制器一样遵循 DI 的内联数组注释。
代码
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
$attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
}]`
您需要像这样更改指令 controller
的语法:
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
$attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
}]
查看
或者你也可以保持原样,用GulpJS为你做注解。在我的项目中 SkeletonSPA 我做的完全一样。
我使用 GulpJS 插件 gulp-ng-annotate 为我做这件事。您的 Gulp 任务将如下所示:
// require gulp-ng-annotate plugin
let ngannotate = require('gulp-ng-annotate');
// Concat all JS files into a single one called app.min.js
gulp.src(['public_html/js/*.js', 'public_html/js/**/*.js', 'public_html/*.js', 'public_html/modules/**/*.js', '!public_html/app.min.js'])
.pipe(ngannotate({gulpWarnings: false})) // annotate angular DI
.pipe(concat('app.min.js'))
.pipe(uglify()) // do the minification
.pipe(gulp.dest('dist/'));
这样您就不必自己动手了,您的 Gulp 任务会为您代劳 ;-)