11

我正在尝试将 require.js 与 Main.js 一起使用并出现以下错误：

未捕获的错误：[$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=MyApp&p1=Error%3…3A8080%2FResults%2Fresources%2Fjs%2Fvendor%2Fangular.min。 js%3A31%3A252)

我的 Main.js

 require.config({

    // alias libraries paths
    paths: {
        'angular': 'vendor/angular.min',
        'jquery': 'vendor/jquery-1.8.0-min',
        'angularroute': 'vendor/angular-route'          
    },

    // angular does not support AMD out of the box, put it in a shim
    shim: {
        'angular': {
            deps: ['jquery'],
            exports: 'angular'
        },
        'angularroute':{
            deps:['angular']
        }

    }
});
require([
         'angular',
         'angularroute',
         'app'
         ],
        function(angular, angularroute, app){
    'use strict';       
})

我的 app.js

define(['angular'], function(angular){
    return angular.module('MyApp',['ngRoute']);
});

我收到一个错误，说我需要将 angularroute 添加到我的应用程序中，但我仍然收到此错误。谁能指出我可能做错了什么？

4

4 回答 4

6

我在这里找到了解决方案：https ://github.com/tnajdek/angular-requirejs-seed/blob/master/app/js/main.js

来自文档： http ://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap

window.name = "NG_DEFER_BOOTSTRAP!";
require(['angular', 'angularroute', 'app'], function(angular, angularroute, app){
    'use strict';

    //after you are done defining / augmenting 'MyApp' run this:

    angular.element().ready(function() {
        angular.resumeBootstrap([app['name']]);
    });
})
于 2013-11-22T20:15:46.187 回答
5

这是我的要求配置，位于require_config.js：

var require = {
    baseUrl: '/js',
    paths: {
        'angular': 'lib/angular.min',
        'angular.route': 'lib/angular-route.min',
        'angular.resource': 'lib/angular-resource.min',
        'angular.animate': 'lib/angular-animate.min',
        'angular.ui.bootstrap': 'lib/ui-bootstrap-tpls-0.6.0.min',
        'angular.upload': 'lib/ng-upload.min',
        'jquery': 'lib/jquery-1.10.2.min'
    },
    shim: {
        'angular': ['jquery'],
        'angular.route': ['angular'],
        'angular.resource': ['angular'],
        'angular.animate': ['angular'],
        'angular.ui.bootstrap': ['angular'],
        'angular.upload': ['angular'],
        'my.angular': ['angular', 'angular.route', 'angular.resource', 'angular.animate', 'angular.ui.bootstrap', 'angular.upload']
    }
};

我script在 HTML 的标签<head>：

<script src="/js/require-config.js"></script>
<script src="/js/lib/require.js"></script>

来自服务器端的页面可能会使用 Angular 或 jQuery，两者都使用，或者都不使用……所以，HTML 标记可能包含一个简单的标签来最终激活整个 Angular 结构，如下所示：

<script>require(['myApp']);</script>

现在，在myApp.js，我只依赖my.angular，它负责加载其他所有内容......事实上，我有其他风格的“my.angular”，具有不同的子集，我在网站的不同上下文中使用它们：

define(['my.angular'], function() {
    var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngAnimate', 'ngUpload', 'ui.bootstrap']);
   // more app module stuff here, including bootstrap
    return myApp;
});
于 2013-10-11T05:50:08.617 回答
3

angular被定义为全局变量，您的声明将覆盖它。该文件angular.js不返回任何内容，因此在 RequireJS 级别没有可注入的内容。尝试以下操作：

define(['angular'], function(){
    return angular.module('MyApp',['ngRoute']);
});

我在 RequireJS 和 AngularJS 上苦苦挣扎，所以我创建了 angularAMD 来帮助我：
http ://marcoslin.github.io/angularAMD/

于 2013-10-11T06:11:03.197 回答
0

您的设置看起来不错，除了您需要在app.js文件的部分中添加angularroute依赖项。您提到了这一点，但没有在您的示例代码中反映这一点。define

define(['angular', 'angularroute'], function(angular){
    return angular.module('MyApp',['ngRoute']);
});
于 2013-10-11T02:44:25.643 回答