Use require.js to manage angular dependencies, and found the following problems (directly upload the code):
The following is main.js:------------------------------------------------- -------
require.config({
paths: {
"angular": "../vender/angular-1.5.8/angular",
"jquery": "../vender/jquery-1.11.3",
"angularRoute": "../vender/angular-1.5.8/angular-route.min",
"angularResource": "../vender/angular-1.5.8/angular-resource.min",
"domReady":"../vender/domReady",
},
shim:{
angular:{
exports :"angular"
},
angularRoute:{
deps:["angular"]
},
angularResource:{
deps:["angular"]
},
},
waitSeconds: 0
});
require([
'app',
'bootstrap',
],function(app){
'use scrict';
app.config(['$routeProvider',function($routeProvider){
console.log($routeProvider);
}])
})
The following is app.js:---------------------------------
define(['angular'],
function(angular){
console.log('app');
return angular.module('app',[]);
}
);
The following is bootstrap.js:--------------------------------
define(['angular','domReady'],function(angular,domReady){
domReady(function(){
console.log('boot');
angular.bootstrap(document,['app']);
})
})
There is no error reported above. The following is the normal operation result:
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
When I added the dependent module (angularResource) in app.js as follows:
define(['angular','angularResource'],
function(angular){
console.log('app');
return angular.module('app',['ngResource']);
}
);
At this time, an error will be reported: as follows
You can see that the app does not print out, why? Just introduce a module.
If you introduce a dependent app in bootstrap.js: as follows
define(['angular','domReady','app'],function(angular,domReady){
domReady(function(){
console.log('boot');
angular.bootstrap(document,['app']);
})
})
will not report an error.
But I don’t understand why introducing an angularResource before will cause an error?
Since all sub-pages of the application use angular, there is no need to load angular on demand