javascript - 将 requireJS 与 Angular 一起使用；无法读取未定义的属性 'module'

Question

好的，有一堆标题相似的问题，但没有一个能帮助我解决我的问题，所以就在这里。

我正在尝试将 Angular 与 RequireJS 结合使用；我收到错误消息 Uncaught TypeError: Cannot read property 'module' of undefined 它指的是 angular-routes.js 文件中的 angular 对象。这向我表明 requireJS 试图在 Angular 加载之前加载 Angular 路由。我的印象是这不会发生，因为我已将“angular-route”设置为依赖于 shim 中的“angular”。谁能发现我在这里做错了什么？

// Setup requireJS

require.config({

    baseUrl : "scripts",

    packages : [
        { "name":"angular", "location":"../bower_components/angular", "main":"angular"},
        { "name":"angular-route", "location":"../bower_components/angular-route", "main":"angular-route"},
        { "name":"angular-animate", "location":"../bower_components/angular-animate", "main":"angular-animate"},
        { "name":"angular-storage", "location":"../bower_components/angular-storage/dist", "main":"angular-storage"},
        { "name":"jquery", "location":"../bower_components/jquery/dist", "main":"jquery"}
],

   shim:{
        'angular' : { exports : 'angular', deps : ['jquery'] },
        'angular-route' : { deps : ['angular'] },
        'angular-animate' : { deps : ['angular'] },
        'angular-storage' : { deps : ['angular'] },
    }

});

// Load app files
function loadApp($, app)
{
    angular.element(document).ready(function(){
        angular.bootstrap(document, ['mealPlannerApp']);    
    });
}
requirejs(['app'], loadApp);

我的app.js文件如下

(function() {

    // Declare AMD module with dependencies
    define(['angular', 'angular-route', 'routes'],

    function(config)
    {

        var app = angular.module('mealPlannerApp', ['ngRoute', 'ngAnimate', 'ngAnimate']);
        app.config(config);
    });

}());

Answer 1

包非常适合您的内部包，我没有尝试加载主要的 AngularJS 文件作为它们。

请阅读http://jonathancreamer.com/require-js-packages-for-building-large-scale-angular-applications/为了获得比将配置部分更改为这样的内容更好的说明和示例。主要变化是用路径

替换 包

还请考虑将变量更改为驼峰式

require.config({
    paths: {
        angular: '../bower_components/angular/angular',
        'angular-route': '../bower_components/angular-route/angular-route',
        'angular-animate': '../bower_components/angular-route/angular-animate',
        'angular-storage': '../bower_components/angular-route/angular-storage'
    },

    shim: {
        'angular' : { exports : 'angular', deps : ['jquery'] },
        'angular-route' : { deps : ['angular'] },
        'angular-animate' : { deps : ['angular'] },
        'angular-storage' : { deps : ['angular'] },
    },

    priority: [
        "angular"
    ]
});