Angular UI Router ist ein Routing-Framework für Angular js.
Angular JS bietet bereits ein ngRoute-Modul für das Routing. Es ist eine grundlegende Routing-Bibliothek, in der wir nur eine Ansicht und einen Controller für jede Route angeben können. Wir können keine verschachtelte Ansicht über ngRoute erreichen. Damit verwenden wir UI Router.
Lassen Sie uns die Bibliothek einschließen, nachdem wir Angular in unser Intex aufgenommen haben.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
Das UI-Router-Paket wird mit npm, dem Knotenpaketmanager, verteilt.
npm install --save angular-ui-router
Fügen Sie eine Abhängigkeit zum UI-Router hinzu
Um die Anwendung zu konfigurieren, müssen wir eine Abhängigkeit hinzufügen (ui.router) zu unserem eckigen Hauptmodul.
angular.module('myApp', )
Komponenten
Der Router verfügt über eine Reihe von Komponenten.
$stateProvider :
Ein Zustand entspricht einem Ort in der Anwendung. der Status wird über die Eigenschaften Controller, Template und View beschrieben.
Es triggert Transition bezogene Ereignisse und Rückrufe. lösen Sie alle Abhängigkeiten des Zielstatus auf und aktualisieren Sie $location , um den aktuellen Status widerzuspiegeln. Geben Sie an, dass URLs vorhanden sind, und es wird automatisch bei $ urlRouterProvider registriert.
ui-sref: ui-sref entspricht href im Anker-Tag.
ui-view : Rendert die im aktuellen Status definierten Ansichten.
Konfigurieren Sie die Anfangszustände
, um Zustände zu definieren, die wir verwenden können .konfigurationsmethode In dieser Konfigurationsmethode können wir für jede unserer Modalen eine Reihe von Zuständen definieren.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
In den obigen Zeilen haben wir einen Zustand namens home erstellt. Wenn ein Status aktiviert wird, wird die Vorlage automatisch in die UI-Ansicht eingefügt.
Definieren Sie eine ui-View-Direktive
UI Router verwendet eine Direktive namens ui-view. ui-view bestimmt, ob eine Statusvorlage geladen werden soll. wir werden die ui-view Direktive in unseren Index aufnehmen.html
<!doctype html>
<html>
<head>
<title>UI Router for Angular JS</title>
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>
Template
Es gibt verschiedene Möglichkeiten, die Vorlage für einen bestimmten Zustand zu definieren.
template: eine Zeichenfolge von HTML-Inhalten oder eine Funktion, die HTML zurückgibt.
templateUrl: Eine Zeichenfolge, die den URL-Pfad zu einer Vorlage oder einer Funktion enthält, die eine URL-Pfadzeichenfolge zurückgibt.
Controller
Wir können einen Controller einem Zustand zuweisen. wir können einen Controller mithilfe der Funktion oder mithilfe des Controllernamens definieren, wenn Sie bereits einen Controller im Modul
mithilfe von Funktionen definieren:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
mit controller:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Abstrakter Zustand
Abstrakte Zustände werden verwendet, um die gemeinsamen Informationen für mehrere Zustände freizugeben. Es hat einen untergeordneten Status und kann nicht selbst aktiviert werden. Ein abstrakter Status wird aktiviert, einer seiner untergeordneten Status wird aktiviert.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Statusparameter
$stateParams Service ist ein Objekt, das die Informationen über die URL speichern kann, wenn die URL assets/js/app .js. Wir können jeden dieser URL-Parameter an das $ stateParams-Objekt übergeben und diese Informationen in einem anderen Status verwenden.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
Verschachtelter Zustand
Zustand, der ineinander verschachtelt werden kann, was bedeutet, dass der untergeordnete Zustand in der UI-Ansicht mit dem übergeordneten Zustand gerendert wird.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve ist die Option, die Daten für eine Route vorab zu laden.
$stateProvider
.state('user.profile',{
url:'/profile',
templateUrl:'profile.html',
controller:'profileController',
resolve: {
user: function($stateParams, userservice){
return userservice.find($stateParams.id);
},
tasks: function(TaskService, user){
return user.canHaveTasks()?TaskService.find(user.id):;
}
}
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Im obigen Code lädt das Benutzerobjekt den Benutzer und dann das Aufgabenobjekt, jedoch nur, wenn der Benutzer die Aufgabe haben kann. Die Route wird nur geladen, wenn alle Resolves erfolgreich sind. wenn die erste Lösung fehlschlägt, wird die zweite niemals versucht.