向requirejs添加角度时没有模块和Modernizr错误答案

【问题标题】：No module and Modernizr error when adding angular to requirejs向requirejs添加角度时没有模块和Modernizr错误
【发布时间】：2014-04-11 10:08:55
【问题描述】：

我正在尝试将 AngularJS 添加到我已经使用 RequireJS 的 Web 应用程序中。加载我的测试页面时，我看到：

1) Error: No module: MyApp
      ...),factory:a("$provide","factory"),service:a("$provide","service"),value:a("$prov...

2) TypeError: Modernizr is undefined
if (!Modernizr.history) {

我正在使用 AngularJS v1.1.5

这是我的树：

resources
   - CSS
   - js
        - controllers
             - MainController.js
        - libs
             - angular.js
             - jquery.js
             - require.js
             - mondernizr.js
             ......
             ......
             ......
        main.js
        mainApp.js
pages
        test.html

main.js

(function(require) {
'use strict';

require.config({
    baseUrl: '/resources/js',
    paths: {
        'zepto'     : 'libs/zepto',
        'jquery'    : 'libs/jquery',
        'angular'   : 'libs/angular',
        'router'    : 'libs/page',
        'history'   : 'libs/history.iegte8',
        'event'     : 'libs/eventemitter2'
    },
    shim: {
        'zepto'     : { exports: '$' },
        'angular'   : { exports : 'angular' },
        'router'    : { exports: 'page'},
        'modernizr' : { exports: 'Modernizr' }
    }
});

require([ 'jquery', 'angular', 'routes', 'modernizr', 'event' ], function($, angular, routes, Modernizr, Event) {
    function bootstrap() {
        var app = new Event(),
            router = routes(app);

        if (typeof console !== 'undefined') console.info('>> module routes loaded ... executing router');
        router({ click: false, popstate: false });
        if (typeof console !== 'undefined') console.info('>> executed router');
    }

    $(function() {
        if (!Modernizr.history) {
            require([ 'history' ], bootstrap);
            require([ 'controllers/MainController' ], bootstrap);
        } else {
            require([ 'controllers/MainController' ], bootstrap);
            bootstrap();
        }
    });
});


})(this.require);

mainApp.js

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

MainController.js

require(['mainApp'], function(mainApp) {
mainApp.controller('MainController', function($scope) {
    $scope.data = {message: "Hello"};
})
});

test.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script src="/assets/js/vendor/require.js" data-main="/assets/js/main"></script>
</head>
<body>
       <div ng-controller="MainController">
    {{ data.message + " world" }}
       </div>   

</body>
</html>

任何帮助表示赞赏。

【问题讨论】：

标签： angularjs twitter-bootstrap requirejs angular-ui-bootstrap modernizr

【解决方案1】：

No module: MyApp 问题是由 Angular 自动初始化引起的：<html ng-app="MyApp">。 Angular 在 mainApp.js 之前加载，看到ng-app 并尝试找到（尚未）存在的模块。

解决方案是从 main.js 和文档加载事件中手动引导 Angular，如 here 所述。

我不确定 Modernizr 的问题；我猜你根本不加载它。 RequireJs 没有因为shim 而抱怨。你怎么加载它？它不包含在您的 paths 配置中。您可能希望在所有其他脚本之前将 Modernizr 作为独立脚本加载（根据建议），在这种情况下，不需要 paths 配置，shim 就足够了。

【讨论】：