Question

我正在尝试重新选择AngularJS。我创建了一个以前版本的AngularJS和RequireJS的网站，从来没有遇到过这个问题，我已经搜索过并且仍然无法让这个工作，所以我伸出手来。我正在尝试使用RequireJS 2.1.15和AngularJS 1.3.11。在尝试加载我的主页时，我得到以下内容：

Uncaught Error: [$injector:modulerr] Failed to instantiate module rehyveApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.11/$injector/nomod?p0=ngRoute
at http://127.0.0.1:64216/js/lib/angular.js:63:12
at http://127.0.0.1:64216/js/lib/angular.js:1764:17
at ensure (http://127.0.0.1:64216/js/lib/angular.js:1688:38)
at module (http://127.0.0.1:64216/js/lib/angular.js:1762:14)
at http://127.0.0.1:64216/js/lib/angular.js:4094:22
at forEach (http://127.0.0.1:64216/js/lib/angular.js:323:20)
at loadModules (http://127.0.0.1:64216/js/lib/angular.js:4078:5)
at http://127.0.0.1:64216/js/lib/angular.js:4095:40
at forEach (http://127.0.0.1:64216/js/lib/angular.js:323:20)
at loadModules (http://127.0.0.1:64216/js/lib/angular.js:4078:5)
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=ngRoute&p1=Error%3…dules%20(http%3A%2F%2F127.0.0.1%3A64216%2Fjs%2Flib%2Fangular.js%3A4078%3A5)
at http://127.0.0.1:64216/js/lib/angular.js:63:12
at http://127.0.0.1:64216/js/lib/angular.js:4117:15
at forEach (http://127.0.0.1:64216/js/lib/angular.js:323:20)
at loadModules (http://127.0.0.1:64216/js/lib/angular.js:4078:5)
at http://127.0.0.1:64216/js/lib/angular.js:4095:40
at forEach (http://127.0.0.1:64216/js/lib/angular.js:323:20)
at loadModules (http://127.0.0.1:64216/js/lib/angular.js:4078:5)
at createInjector (http://127.0.0.1:64216/js/lib/angular.js:4004:11)
at doBootstrap (http://127.0.0.1:64216/js/lib/angular.js:1446:20)
at Object.bootstrap (http://127.0.0.1:64216/js/lib/angular.js:1467:12)
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=rehyveApp&p1=Error…trap%20(http%3A%2F%2F127.0.0.1%3A64216%2Fjs%2Flib%2Fangular.js%3A1467%3A12)

这是我的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<body>
    <div class="container">
        <a href="#/main">Load Main View</a>
    </div>

    <div class="container">
        <ng-view></ng-view>
    </div>

    <script src="js/require.js" data-main="js/main.js"></script>
</body>
</html>

这是我的main.js：

require.config({
paths: {
    base: "/js",
    lib: "/js/lib"
},
shim: {
    'lib/bootstrap': {
        deps: ['lib/jquery']
    },
    'lib/angular': {
        deps: ['lib/jquery']
    },
    'lib/angular-route': {
        deps: ['lib/angular']
    },
    'lib/angular-resource': {
        deps: ['lib/angular']
    },
    'lib/ui-bootstrap': {
        deps: ['lib/angular']
    },
    'base/app': {
        deps: ['lib/angular', 'lib/angular-route']
    },
    'base/controllers/mainController': {
        deps: ['base/app']
    }
  }
});

define(['lib/jquery', 'lib/angular', 'lib/angular-route', 'lib/angular-resource', 'lib/ui-bootstrap', 'base/app', 'base/controllers/mainController'], function () {
angular.element(document).ready(function() {
     angular.module('rehyveApp', ['ngRoute']);
     angular.bootstrap(document, ['rehyveApp']);
   });
});

这是我的app.js：

'use strict';

define(['lib/angular'], function () {
var rehyveApp = angular.module('rehyveApp', ['ngRoute'])
    .config(function ($routeProvider) {

        $routeProvider.when('/main',
            {
                templateUrl: 'templates/main.html',
                controller: 'mainController'
            });

        $routeProvider.otherwise({redirectTo: 'main'});


    });
return rehyveApp;
});

和我的mainController.js：

'use strict';

define(['base/app'], function (rehyveApp) {
var rehyveApp = angular.module('rehyveApp',[]);
rehyveApp.controller('mainController', ['$scope', function ($scope) {

    $scope.testdata = {
        name: 'mainController working'
    }
}]);
});

非常感谢任何帮助。提前谢谢。

Answer 1

事实证明，这是1.3.7版本的angular-route.js lib的一个问题，他们刚刚发布了1.3.12，在复制之后，现在一切正常。谢谢大家对此进行调查。

Answer 2

您在'lib/angular-route' define忘记了app.js。看到您正在使用ngRoute但未导入它。

define(['lib/angular','lib/angular-route'], function () {

我打了一个AngularJS墙

2 个答案: