未捕获的错误：[$injector:modulerr] 无法实例化模块，原因是：答案

【问题标题】：Uncaught Error: [$injector:modulerr] Failed to instantiate module due to:未捕获的错误：[$injector:modulerr] 无法实例化模块，原因是：
【发布时间】：2014-08-10 16:35:09
【问题描述】：

首先我必须说，我已经查看了与我的问题相关的所有现有问题，但我没有发现任何与我的问题有关的问题。

Uncaught Error: [$injector:modulerr] Failed to instantiate module Arrows due to:
Error: [$injector:nomod] Module 'Arrows' is not available! You either misspelled the         
module     name or forgot to load it. If registering a module ensure that you specify ...    
<omitted>...2)

我的 index.html：

<html ng-app='Arrows'>
    <head>
        <title>Arrows</title>
        <script data-main="app" src="modules/require.js"></script>
        <link rel="stylesheet" type="text/css" href="styles/style.css">
        <script src="modules/angular-1.2.21/angular.js"></script>
        <script src="modules/angular-1.2.21/angular-route.js"></script>
    </head>
    <body ng-controller='menuController'>       
        <div ng-view>
            {{ message }}
        </div>  
    </body>
</html>

我的 app.js：

define([
    './controller/menu',
    './controller/game'
], function( 
    menu,
    game
) {

    var Arrows = angular.module('Arrows', ['ngRoute']);

    Arrows.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl : 'pages/menu.html',
                controller  : 'menuController'
            })
            .when('/game', {
                templateUrl : 'pages/game.html',
                controller  : 'gameController'
            })
            .otherwise( {
                redirectTo: '/', 
                controller: 'menuController'
            }); 
    });

    Arrows.controller('gameController', function($scope) {
        $scope.message = 'hello! Its working!';
    });

    Arrows.controller('menuController', function($scope) {
        $scope.message = 'hello! Its working!';
    });
});

不知道在那里做什么。我的意思是，我加载了 angular-route.js，关于这个错误的大多数问题的答案是什么。而且我确保在 html-tag 中写入 ng-app='Arrows'。

【问题讨论】：

猜是你的延迟加载可能会导致这个问题...而不是 html 上的ng-app="Arrows"，尝试使用手动引导..angular.bootstrap(document, ['Arrows']);
我已经向我的“导师”询问过这个问题。但他说我可以在 head 中加载它，不需要引导 angularjs。
我这样做了，这是反应：错误：[ng:areq] Argument 'menuController' is not a function, got undefined
“你也应该将 Angular 列为依赖项，对吧？”对不起，但我不知道该怎么做...
我没有在 HTML 中看到指向您自己的脚本的链接。

标签： javascript html angularjs requirejs

【解决方案1】：

当您使用 require.js 时，您必须以一种特殊的方式引导您的 AngularJS 应用程序。阅读这篇文章 - https://www.startersquad.com/blog/angularjs-requirejs/ - 并尝试将其中描述的内容结合到您的具体案例中。

最后你会使用类似的东西

define([
   'require',
   'angular'
], function (require, ng) {
    'use strict';

    require(['domReady!'], function (document) {
       ng.bootstrap(document, ['Arrows']);
   });
});

【讨论】：

在您分享的教程中，他使用 bower 加载依赖项。这根本不是我想走的路……