AngularJS breaks when minified when using a service
Ok, I'm pretty new to AngularJS, so please don't laugh if it's easy. I'm trying to follow Todd Motto's opinion of the AngularJS Styleguide for Teams . I know this is not very similar to what I was trying to minify the code. I am using Grunt to clean up my code. If I roll over, it works. Otherwise, I get the error:
Error: [$injector:unpr] Unknown provider: aProvider <- a
I know this is because the name is getting crippled so it doesn't know what to map it to, but I have no idea how / where to enter the correct name. I tried to track it down. I think that when we try to resolve the route and the DataService is injected, and because there is no injection for our DataService, I think it is crippled.
I tried to reduce the code as little as possible. It also depends on angular and angular-route as well as a file named data.json (which could be anything, it doesn't really matter). Then just run grunt debug
.
Please let me know if I missed anything and thank you for your time.
File structure
├── 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]);
source to share
Your service name DataService
, so the declaration in your config must match the name:
.controller('DocumentCtrl', ['DataService', DocumentCtrl])
From the above example:
angular
.module('app', ['ngRoute'])
.factory('DataService', ['$http', DataService])
.controller('DocumentCtrl', ['DataService', DocumentCtrl])
.config(['$routeProvider', RouteConfig]);
source to share