Javascript Angularjs和Requirejs:错误：[$injector:modulerr]

我开始使用angularjs创建一个单页应用程序，并希望添加动态模板（视图和控制器）。我在网上读到我应该使用requirejs来做这件事，所以我就这么做了。 我遵循了本教程@并尝试遵循这些步骤

当我想打开页面时，我的控制台上出现以下两个错误：

错误：[$injector:moduler] $injector/modulerr？p0=WebApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3DWebApp%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0AZc%2Fb.module%3C%2F%2F%3C%3C%3C%3C%2Fb%2Fb%5Be%5f5d%3C%40http%2f3a%2F%2Flocalhost%2fj%2fj%2F%2fj%2fj%2F%2fj%2Fe%3C%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0Ae%2F%3C%40http%3A%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A267%0Ar%40http%2Flocalhost%2Fapp%2Flibs%2Fangular.min.js%3A7%3A7%2Flocalhost%2Fpollit%2Fapp%2Fangular%2fAgc.min.minalhost%2Fpollit%2Fapp%2Flibs%2fagnal.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2follit%2Fapp%2Flibs%2fagnal.min.js%3A18%3A170%0Afc%40http%3A%2F本地主机%2Fapp%2Flibs%2fagnal.min.js%3A18%3A18%3A387%2faxc%40http%2fa%2F%2fappollit%2fa%2fagnal%2fagnal%2fa%2fagnal%2fagnal.min.js%2fa%2fa%2fa%2fagnal%2fa%2fa%2fagnal%2fa%2fa%2fa%2fa%2fas%2FANGRAL.min.js%3A214%3A469%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2FANGRANGRAL.min.js%3A145%3A67%0A

这个呢

错误：[$injector:moduler] $injector/modulerr？p0=WebApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2errors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3dwapp%26p1%3D%255B%2524injector%255D%2520http%253A%252F%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%2530%2530%253dwpp%250AD%253f%253C%255c%253f%flolit%252Fapp%252Flibs%252Fangular.min.js%253A6%253A450%250AZc%252Fb.module%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250AZc%252Fb.module%2530http%253A%252F%252F%252Flocalhost%252fp%252follit%252Fapp%253A1%253A%253A1%253A1%253A1%253A1%253A1%252p%253A%252F%252F%252fOllit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A267%250Ar%2540http%253A%252F%252fOllit%252fOllit%252fOllit%252fOllit%252fOllit.min.js%253A7%253A288%250Ae%2540http%253A%252fOllit%252Fapp%252fOllit.min.js%253A33%253A207%250Ae%2530http%252F%252Fapp%252Fapp%252Fangular.min.js%253A33%253A284%250Ar%2540http%253A%252F%252FLOCHOST%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252FLOCOLLIT%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Agc%2540http%253A%252FLOCHOST%252Fpollit%252AFOLLIT%252AFOLLIT.252%252%252%252%2536%A3ULIB%252%2536%2536%2536%A3MINA309%250Afc%252Fc%2540http%253A%252F%252FLICALHOST%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A170%250Afc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fpollit%252Flibs%252FANGULAL.min.js%253A387%250Ac.prototype.bootstrap%252F%253C%2540http%253A%252F%252FLICALHOST%252Fpollit%252Flibs%252FAULAID.min%253A3485%250Aa%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252FANGULAL.min.js%253A145%253A67%250A%0AD%2F%3C%40http%3A%2Fpollit%2FAAPP%2FLIBLIBS%2FANGORAL.min.js%3A6%40http%3A%2F%2FALOCALHOST%2FPOLLIB%2FANGORL.min.js%3A334%2FARPLIB%2FAG.min%3AFR%40http%2FPOLLIB%2FA%2FA%2FF%2FIT%2FF%2FIT%2FIT%2FIT%2FIT%2FIT%2FIT%2FIT%2FFORALLANGORA%2FIT%2FA88%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Ae%2F%3C%40http%3A%2Flocalhost%2Fpollit%2Flibs%2Fangular.min.js%3A33%3A284%0Ar%40http%2Flocalhost%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%2Flocalhost%2Fpollit%2f3A%2Flocalhost%2Flibs%2Fangular%2Fangular.min.js%2Fangular%2fAp%2Flocalhost%2Fangular%2fAp%2F主机%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2Flocalhost%2Fpollit%2Flibs%2Fangular.min.js%3A18%3A18%3A387%3A387%0Ac.prototype.bootstrap%2Flocalhost%2Fpollit%2Fapp%2Flibs%2fLab%2Fangular%2fAp%2fAlarm.minalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A

我认为它们都是相似的错误。我猜错误来自app.js文件，这是我的代码：

define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", ['webapp']);

app.config(function ($routeProvider) {
    $routeProvider.when("/",
        angularAMD.route({
            templateUrl: 'app/src/home/index.html',
            controller: 'index',
            controllerUrl: 'app/src/home/'
        })
    );
});

return angularAMD.bootstrap(app);
});

和main.js

require.config({
baseUrl: "app",

paths: {
    'jquery' : 'libs/jquery.min',
    'general' : 'libs/general',
    'angular' : 'libs/angular.min',
    'angularAMD' : 'libs/angularAMD.min',
    'ngload' : 'libs/ngload.min'
},

shim: {
    'angularAMD' : ['angular'],
    'ngload' : ['angularAMD']
},

deps: ['app']
});

require.config({
baseUrl: "app/",

paths: {
    'jquery' : 'libs/jquery.min',
    'general' : 'libs/general',
    'angular' : 'libs/angular',
    'angularAMD' : 'libs/angularAMD',
    'ngload' : 'libs/ngload',
    'ngRoute' : 'libs/ngRoute'
},

shim: {
    'angularAMD' : ['angular', 'ngRoute'],
    'ngRoute' : ['angular'],
    'ngload' : ['angularAMD']
},

deps: ['app']
});

define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", []);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when("/",
        angularAMD.route({
            templateUrl: 'src/home/index.html',
            controller: 'index',
            controllerUrl: 'src/home/index'
        })
    );
    $locationProvider.html5Mode(true);
});

return angularAMD.bootstrap(app);
});

现在是我的模板文件 index.js:

define(['app'], function (app) {
app.factory('MainController', function (...) {

});
});

index.html

<div class="appheader">
<div class="container" style="text-align:right">
    <a><span class="glyphicon glyphicon-refresh"></span></a>
    <a><span class="glyphicon glyphicon-align-justify"></span></a>
</div>

<!DOCTYPE html>
<html ng-app="WebApp">
<head>
    <title>Index Index Index :)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> -->
    <meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="app/css/bootstrap.min.css" />
    <link rel="stylesheet" href="app/css/yadbocss.css" />
    <script data-main="app/main" src="app/libs/require.min.js"></script>
</head>
<body ng-controller="mainController">
    <div class="row">
        <div class="col-md-12">
            <div id="main">
                <div ng-view>
                </div>
            </div>
        </div>
    </div>
</body>

/app/app.js

require.config({
baseUrl: "app",

paths: {
    'jquery' : 'libs/jquery.min',
    'general' : 'libs/general',
    'angular' : 'libs/angular.min',
    'angularAMD' : 'libs/angularAMD.min',
    'ngload' : 'libs/ngload.min'
},

shim: {
    'angularAMD' : ['angular'],
    'ngload' : ['angularAMD']
},

deps: ['app']
});

require.config({
baseUrl: "app/",

paths: {
    'jquery' : 'libs/jquery.min',
    'general' : 'libs/general',
    'angular' : 'libs/angular',
    'angularAMD' : 'libs/angularAMD',
    'ngload' : 'libs/ngload',
    'ngRoute' : 'libs/ngRoute'
},

shim: {
    'angularAMD' : ['angular', 'ngRoute'],
    'ngRoute' : ['angular'],
    'ngload' : ['angularAMD']
},

deps: ['app']
});

define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", []);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when("/",
        angularAMD.route({
            templateUrl: 'src/home/index.html',
            controller: 'index',
            controllerUrl: 'src/home/index'
        })
    );
    $locationProvider.html5Mode(true);
});

return angularAMD.bootstrap(app);
});

错误报告

1

Error: [$injector:modulerr] Failed to instantiate module WebApp due     to:
[$injector:nomod] Module 'WebApp' 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.
...

2

Error: [$injector:modulerr] Failed to instantiate module WebApp due to:
[$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr?p0=%24routeProvider
minErr/<@http://localhost/pollit/app/libs/angular.js:68:12
...

错误：[$injector:modulerr]未能实例化模块WebApp，原因是：
[$injector:unpr]未知提供程序：$routeProvider
http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr？p0=%24routeProvider
Miner/您正在使用routeprovider，但没有添加它

Angular由模块的丢失组成，因此您应该将其包括在模块中，如

angular.module('app', ['ngRoute']);

并将其链接到html中

<script src="angular-route.js">



谷歌CDN
e、 g.//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

还要更改angular的版本，这样您就不会使用min。min.js用于生产，会给您带来一些糟糕的错误，就像您在那里遇到的错误一样。
您好，现在我通过main.js添加了angular route并替换了.min文件。但现在它显示
错误：[$injector:modulerr]未能实例化模块WebApp，原因是：[$injector:nomod]模块“WebApp”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数…
在索引中是否有
？是的，我有这个参数。下面的某个地方我有
I