ng-Route funktioniert nicht

Question

Ich habe ein Problem mit meinem Code mit ng-route. Die Adresse im Browser ändert sich, aber auf meiner Seite sind alle Elemente immer noch gleich. Hier ist mein Code:

var app=angular.module('mainApp',['ngRoute']); 
 
app.config('$routeProvider', function($routeProvider){ 
 
    $routeProvider 
 
     .when('/',{ 
 
      templateUrl: 'home.html' 
 
     }) 
 
     .when('/about', { 
 
      templateUrl: 'about.html' 
 
     }) 
 
     .when('/contact', { 
 
      templateUrl: 'contact.html' 
 
     }) 
 
     .otherwise({ 
 
\t \t \t redirectTo: '/' 
 
\t \t \t }); 
 
}); 
 

 
app.controller('mainCtrl',function($scope){ 
 

 
    });

<div ng-controller="mainCtrl"> 
 
\t <div> 
 
\t \t <nav> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#/">Home</a></li> 
 
\t \t \t \t <li><a href="#/about">About us</a></li> 
 
\t \t \t \t <li><a href="#/contact">Contact</a></li> 
 
\t \t \t </ul> 
 
\t \t \t </nav> 
 
\t </div> 
 
\t <br/> 
 
\t <div ng-view ></div> 
 
</div>

Ich habe drei Subsite mit einfachen Absätzen (zu Hause, über und Kontakt html.).

Können Sie mir helfen?

Answer 1

In einem Kommentar, den Sie erwähnen, dass Desktop/SS/index.html#/ Ihre Haupt-Seite ist. Therin liegt dein Problem.

Routing funktioniert nur, wenn Sie die Seiten über einen HTTP-Server bereitstellen. Ein statischer Blick auf Ihre HTML-Seiten in Ihrem Dateisystem funktioniert leider nicht.

Wenn Sie Python auf Ihrem System haben, können Sie dies ganz einfach testen: Öffnen Sie eine Eingabeaufforderung und wechseln Sie in das Verzeichnis Desktop/SS/. Dann starte python -m SimpleHTTPServer 8080 und gehe in einen Browser zu http://localhost:8080. Es sollte auf diese Weise perfekt funktionieren

Answer 2

Bitte benutzen Sie app.config(function ($routeProvider) statt app.config('$routeProvider', function ($routeProvider)

Skript:

var app=angular.module('myApp',[]); 
app.config(function($routeProvider){ 
    $routeProvider 
     .when('/',{ 
      templateUrl: 'home.html' 
     }) 
     .when('/about', { 
      templateUrl: 'about.html' 
     }) 
     .when('/contact', { 
      templateUrl: 'contact.html' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
      }); 
}); 

app.controller('mainCtrl',function($scope){ 

    }); 

Demo Fiddle: https://jsfiddle.net/jLdce3vj/43/