Angular UI Router je směrovací rámec pro angular js.
Angular JS již poskytuje ngRoute modul pro směrování. Jedná se o základní směrovací lib, kde můžeme určit pouze jeden pohled a řadič pro libovolnou trasu. Prostřednictvím ngRoute nemůžeme dosáhnout vnořeného pohledu. Takže používáme UI Router.
umožňuje zahrnout knihovnu po zahrnutí Úhlové do našeho intexu.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
balíček UI routeru je distribuován pomocí npm, správce balíčků uzlů.
npm install --save angular-ui-router
přidat závislost na UI routeru
Chcete-li konfigurovat aplikaci, musíme přidat závislost (ui.router) do našeho hlavního úhlového modulu.
angular.module('myApp', )
komponenty
UI Router má sadu komponent.
$stateProvider:
stav odpovídá místu v aplikaci. stav popisuje pomocí vlastností řadiče, šablony a zobrazení.
spouští události související s přechodem a zpětné volání. řešení všech závislostí cílového stavu a aktualizace $location na aktuální stav. Stát, který má url a je automaticky zaregistrován u $urlRouterProvider.
ui-sref: ui-sref je ekvivalentní href v kotevní značce.
ui-view: vykreslení zobrazení definovaných v aktuálním stavu.
nakonfigurujte počáteční stavy
tak, aby definovaly stavy, které můžeme použít .config metoda v této config metodě můžeme definovat počet stavů pro každý z našich modálů.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
ve výše uvedených řádcích jsme vytvořili stát s názvem domov. Když je stav se aktivuje šablona se automaticky vloží do ui-view.
Definujte směrnici ui-view
UI Router používá směrnici nazvanou ui-view. ui-view určuje stav šablony by měly být načteny. do našeho indexu zahrneme směrnici ui-view.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>
šablona
existují různé způsoby, jak definovat šablonu pro konkrétní stav.
šablona: řetězec obsahu html nebo funkce, která vrací html.
templateUrl: řetězec obsahující cestu url k šabloně nebo funkci, která vrací řetězec cesty url.
řadiče
můžeme přiřadit řadič ke stavu. můžeme definovat regulátoru pomocí funkcí nebo pomocí správce jméno, pokud již máte řadič definovat v modulu
pomocí funkce:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
pomocí regulátoru:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Abstraktní státu
Abstraktní státy jsou zvyklí sdílet společné informace do několika států. Má dětský stav a nemůže být aktivován sám. Abstraktní stav je aktivován jedním z jeho podřízených stavů.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Parametry
$stateParams služba je objekt, který lze uložit informace o url, pokud je adresa url assets/js/app.js. Můžeme předat libovolný z těchto parametrů url do objektu $stateParams a tyto informace použijeme do jiného stavu.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
Vnořené státu
Státu, které mohou být vnořeny do sebe, což znamená, že dítě stát bude vykreslen uvnitř ui-view s rodičem stát.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve je možnost předběžného načtení dat pro trasu.
$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'
})
ve výše uvedeném kódu uživatel objektu načte uživatele a pak objekt úlohy, ale pouze v případě, že uživatel může mít úkol. Trasa se načte, pouze pokud jsou všechna řešení úspěšná. pokud první řešení selže, druhé nebude nikdy vyzkoušeno.