Question

我试图将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>

任何帮助表示感谢。

Answer 1

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

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

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

将angular添加到requirejs时没有模块和Modernizr错误

1 个答案: