angularjs 与requirejs集成

发布于 2022-09-04 03:35:00 字数 2177 浏览 14 评论 0

用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']);
})

})

以上是没有报错的,如下是正常运行结果:

clipboard.png

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

当我在app.js里面加了依赖的模块(angularResource)如下:

define(['angular','angularResource'],

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

);

这时就会报错:如下

clipboard.png

可以看到app并没有打印出来,这时为何呢?只是引入一个模块而已。
如果在bootstrap.js里面引入一个依赖app:如下
define(['angular','domReady','app'],function(angular,domReady){

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

})
就不会报错了。
可是不明白为何之前引入一个angularResource就会导致报错呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

简单气质女生网名 2022-09-11 03:35:00

既然应用所有子页面都用到了angular,所以并不需要按需加载angular

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文