angular.js - angularjs 與requirejs集成
给我你的怀抱
给我你的怀抱 2017-05-15 17:08:54
0
1
539

用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就會導致報錯呢?

给我你的怀抱
给我你的怀抱

全部回覆(1)
滿天的星座

既然應用所有子頁面都用到了angular,所以並不需要按需加載angular

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板