Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - AngularJS application config "Uncaught object" error (ngRoute)

0 votes
245 views
in Technique[技术] by (71.8m points)

javascript - AngularJS application config "Uncaught object" error (ngRoute)

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)"
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...