Angular UI Router is een routeringskader voor angular js.
Angular JS biedt al ngRoute-module voor routering. Het is een eenvoudige routing lib waar we slechts één weergave en controller voor elke route kunnen specificeren. We kunnen geen geneste weergave bereiken via ngRoute. Zodat we UI Router gebruiken.
laten we de bibliotheek opnemen nadat we Angular in onze intex hebben opgenomen.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
UI Router pakket wordt gedistribueerd met behulp van npm, de node package manager.
npm install --save angular-ui-router
voeg een afhankelijkheid toe aan UI-Router
om de toepassing te configureren, moeten we een afhankelijkheid toevoegen (ui.router) naar onze hoofdhoekige module.
angular.module('myApp', )
componenten
UI Router heeft een set componenten.
$stateProvider:
een toestand komt overeen met een plaats in de toepassing. status beschrijft via controller, sjabloon en weergave eigenschappen.
het triggert transitiegerelateerde gebeurtenissen en call back. het oplossen van afhankelijkheden van de doelstatus en het bijwerken van $location naar de weerspiegelen de huidige status. Staat dat url ‘ s en het automatisch geregistreerd met $urlRouterProvider.
ui-sref : ui-sref is gelijk aan href in anker tag.
ui-view: geef de weergaven weer die in de huidige toestand zijn gedefinieerd.
Configureer de initiële statussen
om statussen te definiëren die we kunnen gebruiken .config methode in deze config methode kunnen we een aantal toestanden definiëren voor elk van onze modals.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
in de bovenstaande regels hebben we een status gemaakt met de naam home. Wanneer een toestand wordt geactiveerd wordt de sjabloon automatisch ingevoegd in ui-view.
Definieer een ui-view directive
UI Router gebruikt een directive genaamd ui-view. ui-view bepaalt dat een statussjabloon geladen moet worden. we nemen de ui-view-richtlijn op onze 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>
Template
er zijn verschillende manieren om de template voor een specifieke status te definiëren.
sjabloon: een tekenreeks van html-inhoud of een functie die html retourneert.
templateUrl: een tekenreeks die het url-pad naar een sjabloon bevat of een functie die een URL-padreeks retourneert.
Controllers
we kunnen een controller toewijzen aan een status. we kunnen een controller definiëren met behulp van functie of met behulp van controller naam als u al een controller definiëren in de module
met behulp van functies:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
controller gebruiken:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Abstracte toestand
Abstracte toestanden worden gebruikt om de gemeenschappelijke informatie met verschillende toestanden te delen. Het heeft een kindertoestand en het kan niet zelf worden geactiveerd. Een abstracte toestand wordt geactiveerd een van zijn kindtoestand wordt geactiveerd.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
State Parameters
$stateParams service is een object dat de informatie over de url kan opslaan, als de url assets/js/app is.js. We kunnen elk van deze url parameter doorgeven aan het $stateParams object en we gebruiken deze informatie in een andere staat.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
geneste status
status die binnen elkaar kan worden genest, wat betekent dat de onderliggende status binnen de ui-view met ouderstatus wordt weergegeven.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve is de optie om de gegevens voor een route te 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'
})
in de bovenstaande code zal user object Gebruiker en vervolgens het taak object laden, maar alleen als de gebruiker de taak kan hebben. De route wordt alleen geladen als alle resolves succesvol zijn. als de eerste oplossing faalt, zal de tweede nooit worden berecht.