az Angular UI Router egy routing keretrendszer az angular js számára.
Angular JS már rendelkezik ngroup modul routing. Ez egy alapvető útválasztási lib, ahol csak egy nézetet és vezérlőt adhatunk meg bármely útvonalhoz. Nem tudjuk elérni beágyazott nézet keresztül ngRoute. Annak érdekében, hogy mi használ UI Router.
lehetővé teszi, hogy tartalmazza a könyvtár után is Angular mi intex.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
UI Router csomag elosztott NPM, a csomópont csomagkezelő.
npm install --save angular-ui-router
Add függőséget UI Router
konfigurálásához alkalmazás, meg kell adni a függőség (ui.router) a fő szögletes modulunkhoz.
angular.module('myApp', )
komponensek
UI Router egy sor komponenst.
$stateProvider :
egy állapot megfelel az alkalmazás helyének. az állapot leírja a vezérlő, a sablon és a nézet tulajdonságait.
átmeneti eseményeket és visszahívásokat vált ki. a célállapot függőségeinek feloldása és a $location frissítése az aktuális állapot tükrözésére. Adja meg, hogy van url-je, és automatikusan regisztrálja a $urlRouterProvider-t.
ui-sref : ui-sref egyenértékű href a horgony tag.
ui-view : az aktuális állapotban meghatározott nézetek megjelenítése.
állítsa be a
kezdeti állapotokat a használható állapotok meghatározásához .konfigurációs módszer ebben a konfigurációs módszerben számos állapotot definiálhatunk minden modálunkhoz.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
a fenti sorokban létrehoztunk egy home nevű államot. Amikor egy állam kap aktiválva a sablon automatikusan beszúrja ui-view.
adjon meg egy ui-view direktívát
az UI Router egy UI-view direktívát használ. ui-view határozza meg az állam sablont kell betölteni. az ui-view irányelvet felvesszük az indexünkbe.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>
sablon
különböző módon lehet meghatározni a sablont egy adott állapothoz.
sablon: html tartalom vagy függvény, amely html-t ad vissza.
templateUrl: olyan karakterlánc, amely tartalmazza egy sablon url-elérési útját vagy egy függvényt, amely visszaad egy url-elérési útvonalat.
vezérlők
hozzárendelhetünk egy vezérlőt egy állapothoz. definiálhatunk egy vezérlőt a funkció használatával vagy a vezérlő neve használatával, ha már van egy vezérlő definiálása a modulban
funkciók használatával:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
vezérlő használata:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
absztrakt állapot
az absztrakt állapotokat arra használják, hogy megosszák a közös információkat több állammal. Gyermek állapota van, és önmagában nem aktiválható. Egy absztrakt állapot aktiválódik az egyik gyermekállapota aktiválódik.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
állami paraméterek
$stateParams szolgáltatás egy objektum, amely képes tárolni az információt az url, ha az url assets/js/app.js. Bármelyik url paramétert át tudjuk adni a $stateParams objektumba, és ezt az információt egy másik állapotba használjuk.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
beágyazott állapot
egymásba ágyazható állapot, ami azt jelenti, hogy a gyermekállapot az ui-nézetben jelenik meg a szülőállapotmal.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
a Resolve lehetőség az útvonal adatainak előzetes betöltésére.
$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'
})
a fenti kódban a felhasználói objektum betölti a felhasználót, majd a feladatobjektumot, de csak akkor, ha a felhasználó megkaphatja a feladatot. Az útvonal csak akkor töltődik be, ha az összes megoldás sikeres. ha az első megoldás sikertelen, a másodikat soha nem fogják megpróbálni.