unghiular ui Router este un cadru de rutare pentru angular js.
Angular JS oferă deja modulul ngRoute pentru rutare. Este un lib de rutare de bază în care putem specifica o singură vizualizare și controler pentru orice rută. Nu putem obține imagini imbricate prin ngRoute. Așa că folosim routerul UI.
să includem biblioteca după ce includem Angular în intex-ul nostru.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
ui Router pachetul este distribuit folosind NPM, managerul de pachete nod.
npm install --save angular-ui-router
adăugați o dependență la routerul UI
pentru a configura aplicația, trebuie să adăugăm o dependență (ui.router) la modulul nostru unghiular principal.
angular.module('myApp', )
componente
Router UI are un set de componente.
$stateProvider :
o stare corespunde unui loc în cerere. starea descrie prin controler, șablon și Vizualizare proprietăți.
se declanșează evenimente legate de tranziție și de apel înapoi. rezolvarea oricăror dependențe ale stării țintă și actualizarea $locație pentru a reflecta starea curentă. Stat care au url-uri și se înregistrează automat cu $urlRouterProvider.
ui-sref : ui-sref este echivalent cu href în anchor tag.
ui-view : randează vizualizările definite în starea curentă.
configurați stările inițiale
pentru a defini stările pe care le putem folosi .metoda de configurare în această metodă de configurare putem defini un număr de stări pentru fiecare dintre modalele noastre.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
în rândurile de mai sus am creat un stat numit acasă. Atunci când o stare este activat șablonul este insera automat în ui-view.
definiți o directivă ui-view
Router UI utilizează o directivă numită ui-view. ui-view determină un șablon de stat ar trebui să fie încărcate. vom include Directiva ui-view pe indexul nostru.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>
șablon
există diferite moduri de a defini șablonul pentru o anumită stare.
șablon :un șir de conținut html sau o funcție care returnează html.
templateUrl: un șir care conține calea url către un șablon sau o funcție care returnează un șir de cale url.
controlere
putem atribui un controler unei stări. putem defini un controler folosind funcția sau folosind numele controlerului dacă aveți deja un controler defini în modulul
utilizarea funcțiilor:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
Utilizarea controlerului:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
starea abstractă
stările abstracte sunt folosite pentru a împărtăși informațiile comune mai multor state. Are stat copil și nu poate fi activat în sine. O stare abstractă este activată una din starea sa copil fii activat.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
parametrii de Stat
serviciul$stateParams este un obiect care poate stoca informații despre url-ul, în cazul în care url-ul este Active/js/app.js. Putem trece oricare dintre aceste parametru url în $stateParams obiect și vom folosi aceste informații într-un alt stat.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
stare imbricată
stare care poate fi imbricată una în cealaltă, ceea ce înseamnă că starea copil va fi redată în vizualizarea ui cu starea părinte.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve este opțiunea de a preîncărca datele pentru o rută.
$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'
})
în codul de mai sus, obiectul utilizator va încărca utilizatorul și apoi obiectul de activitate, dar numai dacă utilizatorul poate avea sarcina. Traseul se va încărca numai dacă toate rezolvările au succes. dacă prima rezolvare eșuează, a doua nu va fi niciodată judecată.