好吧，我是AngularJS的新手，所以如果这很容易的话，请不要笑。我正在尝试遵循Todd Motto的Opinionated AngularJS团队风格指南。我知道它看起来不太像，因为我试图减少代码。我正在使用Grunt来丑化我的代码。如果我关掉粉碎，它就行了。否则，我会得到错误：
Error: [$injector:unpr] Unknown provider: aProvider <- a
我知道这是因为名称被篡改了，所以它不知道该将其映射到什么，但我不知道如何/在哪里注入正确的名称。我试着找到它了。我认为这是在我们试图解析路由时，并且正在注入DataService，因为没有为我们的DataService注入，我认为它会被破坏。
我已经尽力减少我的代码。这还依赖于角度和角度路由，以及一个名为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>
app.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,
},
}
您的服务名称是DataService，因此您的配置中的声明应该使用相同的名称，如：
.controller('DocumentCtrl', ['DataService', DocumentCtrl])
来自您上面的样品：
angular
.module('app', ['ngRoute'])
.factory('DataService', ['$http', DataService])
.controller('DocumentCtrl', ['DataService', DocumentCtrl])
.config(['$routeProvider', RouteConfig]);
uglify将angularjs服务名称更改为a、b、。所以你必须改变丑陋的选项：
options: {
mangle: false,
},