用require.js管理angular的依賴,發現以下問題(直接上程式碼):
下面是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); }])
})
下面是app.js:------------------------------
define(['angular'],
function(angular){ console.log('app'); return angular.module('app',[]); }
);
下面是bootstrap.js:---------------------------------
define(['angular','domReady'],function(angular,domReady){
domReady(function(){ console.log('boot'); angular.bootstrap(document,['app']); })
})
以上是沒有報錯的,如下是正常運作結果:
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
當我在app.js裡面加了依賴的模組(angularResource)如下:
define(['angular','angularResource'],
function(angular){ console.log('app'); return angular.module('app',['ngResource']); }
);
這時就會報錯:如下
可以看到app並沒有印出來,這時為何呢?只是引入一個模組而已。
如果在bootstrap.js裡面引入一個依賴app:如下
define(['angular','domReady','app'],function(angular,domReady){
domReady(function(){ console.log('boot'); angular.bootstrap(document,['app']); })
})
就不會報錯了。
可是不明白為何之前引入一個angularResource就會導致報錯呢?
既然應用所有子頁面都用到了angular,所以並不需要按需加載angular