Angular UI Router on Angular js: n reitityskehys.
Angular JS tarjoaa jo ngRoute-moduulin reititykseen. Se on perus reititys lib, jossa voimme määrittää vain yhden näkymän ja ohjaimen mille tahansa reitille. Emme voi saavuttaa sisäkkäistä näkymää ngrouten kautta. Niin, että käytämme KÄYTTÖLIITTYMÄREITITINTÄ.
lets include the library after we include Angular in our intex.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
UI-Reititinpakettia jaetaan npm: llä, joka on solmupakettien hallinta.
npm install --save angular-ui-router
lisää riippuvuus KÄYTTÖLIITTYMÄREITITTIMEEN
määrittääksesi sovelluksen, meidän on lisättävä riippuvuus (ui.reititin) pääkulmamoduuliimme.
angular.module('myApp', )
komponentit
KÄYTTÖLIITTYMÄREITITTIMESSÄ on joukko komponentteja.
$stateProvider:
tila vastaa paikkaa hakemuksessa. tila kuvaa ohjaimen, mallin ja näkymäominaisuuksien kautta.
se käynnistää siirtymävaiheen tapahtumat ja takaisinkutsun. ratkaisemalla kaikki riippuvuudet kohdetilan ja päivittämällä $sijainti heijastavat nykyisen tilan. Tila, joka on url: n ja se automaattisesti rekisteröity $urlRouterProvider.
ui-sref: ui-sref vastaa ankkurilapussa href: ää.
ui-view: renderöi nykyisessä tilassa määritellyt näkymät.
Määritä alkutilat
määrittelemään tilat, joita voimme käyttää .config menetelmä tässä config menetelmä voimme määritellä useita valtioita kunkin meidän modaalit.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
edellä mainituilla linjoilla on luotu koti-niminen valtio. Kun tila aktivoidaan, malli lisätään automaattisesti käyttöliittymänäkymään.
Define a ui-view directive
UI-reititin käyttää direktiiviä nimeltä ui-view. ui-view määrittää, että tilamalli tulee ladata. sisällytämme ui-view-direktiivin indeksiimme.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
on olemassa erilaisia tapoja määritellä malli tietylle valtiolle.
template: HTML-sisällön merkkijono tai funktio, joka palauttaa html: n.
templateUrl: merkkijono, joka sisältää URL-polun malliin tai funktion, joka palauttaa url-polku-merkkijonon.
valvojat
voimme määrätä valvojan johonkin valtioon. voimme määritellä ohjaimen funktion tai ohjaimen nimen avulla, jos sinulla on jo ohjain määrittää moduulissa
funktioiden avulla:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
ohjaimen käyttäminen:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
abstrakti tila
abstrakteja tiloja käytetään yhteisen tiedon jakamiseen useille valtioille. Siinä on lapsen tila, eikä sitä voi itse aktivoida. Abstrakti tila aktivoituu yksi sen lapsen tila aktivoituu.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Valtion parametrit
$stateParams service on objekti, joka voi tallentaa url-osoitteen tiedot, jos url on assets/js/app.js. Voimme siirtää minkä tahansa näistä url-parametrin $stateParams-objektiin ja käytämme tätä tietoa toiseen tilaan.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
sisäkkäinen tila
tila, joka voi olla sisäkkäinen toistensa sisällä, mikä tarkoittaa, että lapsivaltio renderoituu ui-näkymän sisään emovaltion kanssa.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve on mahdollisuus esikuormata tiedot tiettyä reittiä varten.
$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'
})
yllä olevassa koodissa käyttäjäobjekti lataa käyttäjän ja tämän jälkeen tehtäväobjektin, mutta vain jos käyttäjä saa tehtävän. Reitti latautuu vain, jos kaikki ratkaisut onnistuvat. jos ensimmäinen ratkaisu epäonnistuu, toista ei koskaan koeteta.