I have this simple page:
<!doctype html>
<html>
<head >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='bower_components/bootstrap/dist/css/bootstrap.css')>
<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/angular/angular.js'></script>
<script src='bower_components/bootstrap/dist/js/bootstrap.min.js'></script>
<script src='js/application.js'></script>
<title>Bets Application</title>
</head>
<body ng-app='betsApp' ng-controller='betsAppCtrl'>
<h1>BetsApp</h1>
<ng-view></ng-view>
</body>
</html>
this is the aplication.js
file:
var betsApp = angular.module('betsApp', []);
betsApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5mode(true);
$routeProvider.when('/login', {templateUrl:'pages/login.html'});
});
betsApp.controller('betsAppCtrl', function($scope)
{
$scope.password = "";
$scope.email = "";
});
and here is the login.html
:
<div>
<input type='text' ng-model='password' value={{password}}>
</div>
When running I am getting this error in console:
Uncaught object angular.js:78
(anonymous function) angular.js:78
(anonymous function) angular.js:3809
forEach angular.js:323
loadModules angular.js:3775
createInjector angular.js:3715
doBootstrap angular.js:1379
bootstrap angular.js:1394
angularInit angular.js:1307
(anonymous function) angular.js:21459
n.Callbacks.j jquery.js:3073
n.Callbacks.k.fireWith jquery.js:3185
n.extend.ready jquery.js:3391
the code never gets to this lines:
$locationProvider.html5mode(true);
$routeProvider.when('/login', {templateUrl:'pages/login.html'});
What have I done wrong?
Update: here is some message I am getting from debugging angular:
Line 78, Column 1
Pause On Caught Exceptions
Watch Expressions
Platform: <not available>
data.data: <not available>
Call StackAsync
angular.js:78
(anonymous function)
angular.js:3809
(anonymous function)
angular.js:323
forEach
angular.js:3775
loadModules
angular.js:3715
createInjector
angular.js:1379
doBootstrap
angular.js:1394
bootstrap
angular.js:1307
angularInit
angular.js:21459
(anonymous function)
jquery.js:3073
n.Callbacks.j
jquery.js:3185
n.Callbacks.k.fireWith
jquery.js:3391
n.extend.ready
jquery.js:3407
I
Paused on a JavaScript breakpoint.
Scope Variables
Local
arguments: Arguments[4]
code: "modulerr"
i: 4
message: "[$injector:modulerr] Failed to instantiate module betsApp due to:↵Error: [$injector:unpr] Unknown provider: $routeProvider↵http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeProvider↵ at http://localhost:8000/bower_components/angular/angular.js:78:12↵ at http://localhost:8000/bower_components/angular/angular.js:3705:19↵ at getService (http://localhost:8000/bower_components/angular/angular.js:3832:39)↵ at Object.invoke (http://localhost:8000/bower_components/angular/angular.js:3859:13)↵ at http://localhost:8000/bower_components/angular/angular.js:3788:37↵ at Array.forEach (native)↵ at forEach (http://localhost:8000/bower_components/angular/angular.js:323:11)↵ at loadModules (http://localhost:8000/bower_components/angular/angular.js:3775:5)↵ at createInjector (http://localhost:8000/bower_components/angular/angular.js:3715:11)↵ at doBootstrap (http://localhost:8000/bower_components/angular/angular.js:1379:20)↵http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=betsApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24routeProvider%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A78%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3705%3A19%0A%20%20%20%20at%20getService%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3832%3A39)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3859%3A13)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3788%3A37%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A323%3A11)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3775%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3715%3A11)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A1379%3A20)"
prefix: "[$injector:modulerr] "
stringify: function (obj) {
template: "Failed to instantiate module {0} due to:↵{1}"
templateArgs: Arguments[4]
this: undefined
Closure
Closure
Window
Global
Breakpoints
angular.js:78
Error(message);
application.js:4
.html5mode(true);
application.js:5
.when('/login', {templateUrl:'pages/login.html'});
DOM Breakpoints
XHR Breakpoints
Event Listener Breakpoints
Workers
"[$injector:modulerr] Failed to instantiate module betsApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeProvider
at http://localhost:8000/bower_components/angular/angular.js:78:12
at http://localhost:8000/bower_components/angular/angular.js:3705:19
at getService (http://localhost:8000/bower_components/angular/angular.js:3832:39)
at Object.invoke (http://localhost:8000/bower_components/angular/angular.js:3859:13)
at http://localhost:8000/bower_components/angular/angular.js:3788:37
at Array.forEach (native)
at forEach (http://localhost:8000/bower_components/angular/angular.js:323:11)
at loadModules (http://localhost:8000/bower_components/angular/angular.js:3775:5)
at createInjector (http://localhost:8000/bower_components/angular/angular.js:3715:11)
at doBootstrap (http://localhost:8000/bower_components/angular/angular.js:1379:20)
http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=betsApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24routeProvider%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A78%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3705%3A19%0A%20%20%20%20at%20getService%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3832%3A39)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3859%3A13)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3788%3A37%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A323%3A11)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3775%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3715%3A11)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A1379%3A20)"
In v1.2+, ngRoute
is a separate module and should be loaded independently (and also declared as a dependency of your main module).
<script src='bower_components/angular/angular.js'></script>
<script src='bower_components/angular/angular-route.js'></script>
var betsApp = angular.module('betsApp', ['ngRoute']);
If you are using bower, you can download the ngRoute
module with the following command:bower install angular-route
RouteProvider is now in a separate module from the core Angular distribution. See https://docs.angularjs.org/api/ngRoute.
Since it looks like you're using bower, I would do a
bower install angular-route
which will download the requisite .js
file and place it in the bower_components directory. Modify the HTML to include this script. Then, the first line line in your application.js file should read:
var betsApp = angular.module('betsApp', ['ngRoute']);
Be sure your Module and ng-app are equals
angular.module('foo', ['ngRoute']);
<html ng-app="foo">
You have to add angular-route module!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With