Router Angular UI jest ramą routingu dla angular js.
Angular JS zapewnia już moduł ngRoute do routingu. Jest to podstawowa lib routingu, gdzie możemy określić tylko jeden widok i kontroler dla dowolnej trasy. Nie możemy uzyskać widoku zagnieżdżonego przez ngRoute. Tak, że używamy routera UI.
włączamy bibliotekę po dodaniu Angulara do naszego intex-a.html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
pakiet routera UI jest dystrybuowany przy użyciu npm, menedżera pakietów węzła.
npm install --save angular-ui-router
Dodaj zależność do routera UI
aby skonfigurować aplikację, musimy dodać zależność (ui.router) do naszego głównego modułu kątowego.
angular.module('myApp', )
Komponenty
Ui Router ma zestaw komponentów.
$stateProvider:
stan odpowiada miejscu w aplikacji. stan opisuje za pomocą kontrolera, szablonu i właściwości widoku.
wywołuje zdarzenia związane z przejściem i oddzwania. rozwiązywanie wszelkich zależności stanu docelowego i aktualizowanie $location w celu odzwierciedlenia bieżącego stanu. Stan, który ma adresy url i jest automatycznie zarejestrowany w $urlRouterProvider.
ui-sref: ui-sref jest odpowiednikiem href w znaczniku anchor.
ui-view: renderuje widoki zdefiniowane w bieżącym stanie.
Skonfiguruj Stany początkowe
, aby zdefiniować Stany, których możemy użyć .metoda config w tej metodzie config możemy zdefiniować kilka Stanów dla każdego z naszych modali.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
w powyższych wierszach stworzyliśmy Stan o nazwie home. Po aktywacji stanu szablon jest automatycznie wstawiany do widoku interfejsu użytkownika.
Zdefiniuj dyrektywę ui-view
Router UI używa dyrektywy o nazwie ui-view. widok interfejsu użytkownika określa, czy szablon stanu powinien zostać załadowany. dodamy dyrektywę ui-view do naszego indeksu.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>
szablon
istnieją różne sposoby definiowania szablonu dla określonego stanu.
template: ciąg treści html lub funkcja zwracająca html.
templateUrl: łańcuch zawierający ścieżkę url do szablonu lub funkcję, która zwraca łańcuch ścieżki url.
Kontrolery
możemy przypisać kontroler do stanu. możemy zdefiniować kontroler za pomocą funkcji lub używając nazwy kontrolera, jeśli masz już kontroler zdefiniowany w module
za pomocą funkcji:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
korzystanie z kontrolera:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
Stan abstrakcyjny
Stany abstrakcyjne służą do dzielenia się wspólnymi informacjami z kilkoma Stanami. Ma stan dziecka i nie można go aktywować samodzielnie. Stan abstrakcyjny jest aktywowany jeden z jego stanów potomnych zostaje aktywowany.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
parametry stanu
usługa$stateParams jest obiektem, który może przechowywać informacje o adresie url, jeśli adres url to assets/js/app.js. Możemy przekazać dowolny z tych parametrów url do obiektu $stateParams i wykorzystać te informacje do innego stanu.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
Stan zagnieżdżony
stan, który może być zagnieżdżony wewnątrz siebie, co oznacza, że stan potomny zostanie renderowany w widoku interfejsu użytkownika ze stanem nadrzędnym.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve to opcja wstępnego załadowania danych dla trasy.
$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'
})
w powyższym kodzie obiekt user załaduje user, a następnie obiekt task, ale tylko wtedy, gdy użytkownik może mieć zadanie. Trasa zostanie załadowana tylko wtedy, gdy wszystkie rozwiązania zakończą się pomyślnie. jeśli pierwsze rozwiązanie nie powiedzie się, drugie nigdy nie zostanie wypróbowane.