Heim > Web-Frontend > js-Tutorial > So verwenden und konfigurieren Sie Routen in AngularJs_AngularJS

So verwenden und konfigurieren Sie Routen in AngularJs_AngularJS

WBOY
Freigeben: 2016-05-16 15:16:06
Original
1241 Leute haben es durchsucht

Angular ist ein von Google entwickeltes Single-Page-Anwendungs-Framework. Es verfügt derzeit über viele leistungsstarke Funktionen, wie z. B. die bidirektionale Datenbindung und die Anwendung des MVC-Musters -Ende zum Frontend und Anpassungsanweisungen usw.

Da es sich um eine Single-Page-Anwendung handelt, ist ein Seitenwechsel unbedingt erforderlich. Lassen Sie uns zunächst über das Routing von Angular sprechen.

Angular verwendet Route beim Implementieren des Seitenwechsels.

<script src="js/plugins/angular/angular.min.js"></script>
<script src="js/plugins/ui-router/angular-ui-router.min.js"></script> 
Nach dem Login kopieren

angular.min.js sollte vor angle-ui-router.min.js geladen werden. Dann registrieren wir es in der App.

(function () {
angular.module('demo', [
'ui.router', 
])
})(); 
Nach dem Login kopieren

Nach der Registrierung müssen Sie die Route konfigurieren

function config($stateProvider, $urlRouterProvider,$httpProvider) {
$urlRouterProvider.otherwise("/home/get");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "../views/login.html",
})
.state('home', {
abstract: true,
url: "/home",
templateUrl: "views/common/content.html",
})
.state('home.get', {
url: "/get",
templateUrl: "views/get.html",
data: { pageTitle: 'Example view' }
})
.state('home.post', {
url: "/post",
templateUrl: "views/post.html",
data: { pageTitle: 'Example view' }
});
}
app = angular.module('demo');
app.config(config); 
Nach dem Login kopieren

Die Konfiguration ist hier abgeschlossen und stellt eine Seite dar. Die entsprechende HTML-Datei befindet sich in der Datei

Das Obige ist das vom Herausgeber geteilte Wissen über die Verwendung und Konfiguration von Routen in AngularJs. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage