好的，我是 AngularJS 的新手，如果这很简单，请不要笑。我正在尝试关注 Todd Motto's Opinionated AngularJS Styleguide for Teams .我知道它看起来不太像，因为我试图减少代码。我正在使用 Grunt 来丑化我的代码。如果我关闭处理，它就可以工作。否则，我得到错误:
Error: [$injector:unpr] Unknown provider: aProvider <- a
我知道这是因为名称被破坏了，所以它不知道将其映射到什么，但我不知道如何/在何处注入(inject)正确的名称。我试图追踪它。我认为是在我们尝试解析路由时注入(inject)数据服务，因为我们的数据服务没有注入(inject)，我认为它被破坏了。
我已尝试尽可能减少我的代码。这也依赖于 angular 和 angular-route，以及一个名为 data.json 的文件(可以是任何东西，这并不重要)。然后运行 grunt debug。
如果我遗漏了什么，请告诉我，感谢您抽出宝贵时间。
文件结构
├── data.json
├── gruntfile.js
├── index.html
└── js
├── app
│ └── app.js
└── vendor
├── angular-route.js
└── angular.js
gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
debugMine: {
options: {
wrap: true,
sourceMap: true,
mangle: false,
},
files: { 'js/production.min.js': [
'js/app/app.js',
]}
},
debugVendor: {
files: { 'js/vendor.min.js': [
'js/vendor/angular.js',
'js/vendor/angular-route.js',
]}
}
},
connect: {
server: {
options: {
port: 8000,
}
}
},
watch: {
myscripts: {
files: ['js/app/**'],
tasks: ['uglify:debugMine'],
},
options: {
livereload: true,
spawn: false
},
vendorscripts: {
files: ['js/vendor/**'],
tasks: ['uglify:debugVendor'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('debug',
'Create a debug build of the code',
[
'uglify:debugMine',
'uglify:debugVendor',
'connect:server',
'watch',
]);
};
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Mangled Names Test</title>
</head>
<body>
<h2>I'm above the content</h2>
<hr>
<!-- Begin Content -->
<div ng-view></div>
<!-- End Content -->
<hr>
<h2>I'm below the content</h2>
<!-- Begin Release Scripts -->
<script src='js/vendor.min.js'></script>
<script src='js/production.min.js'></script>
<!-- End Release Scripts -->
</body>
</html>
应用程序.js
console.log('Define functions that make up app');
function DataService($http) {
console.log('Setting up data service');
var DataService = {};
DataService.getData = function() {
console.log('In DataService.getData, getting data');
return $http.get('/data.json');
};
return DataService;
}
function DocumentCtrl(data) {
console.log('In DocumentCtrl, check data');
var self = this;
self.data = data;
}
DocumentCtrl.resolve = {
data: function(DataService) {
console.log('Call DataService.getData()');
return DataService.getData();
},
}
function RouteConfig($routeProvider) {
console.log('Define routes');
$routeProvider
.when('/', {
template: "<h4>I'm in the content and above the data</h4><hr>{{docCtrl.data}}<hr><h4>I'm in the content and below the data</h4>",
controllerAs: 'docCtrl',
controller: 'DocumentCtrl',
resolve: {
data: function(DataService) {
console.log('Call DataService.getData()');
return DataService.getData();
},
}
})
.otherwise({ redirectTo: '/' })
}
console.log('Define module');
angular
.module('app', ['ngRoute'])
.factory('DataService', ['$http', DataService])
.controller('DocumentCtrl', ['data', DocumentCtrl])
.config(['$routeProvider', RouteConfig]);
最佳答案
将 mangle:false 添加到 uglify.debugVendor.options 可能会修复它。如果不是，那么您可能需要将 vendor 和您的文件编译在一起，以便 uglify 可以在同一范围内使用它们。
uglify: {
// ...
debugVendor: {
options: {
mangle: false,
},
}
关于AngularJS 在使用服务时缩小时会中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25840441/