angularjs einzelne Seite Anwendung URL Fehler

Question

Hallo Leute, ich habe kleine SPA in angularjs erstellt. Ich habe 3 Links in Navbar. Wenn ich auf die Links klicke, anstatt verschiedene Seiten im Upload zu laden, immer die selbe Seite. Unten ist mein routeProvder Code:

'use strict'; 
angular.module('confusionApp', ['ngRoute']) 
    .config(function($routeProvider) { 
     $routeProvider 

     // route for the menu page 
      .when('/menu', { 
       templateUrl : 'menu.html', 
       controller : 'MenuController' 
     }) 

     // route for the contactus page 
      .when('/contactus', { 
       templateUrl : 'contactus.html', 
       controller : 'ContactController' 
      }) 

     // route for the dish details page 
      .when('/menu/:id', { 
       templateUrl : 'dishdetail.html', 
       controller : 'DishDetailController' 
      }) 
      .otherwise('/contactus'); 

}); 

Und html navbar Code:

<div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#/home"> 
         <span class="glyphicon glyphicon-home" 
         aria-hidden="true"></span> Home</a></li> 
        <li><a href="#/menu"> 
         <span class="glyphicon glyphicon-list-alt" 
         aria-hidden="true"></span> 
         Menu</a></li> 
        <li><a href="#/contactus"> 
        <i class="fa fa-envelope-o"></i> Contact</a></li> 
       </ul> 
      </div> 

Was ich von Fehler jedes Mal realisiert stattdessen URL über die # wie in unten ändern:

http://127.0.0.1:55846/app/index.html#!/menu 

Es versucht, auf andere URL über den Kontakt uns zuzugreifen:

http://127.0.0.1:55846/app/index.html#!/contactus#%2Fmenu 

So einfach Zugriff auf andere Teile des Routeproviders und versuchte, URL über das zu erreichen, und weil es keine URL wie diese gibt, wurde es auf contactus Seite umgeleitet. Ich würde gerne wissen, warum es nicht auf Route für "Menü" zugreifen kann? P.S. Wenn ich das erste URL-Handbuch eintippe, funktioniert es.

Answer 1

Es scheint, das Problem hier ist, dass Sie einen Kurs oder ein Tutorial für Winkel 1 folgen, aber dann versuchen Sie, Dokumente zu lesen, die angular2 verwenden. Ich habe festgestellt, dass Sie $scope in Ihrem github-Link verwenden, den Sie freigegeben haben, und $scope wurde in der Version von angular2 entfernt.

Ich denke, um dies zu lösen, müssen Sie zurück auf das letzte Mal, dass Ihr Projekt arbeitete und alles bis zu diesem Punkt entfernen. Stellen Sie dann sicher, dass Sie, wenn Sie von dort aus zu Ihrem Projekt hinzufügen, Winkelfunktionen verwenden.

Answer 2

Versuchen Sie, Aufruf: http://127.0.0.1:55846/app/index.html/#/menu

Mehr Informationen über w3school.

Answer 3

Ich habe den Code heruntergeladen und überprüft die Abhängigkeiten in der index.html-Code in der Zeile, wo Sie den Controller rufen Sie einen Tippfehler haben:

<script src="scripts/controllers.js"></script> 

sein sollte:

<script src="scripts/controller.js"></script> 

Answer 4

Wie gesagt wurde, war dies eine Frage der Versionsnummer. Ich schreibe das vielleicht jemand wird das gleiche Problem in der Zukunft haben. Der Grund war einfach. Wenn Sie die Winkelroute installieren wollen (Bower installieren Sie die Winkelroute -S), werden Sie zwei verschiedene Versionen für die Installation vorschlagen. Sie müssen zuerst auswählen, da das Teil auf Basis der Winkelversion 1 erstellt wurde. Die zweite Version von Winkelroute versucht, die Vorlage als Winkelkomponente 2 zu rendern. Daher müssen Sie die Version 1.4.14 für die normale Rendering-Vorlage installieren. Wenn Sie danach auf den Menüpunkt klicken, öffnet sich der Link http://127.0.0.1:57035/app/index.html#/menu. Andernfalls versucht es, alles über den Kontakt zu rendern, weil es den Menüpunkt nicht finden kann.