Gewusst wie: Angularjs Route aktualisieren

Question

Ich versuche, eine Anwendung zu erstellen, die mehrere Ansichten als Vorlage enthält. Die Vorlagen befinden sich unter dem Ordner js/app/pages/. Und ich habe 2 Vorlagen zum Anzeigen und Routen. Mein Routing-Bereich ist:

var app = angular.module("myApp", ['ngRoute', 'ngMaterial']); 

app.config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/Page', { 
     templateUrl: 'js/app/pages/Page.html', 
     controller: 'pageController', 
     reloadOnSearch: false 
    }) 
    .when('/Settings', { 
     templateUrl: 'js/app/pages/Settings.html', 
     controller: 'settingsController', 
     reloadOnSearch: false 
    }) 
    .when('/Admin', { 
     templateUrl: 'js/app/pages/Admin.html', 
     controller: 'adminController', 
     reloadOnSearch: false 
    }) 
    .otherwise({ 
     redirectTo: '/Page' 
    }); 

    $locationProvider.html5Mode(true); 
}); 

Und meine HTML-Datei enthält

<div id="menu"></div> 
<div ng-view></div> 

Menü div enthält mich Menüelemente, die Strecke zwischen den Seiten. Zum Beispiel, wenn ich diese Seite im Browser starte, wird die URL localhost/Page sein, und wenn ich auf die URL der Einstellungen-Schaltfläche klicke, ändere sie mit localhost/Settings. Aber wenn ich die F5 Taste auf meiner Tastatur drücke. Seite gibt mir Fehler The resource cannot be found..

Ich suche im Internet "wie Routing-Seite in angularjs aktualisieren" und finden Sie einige Lösungen, aber ich konnte sie nicht für mich arbeiten lassen. Ich versuchte $route.reload() und $routeUpdate() Methode, aber das funktioniert nicht für mich. Vielleicht liege ich in etwas falsch.

Answer 1

Gelöst! Ich konnte die Aktualisierung mit ngRoute nicht verwalten. Dann wandle ich es in ui-Router um. Ich erkläre die Zustände durch URLs. Und die Aktualisierung funktioniert. Danke für Kommentare und Antworten. Vielleicht wird das jemandem helfen.

Answer 2

Wenn Sie eine Seite neu laden, wird die gesamte App erneut gestartet. Das heißt, wenn Sie nicht auf der Hauptseite sind und auf der Unterroute einige Daten fehlen, erhalten Sie wahrscheinlich einen Fehler.

Sie sollten für Routen in resolve Attribut suchen, so zum Beispiel

.when('/Settings', { 
     templateUrl: 'js/app/pages/Settings.html', 
     controller: 'settingsController', 
     reloadOnSearch: false, 
     resolve: { 
      resourceone: function(){return whatsneeedtoberesolvehere;} 
     } 
    }) 

, die Art und Weise, egal wo Ihre Anwendung neu geladen wird, wird es die notwendigen Daten, um die

Answer 3

Eigentlich Seite zu booten, wenn Sie drücken F5 von der Tastatur, es trifft auf Ihren Server für diese Seite, nicht eckig, weil Sie kein # Zeichen zwischen Ihrer URL haben. Für Winkel sollte URL wie sein als - localhost/#/Page

Answer 4

Verwenden html5mode

Ein großer Artikel darüber here

init seine sehr einfache

.config(function($routeProvider, $locationProvider) { 

    // other routes here 

    $locationProvider.html5Mode(true); 

}); 

Answer 5

Wenn Sie mit Apache-Server sollte dies Führen Sie diese in Terminal

sudo a2enmod rewrite && sudo service apache2 restart 

funktioniert für mich

Answer 6

Behalten Sie einfach die # in URL, Sie müssen nicht extra Aufwand zu verwalten Reloads etc. Sie können denken, ein "#" in URL repräsentieren einen bestimmten Zustand in der einzelnen Seite Anwendung.

Andernfalls kann es durch Modulumschreiben verwaltet werden, das die URL intern mit der Hash-URL für die AngularJs-App abbildet.