Angular UI Router er en routing ramme for angular js.
Angular JS giver allerede ngRoute modul til routing. Det er en grundlæggende routing lib, hvor vi kun kan specificere en visning og controller til enhver rute. Vi kan ikke opnå indlejret visning gennem ngRoute. Så vi bruger UI Router.
lad os inkludere biblioteket, når vi inkluderer Angular i vores Inteks.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
UI Router pakke distribueres ved hjælp af npm, node package manager.
npm install --save angular-ui-router
Tilføj en afhængighed til UI Router
for at konfigurere applikationen skal vi tilføje en afhængighed (ui.router) til vores vigtigste vinkelmodul.
angular.module('myApp', )
komponenter
UI Router har et sæt komponenter.
$stateProvider :
en tilstand svarer til et sted i ansøgningen. tilstand beskriver via controller, skabelon og vis egenskaber.
det udløser overgangsrelaterede begivenheder og tilbagekald. løsning af eventuelle afhængigheder af måltilstanden og opdatering af $placering for at afspejle den aktuelle tilstand. Stat, der har url ‘ er, og det automatisk registreret med $urlRouterProvider.
ui-sref : ui-sref svarer til href i anker tag.
ui-visning : Gengiv de Visninger, der er defineret i den aktuelle tilstand.
Konfigurer de oprindelige tilstande
for at definere tilstande, Vi kan bruge .config-metode i denne config-metode kan vi definere et antal tilstande for hver af vores modeller.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
i ovenstående linjer har vi oprettet en stat ved navn home. Når en tilstand bliver aktiveret, indsættes skabelonen automatisk i ui-visning.
Definer et ui-visningsdirektiv
UI Router bruger et direktiv kaldet ui-visning. ui-visning bestemmer, at en tilstandsskabelon skal indlæses. vi inkluderer ui-visningsdirektivet på vores indeks.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>
skabelon
der er forskellige måder at definere skabelonen til en bestemt tilstand.
skabelon: en streng html-indhold eller en funktion, der returnerer html.
templateUrl: en streng, der indeholder url-stien til en skabelon eller en funktion, der returnerer en url-sti-streng.
controllere
vi kan tildele en controller til en tilstand. vi kan definere en controller ved hjælp af funktion eller ved hjælp af controller navn, hvis du allerede har en controller definere i modulet
brug af funktioner:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
brug af controller:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
abstrakt tilstand
abstrakte tilstande bruges til at dele den fælles information til flere stater. Det har barn tilstand, og det kan ikke aktiveres selv. En abstrakt tilstand aktiveres, en af dens børnestat bliver aktiveret.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Tilstandsparametre
$stateParams service er et objekt, der kan gemme oplysningerne om url ‘en, hvis url’ en er aktiver/js/app.js. Vi kan overføre en hvilken som helst af disse url-parametre til $stateParams-objektet, og vi bruger disse oplysninger til en anden tilstand.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
indlejret tilstand
tilstand, der kan indlejres i hinanden, hvilket betyder, at børnestaten gengives inde 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'
})
Resolve
Resolve er muligheden for at forudindlæse 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 ovenstående kode indlæser brugerobjektet bruger og derefter opgaveobjektet, men kun hvis brugeren kan have opgaven. Ruten indlæses kun, hvis alle opløsningerne er vellykkede. hvis den første løsning mislykkes, vil den anden aldrig blive prøvet.