Question

我试图将AngularJS添加到已经使用RequireJS的Web应用程序中。我已经关注了几个YouTube和网络教程，但出于某种原因，在加载我的测试页时，我看到了：

1) Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=MyApp&p1=%5B%.....

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

3) For some reason jQuery has stopped working too.

这是我的树：

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

main.js

(function(require) {
'use strict';

require.config({
    baseUrl: '/resources/js',
    paths: {
        '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'}
    }
});



require([
    'controllers/MainController'
]);

})(this.require);

app.js

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

MainController.js

require(['app'], function(app) {
    app.controller('MainController', function() {
        this.message = "Hello World";
    })
});

的test.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <title>AngularJS Test</title>
</head>
    <body>        
        <div ng-controller="MainController as main">
            {{ main.message }}
        </div>    

        <script src="/resources/js/libs/require.js" data-main="/resources/js/main"></script>

    </body>
</html>

使用AngularJS v1.2.16

任何帮助表示感谢。

更新 ************************************ ******

已将<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.js"></script>添加到我的test.html页面，Error: [$injector...错误消失了。

现在只显示错误：

TypeError: Modernizr is undefined

if (!Modernizr.history) {

此处提供以下建议：http://activeintelligence.org/blog/archive/error-injectornomod-module-ngroute-is-not-available/

Answer 1

我去了Modernizr的网站并检查了代码。我看到它没有调用define将自己定义为模块，因此Modernizr不符合AMD标准，你需要一个垫片来告诉RequireJS模块值应该是什么：

shim: {
    ...
    modernizr: { exports: 'Modernizr' }
}

将Angular添加到Requirejs应用程序显示错误：[$ injector：modulerr]

1 个答案: