Angularjs and Requirejs: Error: [$injector:modulerr]

Question

我开始使用angularjs创建单页应用程序，并希望添加动态模板(视图和控制器)。我在网上读到我应该使用requirejs来做这件事，所以我照做了。我遵循了本教程@https://github.com/marcoslin/angularAMD并试着按照步骤走。

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

错误：[$injector:modulerr]http://errors.angularjs.org/1.2.25/$injector/modulerr？p0=WebApp&p1=%5B%24injector%3Nomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24inject%2Nomod%3Fp0%3WebApp%0AD%2F%3C%40http%3%%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0AZc%2Fb.module%3C%2F%3F%3C%2Fb%5Be%5D%3C%40wtp%3F%2Flocalhost%2Fpollit%2Fab%2Flibs%2Fangular.min.js%3A20%3A1%0AZc%2Fb.module%3C%2F%3C%40http%3A%2F%2F%2localhost%2Pollit%2App%2Libs%2Angular.min.js%3A20%3A1%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fpp%2Flibs%2Angular.min.js%3A33%3A267%0Ar%40http%3%3A%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Angular.min.js%3A7%3A288%0Ae%40http%A%2F%2Falocalhost%2Fpollit%2Fapp%2Flibs%2Angular.min.js%3A333%3A207%0Agc%40http+3A%2Flocalhost%2Flocalhost%2 Pollit%2Fepp%2Flib%2Angular.man.js%3A36%3A09%0Afc%2Fc%40http%3A%2F%2localhost%2Pollit%2App%2Libs%2Angular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Angular.min.js%3A18%3A387%0AXc%40http%3A%2Falocalhost%2Fpallit%2Fpp%2Flibs%2Angular.min.js%3A17%3A415%0A%40http%3A%2F%2Falocalhost%2Fpollit%2Fepp%2Flibs%2Angular.min.js%3A145%3A67%0A

和这个

错误：[$injector:modulerr]http://errors.angularjs.org/1.2.25/$injector/modulerr？p0=WebApp&p1=%5B%24注入器%3Modulerr%5D%20http%3A%2F%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24注入器%2Modulerr%3Fp0%3Dwebapp%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org/252F1.2.25%252F%2524inector%252Fnomod%253Fp0%253Dwebapp%250AD%225F%253C%254http%253F%252F%252Flocalhost%252Fpollit%252 Fapp%252Flibs%252Fangul.min.js%253A6%253A450%250AZc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flicalhost%252Fpollit%252Fapp%252Flibs%252Fangul.min.js%253A20%253A1%250AZc%252Fb.module%253C%252F%253C+2540http%253A%252F%252Flocalhost%252Fpollit%252Fpp%252Flibs%225Fangur.min.js%2253A20%253Al%250Ae%253F%2540http%253A%252F%252 Flocalhost%225Fpollit it%252Fapp%252Flibs%252Fangul.min.js%253A33%253A267%250Ar%250http%253A%252F%252Flocalhost%252轮询%252Fapp%252Flibs%252Fangul.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flebs%252fangul.min.js%253A33%253A207%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%225Fapp%225Flibs%252Fangual.min.js%253A33%253A284%250Ar%2540http://253A%252F%252Floalhost%252 Fpollit%252Fapp%252Flibs%252Fangul.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangul.min.js%253A33%253A207%250Agc%2540http%253A%252F%252Flocalhost%252Fpollit%2252Fapp%2252Flibs=252Fangur.min.js%2253A36%253A309%250Afc%252Fc%22540http%2253A%252F.252Flocalhist%252Follit%252Fapp/252Flibs%252Fangol.min.js%253A18%253A170%250Afc%250http%252A%252F calhost%252Fpollit%252Fapp%252Flibs%252Fangul.min.js%253A18%253A387%250Ac.prototype.bootstrap%252F%253C%254http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252FangularAMD.min.js%253A7%253A3485%250Aa%2540http%253A+252F%252Flocalhost%252Fpollit%225Fapp%225Flibs%252Fanular.min.js%253A145%253A67%250A%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit+2Fpp%2Flibs%2Fangular.min.js%3A6%A450%0Ae%2F%3C%40http%3A%2F%2localhost%2Pollit%2App%2Libs%2Angular.min.js%3A34%3A97%0Ar%40http%3A%2F%2Flocalhost%2Pollit%2Fpp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3AF%2Flocalhost%2 Pollit%2Fapp%2Flibs%2Fangular.min..js%3A333%3A207%0Ae%2F%3C%40http+3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A284%0Ar%40http%3A%2F%2Falocalhost%2Pollit%2Fpp%2Flibs%2Feangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2localhost%2Pollit%2App%2Libs%2Angular.min.js%3A3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0fc%2Fc%40http%3A+2F%2Fhost%2Fpollid%2Fpp%2Flibs%2Fangular.min.js%3A18%3A170%0fc%40http+3A%2F%2Flocalhost%2Fpollit%2Fpp+2Flibs+2Fangular.min.js%3A18%3A387%0Ac.原型.引导程序%2F%3C%40wttp%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flib%2FanglerAMD.min.js%3A7%3A3485%0Aa%40http%3A%2F%2localhost%2Pollit%2App%2Libs%2Fangul.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']
});

现在我的模板文件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>

正如您所看到的，我在app/src/home/index中有这两个文件。(html/js)和其他文件位于app/而/是index.html(主页)的路径

我真的希望能对我的项目有所帮助，并提前表示感谢

编辑编辑

我们开始：/index.html

<!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/main.js

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']
});

/app/app.js

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
...

Answer 1

您在使用routeprovider时没有添加它。

Angular是由丢失的模块组成的，所以你应该像一样将其包含在模块中

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

并将其链接到您的html 中

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

Google CDN例如//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

还可以更改你的angular版本，这样你就不用min.min.js了。min.js用于生产，会给你带来糟糕的错误，就像你在那里看到的那样。