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

Question

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

当我想打开网页，我得到我的控制台上的两个误区：

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/ $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%3C%2Fb%5Be%5D%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0AZc%2Fb.module%3C%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A267%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A

而这一次

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/ $injector/modulerr?p0=WebApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3Dwebapp%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%253Fp0%253Dwebapp%250AD%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A6%253A450%250AZc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250AZc%252Fb.module%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A267%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A284%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Agc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A36%253A309%250Afc%252Fc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A170%250Afc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A387%250Ac.prototype.bootstrap%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252FangularAMD.min.js%253A7%253A3485%250Aa%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A145%253A67%250A%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A34%3A97%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A284%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0Ac.prototype.bootstrap%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2FangularAMD.min.js%3A7%3A3485%0Aa%40http%3A%2F%2Flocalhost%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'] 
}); 

，现在我的模板文件 index.js：

​​

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> 

所以你可以看到我在应用/ src目录的/ home /指数这两个文件。（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); 
}); 

错误报告

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

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

您正在使用RO uteprovider没有添加它。

角是由丢失的模块，所以你应该包括像

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

模块中，并在你的HTML链接它

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

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

也会更改您的角度版本，因此您不要使用最小。 min.js用于制作，并为您提供蹩脚的错误，例如您在那里的错误。