Угловой UI-Router - это платформа маршрутизации односторонней страницы на стороне клиента для AngularJS .
Структуры маршрутизации для SPA-центров обновляют URL-адрес браузера, когда пользователь переходит через приложение. И наоборот, это позволяет изменять URL-адрес браузера для навигации по приложению, что позволяет пользователю создавать закладку в месте, расположенном внутри SPA.
Приложения UI-Router моделируются как иерархическое дерево состояний. UI-Router предоставляет конечный автомат для управления переходами между этими состояниями приложения транзакционным образом.
Версии#
| Версия | Дата выхода |
|---|---|
| 0.2.18 | 2016-02-07 |
| 0.2.17 | 2016-01-25 |
| 0.2.16 | 2016-01-24 |
| 0.2.15 | 2016-05-19 |
| 0.2.14 | 2016-04-23 |
| 0.2.13 | 2016-11-20 |
| 0.2.12 | 2016-11-13 |
| 0.2.11 | 2016-08-26 |
| 0.2.10 | 2016-03-12 |
| 0.2.9 | 2014-01-17 |
| 0.2.8 | 2014-01-16 |
index.html
<html> <head> <title>Angular-UI Router Example</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script> <script type="text/javascript" src="../js/script.js"></script> </head> <body ui-view="mainView"> <!-- Defining a container for our view --> </body> </html>
script.js
var app = angular.module('app', ['ui.router']); app.config(['$stateProvider', function($stateProvider){ $stateProvider.state('home', { // Creating a state called 'home' url: '', // An empty URL means that this state will be loaded on the main URL when no other state is called views: { 'mainView': { // Section for our view-container that we defined in the HTML template: '<h1>It works!</h1>' // Setting a template for this view /*templateUrl: '../templates/home.html'*/ //templateUrl would load the file and uses it's content as the template } } }); }])
В ui-router состояние может содержать несколько видов, каждый со своим контроллером и шаблоном<code>''.state('dashboard', { name: 'dashboard', url: '/dashboard', views: { "view1": { templateUrl: "path/to/view1.html", controller: "view1Controller" }, "view2": { templateUrl: "path/to/view2.html", controller: "view2Controller" } } })
Затем внутри HTML вашего состояния вы можете связать эти представления
<div ui-view="view1"></div> <div ui-view="view2"></div>
Привет, мир
ШАГ 1: Установка
Прежде чем вы сможете использовать Angular-UI Router, вы должны включить в свой проект сам AngularJS. Подробное руководство по этому вопросу см. В этой документации .
Вы можете загрузить Angular-UI Router либо с GitHub-страницы, либо с NuGet, NPM, Bower соответственно.
После того, как вы включили JS-файл на свою веб-страницу, вы можете ввести модуль ui.router в свое приложение. В вашем файле сценария должно быть что-то вроде этого:
var app = angular.module('app', []);
и теперь мы собираемся ввести Angular-UI Router в наше собственное приложение следующим образом:
var app = angular.module('app', ['ui.router']);
Теперь Angular-UI Router будет загружен нашим приложением. Следующие шаги объяснят основы Angular-UI Router и покажут некоторые основные функции.
ШАГ 2: Определение простых состояний
Вы можете настроить UI-Router внутри функции «Угловая config . Используйте $stateProvider для определения своих состояний. В следующем примере каждое состояние имеет URL-адрес, контроллер и шаблон.
(function() { var app = angular.module('app', ['ui.router']); app.config(['$stateProvider', function($stateProvider) { $stateProvider .state('home', { url: "/home", templateUrl: "home.html", controller: "homeCtrl" }) .state('kitchen', { url: "/kitchen", templateUrl: "kitchen.html", controller: "kitchenCtrl" }) .state('den', { url: "/denCtrl", templateUrl: "den.html", controller: "denCtrl" }) .state('itemDetail', { url: "/items/:itemName", templateUrl: "item.html", controller: "itemDetailCtrl" }) }]) })();
в вашем HTML, вам понадобится директива ui-view чтобы внутренние представления могли быть заполнены внутри.
<div ui-view></div>
ШАГ 3: Доступ к состояниям
Есть все три способа доступа к состоянию, которое определено в $stateProvider .
1. Через директиву ui-sref
Вы можете получить доступ к состояниям внутри вашего HTML, используя директиву ui-sref
<li ui-sref-active="active"> <a ui-sref="kitchen">Go to the Kitchen</a> </li> <li ui-sref-active="active"> <a ui-sref="den">Enter the den</a> </li> <li ui-sref-active="active"> <a ui-sref="itemDetail({itemName:'keyboard'})">Key Board</a> </li>
2. Через $state службу в контроллере
вы также можете перейти к другим состояниям внутри вашего контроллера, используя $state предоставленное контроллеру с .go метода .go .
.controller(function($scope, $state) { // ... $scope.navigateTo = function(stateName) { $state.go(stateName); // i.e. $state.go('den'); }; })
3. Через URL в браузере
Предполагая, что у вас есть состояние, называемое kitchen определенное следующим образом:
$stateProvider .state("kitchen", { url: "/kitchenUrl", ... });
Затем доступ к appdomain / kitchenUrl в качестве URL-адреса в вашем браузере перейдет в ваше состояние kitchen , предполагая, что нет вложенных состояний, а appdomain - сервер, на котором размещается ваше приложение.
Если вы все еще запутались, вот полностью работающий Plnkr
Разрешение данных в состояние#
Вы можете resolve данные в своем состоянии при переходе на него, как правило, это полезно, когда государство должно использовать эти данные или разрешать в состояние, когда некоторые предоставленные входные данные должны быть аутентифицированы.
Когда вы определяете свои состояния, вам нужно будет предоставить карту значений, подлежащих разрешению, в свойство .resolve , каждое разрешенное значение должно иметь функцию, которая возвращает promise
.state('main', { url: "/main", templateUrl: "path/to/main.html", controller: 'mainCtrl', resolve: { serverData: function ($http) { return $http.get('some/url'); } } });
Теперь внутри mainCtrl вы можете получить доступ к данным (то есть, если успешно разрешен вызов $http ).
.controller("mainCtrl", function($scope, serverData) { $scope.resolvedData = serverData.then(resp=> resp.data); .... })
Использование событий перехода#
UI-Router предоставляет события перехода, которые могут быть полезны для обработки ошибок перехода, обработки / блокировки переходов на основе определенных значений параметров, пользовательской аутентификации и т. Д.
Эти события могут быть привязаны к $rootScope для глобального эффекта или к $scope для каждого эффекта контроллера.
$stateChangeError - это событие транслируется, когда попытка сменить состояние $stateChangeError неудачно и брошена и ошибка, это событие вызывает функцию обратного вызова со следующей подписью:
callback (событие, toState, toParams, fromState, fromParams, ошибка)
event : объект события
toState : целевое состояние
toParams : параметры, переданные в целевое состояние
fromState : текущее состояние
fromParams : параметры, переданные текущему состоянию
ошибка : объект ошибки
$stateChangeStart - это событие транслируется при начале перехода состояния, это событие вызывает функцию обратного вызова со следующей подписью:
callback (событие, toState, toParams, fromState, fromParams, опции)
options : объект опций состояния
$stateChangeSuccess - это событие транслируется при завершении перехода состояния, это событие вызывает функцию обратного вызова со следующей сигнатурой:
callback (событие, toState, toParams, fromState, fromParams, опции)
$stateNotFound - это событие транслируется, когда состояние, к $stateNotFound вы запросили переход, не было найдено, это событие вызывает функцию обратного вызова со следующей подписью:
callback (event, unfoundState, fromParams, fromState)
unfoundState - объект, представляющий состояние, которое не было найдено