问题描述:

I started using angularjs to create a single page application and wanted to add dynamic templates (views and controllers). I read on the web that I should use requirejs for doing this so I did.

I followed this tutorial @ https://github.com/marcoslin/angularAMD and tried to follow the steps.

When I wanted to open the page I get those two errors on my console:

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

and this one

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

I think they are both similar errors. I guess the error is coming from app.js file and this is my code:

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);

});

and 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']

});

and now my template files

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>

So as you can see I have those two files in app/src/home/index.(html/js)

And other files are located at app/ while ./ is the path of index.html (main page)

I really hope for help for my project and thanks in advance. :)

EDIT EDIT EDIT EDIT

Here we go:

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

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

...

网友答案:

You are using routeprovider without adding it.

Angular is made up of lost of modules so you should include it in the module like

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

and link it in your html

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

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

also change your version of angular so you dont use min. min.js is used for production and gives you crappy errors like the one you have there.

相关阅读:
Top