vinkel UI Router är en routing ram för Vinkel js.
Angular JS ger redan ngRoute modul för routing. Det är en grundläggande routing lib där vi bara kan ange en vy och kontroller för vilken rutt som helst. Vi kan inte uppnå kapslad vy genom ngRoute. Så att vi använder UI Router.
låt oss inkludera biblioteket efter att vi har inkluderat 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 Router-paketet distribueras med npm, node package manager.
npm install --save angular-ui-router
Lägg till ett beroende till UI-Router
för att konfigurera applikationen måste vi lägga till ett beroende (ui.router) till vår huvudsakliga vinkelmodul.
angular.module('myApp', )
komponenter
Ui Router har en uppsättning komponenter.
$stateProvider:
ett tillstånd motsvarar en plats i ansökan. staten beskriver via controller, Mall och visa egenskaper.
det utlöser övergångsrelaterade händelser och samtalsbackar. lösa eventuella beroenden i måltillståndet och uppdatera $plats för att återspegla det aktuella tillståndet. Ange som har url: er och det registreras automatiskt med $urlRouterProvider.
ui-sref: ui-sref motsvarar href i anchor tag.
ui-view: återge de vyer som definierats i det aktuella läget.
konfigurera de initiala tillstånden
för att definiera tillstånd vi kan använda .config-metod i denna config-metod kan vi definiera ett antal tillstånd för var och en av våra modaler.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
i ovanstående rader har vi skapat ett tillstånd som heter Hem. När ett tillstånd aktiveras sätts mallen automatiskt in i ui-view.
definiera ett ui-view-direktiv
UI-Router använder ett direktiv som heter ui-view. ui-view bestämmer att en tillståndsmall ska laddas. vi kommer att inkludera ui-view-direktivet på vårt index.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>
Mall
det finns olika sätt att definiera mallen för ett visst tillstånd.
mall: en sträng html-innehåll eller en funktion som returnerar html.
templateUrl: en sträng som innehåller url-sökvägen till en mall eller en funktion som returnerar en url-sökvägssträng.
styrenheter
vi kan tilldela en styrenhet till ett tillstånd. vi kan definiera en styrenhet med funktion eller med hjälp av styrenhetens namn om du redan har en styrenhet definiera i modulen
använda funktioner:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
använda controller:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Abstrakt tillstånd
abstrakta tillstånd används för att dela den gemensamma informationen till flera stater. Det har barntillstånd och det kan inte aktiveras själv. Ett abstrakt tillstånd aktiveras ett av dess barntillstånd aktiveras.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Statsparametrar
$stateParams service är ett objekt som kan lagra informationen om webbadressen, om webbadressen är assets/js/app.js. Vi kan skicka någon av dessa url-parametrar till $ stateParams-objektet och vi använder denna information till ett annat tillstånd.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
kapslat tillstånd
tillstånd som kan kapslas i varandra vilket innebär att barntillståndet kommer att återges inuti användargränssnittet med överordnat tillstånd.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve är alternativet för att ladda data för en rutt.
$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 ovanstående kod kommer användarobjektet att ladda användaren och sedan uppgiftsobjektet, men bara om användaren kan ha uppgiften. Rutten laddas endast om alla lösningar är framgångsrika. om den första lösningen misslyckas kommer den andra aldrig att försökas.