問題描述

用require.js管理angular的依賴，發(fā)現(xiàn)如下問題（直接上代碼）：

下面是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’]);})

})

以上是沒有報(bào)錯(cuò)的，如下是正常運(yùn)行結(jié)果：

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

當(dāng)我在app.js里面加了依賴的模塊（angularResource）如下：

define([’angular’,’angularResource’],

function(angular){ console.log(’app’); return angular.module(’app’,[’ngResource’]);}

);

這時(shí)就會(huì)報(bào)錯(cuò)：如下

可以看到app并沒有打印出來(lái)，這時(shí)為何呢？只是引入一個(gè)模塊而已。如果在bootstrap.js里面引入一個(gè)依賴app：如下define([’angular’,’domReady’,’app’],function(angular,domReady){

domReady(function(){ console.log(’boot’); angular.bootstrap(document,[’app’]);})

})就不會(huì)報(bào)錯(cuò)了?？墒遣幻靼诪楹沃耙胍粋€(gè)angularResource就會(huì)導(dǎo)致報(bào)錯(cuò)呢？

問題解答

既然應(yīng)用所有子頁(yè)面都用到了angular，所以并不需要按需加載angular