Angular UI Router er en ruting rammeverk for angular js.
Angular JS gir allerede ngRoute-modul for ruting. Det er en grunnleggende ruting lib der vi kan spesifisere bare en visning og kontroller for enhver rute. Vi kan ikke oppnå nestet visning gjennom ngRoute. Slik at vi bruker UI-Ruteren.
lar inkludere biblioteket etter at Vi inkluderer Angular i vår intex.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
UI-Ruterpakken distribueres ved hjelp av npm, nodepakkebehandleren.
npm install --save angular-ui-router
Legg Til En Avhengighet TIL UI-Ruteren
for å konfigurere programmet må vi legge til en avhengighet (ui.router) til vår viktigste vinkelmodul.
angular.module('myApp', )
Komponenter
UI-Ruteren har et sett med komponenter.
$stateProvider:
en tilstand tilsvarer et sted i programmet. tilstand beskriver via controller, mal og vise egenskaper.
det utløser overgangsrelaterte hendelser og ringe tilbake. løse eventuelle avhengigheter av måltilstanden og oppdatere $plassering til reflektere gjeldende tilstand. Stat som har url-er og det registreres automatisk med $urlRouterProvider.
ui-sref: ui-sref tilsvarer href i ankerkoden.
ui-view: gjengi visningene som er definert i gjeldende tilstand.
Konfigurer de første tilstandene
for å definere tilstander vi kan bruke .config metode i denne config metoden kan vi definere en rekke tilstander for hver av våre modaler.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
i de ovennevnte linjene har vi opprettet en stat som heter hjem. Når en tilstand blir aktivert, blir malen automatisk satt inn i ui-visning.
Definer et ui-view-direktiv
UI-Ruteren bruker et direktiv kalt ui-view. ui-view bestemmer at en statsmal skal lastes inn. vi vil inkludere ui-view-direktivet på indeksen vår.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>
Mal
det finnes forskjellige måter å definere malen for en bestemt tilstand på.
mal: en streng med html-innhold eller en funksjon som returnerer html.
templateUrl: en streng som inneholder url-banen til en mal eller en funksjon som returnerer en url-banestreng.
Kontroller
Vi kan tilordne en kontroller til en tilstand. vi kan definere en kontroller ved hjelp av funksjon eller ved hjelp av kontrollernavn hvis du allerede har en kontroller definer i modulen
ved hjelp av funksjoner:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
bruke kontrolleren:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Abstract state
Abstrakte tilstander brukes til å dele felles informasjon til flere stater. Den har barnestatus, og den kan ikke aktiveres selv. En abstrakt tilstand aktiveres en av sine barn tilstand bli aktivert.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Tilstandsparametere
$stateParams service er et objekt som kan lagre informasjon om nettadressen, hvis nettadressen er eiendeler/js / app.js. Vi kan sende noen av disse url parameter til $stateParams objekt og vi bruker denne informasjonen til en annen stat.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
Nestet tilstand
Tilstand som kan nestes i hverandre, noe som betyr at barnestaten vil gjengis i ui-visningen med overordnet tilstand.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Løs
Løs er alternativet for å forhåndsinnlaste dataene for en rute.
$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'
})
i koden ovenfor vil brukerobjektet laste bruker og deretter oppgaveobjektet, men bare hvis brukeren kan ha oppgaven. Ruten lastes bare hvis alle oppløsningene er vellykkede. hvis den første løsningen mislykkes, vil den andre aldri bli prøvd.