AngularJS-Anwendung config "Uncaught object" - Fehler (ngRoute)

Habe ich diese einfache Seite:

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

dies ist die aplication.js Datei:

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 = "";
});

und hier ist die login.html:

<div>
    <input type='text' ng-model='password' value={{password}}>
</div>

Beim ausführen erhalte ich diese Fehlermeldung in der Konsole:

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

den code nie zu diesen Zeilen:

$locationProvider.html5mode(true);
$routeProvider.when('/login', {templateUrl:'pages/login.html'});

Was habe ich falsch gemacht?

Update:
hier ist eine Nachricht ich bin immer von debugging-Winkel:

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

Ich bin mir nicht sicher, ob Sie sollten ng-app auf <html> element. Vielleicht sollten Sie versuchen, es zu tun auf <body>
Ich entfernt und es wird fix die Frage. aber immer noch das gleiche problem.
Wäre schön, wenn dieser Fehler warf ein wenig mehr Ahnung! Dies kann ein guter use case enthalten zone.js für einige granulare snoopage 😉 github.com/angular/zone.js

InformationsquelleAutor vlio20 | 2014-05-27

17

In v1.2+, ngRoute ist ein separates Modul und soll geladen werden, unabhängig voneinander (und auch erklärt, wie eine Abhängigkeit von deinem main-Modul).
```
<script src='bower_components/angular/angular.js'></script>
<script src='bower_components/angular/angular-route.js'></script>

var betsApp = angular.module('betsApp', ['ngRoute']);
```
_{Wenn Sie mit bower, können Sie die ngRoute Modul mit dem folgenden Befehl:

bower install angular-route}
- Danke. jetzt gibt es keine Fehler, aber die login.html Datei nicht geladen ng-view
- Stellen Sie sicher, dass login.html ist in einem Verzeichnis mit dem Namen pages. Auch, wo Sie den Pfad zu /login ? Ich sehe nicht, einen link oder etwas. Wenn Sie möchten, um zu navigieren es standardmäßig, ändern Sie Ihre config-Funktion wie diese: ... $routeProvider.when('/login', {...}).otherwise({redirectTo: '/login'});
- die login.html ist in dem Ordner "pages" (auf die ich zugreifen kann, wenn ich Schreibe http://localhost:8000/pages/login.html). Ich bin mit dem browser-url zur Navigation zur login-Seite, wie diese: http://localhost:8000/login
- haben Sie bei der Einrichtung Ihres Servers zur Unterstützung html5mode ? Es muss konfiguriert werden. Ich schlage vor, Sie versuchen, dass mit html5mode ausschalten und sehen, ob das ist das Problem. (Hinweis: mit html5mode ausgeschaltet, müssen Sie navigieren Sie zu http://localhost:8000/#/login.)
- verändert es $locationProvider.html5Mode(true); - und es funktionierte! Dank
InformationsquelleAutor gkalpak
3

RouteProvider ist jetzt in ein separates Modul aus dem core-Winkelverteilung. Sehen https://docs.angularjs.org/api/ngRoute.

Da es aussieht wie bist du mit Laube, ich würde eine
```
bower install angular-route
```
dem herunterladen der erforderlichen .js - Datei und legen Sie es in die bower_components-Verzeichnis. Ändern Sie den HTML -, dieses Skript. Dann, die erste Zeile in Ihrem application.js die Datei sollte lauten:
```
var betsApp = angular.module('betsApp', ['ngRoute']);
```
InformationsquelleAutor rchawdry
3

Sicher sein, dass Ihre Modul-und ng-app sind gleich
```
angular.module('foo', ['ngRoute']);

<html ng-app="foo">
```
InformationsquelleAutor Nour Sammour
2

Müssen Sie hinzufügen angular-route-Modul!
- immer noch der gleiche Fehler....
- Ich aktualisiert meine Antwort.
- Danke. jetzt gibt es keine Fehler, aber die login.html Datei nicht geladen ng-view
InformationsquelleAutor Naor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.