=====Начало работы с угловым ui-маршрутизатором=====
[[https://github.com/angular-ui/ui-router|Угловой UI-Router]] - это платформа маршрутизации [[https://angularjs.org/|односторонней]] страницы на стороне клиента для [[https://angularjs.org/|AngularJS]] .
Структуры маршрутизации для SPA-центров обновляют URL-адрес браузера, когда пользователь переходит через приложение. И наоборот, это позволяет изменять URL-адрес браузера для навигации по приложению, что позволяет пользователю создавать закладку в месте, расположенном внутри SPA.
Приложения UI-Router моделируются как иерархическое дерево состояний. UI-Router предоставляет конечный автомат для управления переходами между этими состояниями приложения транзакционным образом.
Взято с [[https://github.com/angular-ui/ui-router|страницы]] UI-Router [[https://github.com/angular-ui/ui-router|Github]]
===== =====
Версии[[https://riptutorial.com/ru/angular-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
Angular-UI Router Example
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: 'It works!
' // 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 состояние может содержать несколько видов, каждый со своим контроллером и шаблоном''.state('dashboard', {
name: 'dashboard',
url: '/dashboard',
views: {
"view1": {
templateUrl: "path/to/view1.html",
controller: "view1Controller"
},
"view2": {
templateUrl: "path/to/view2.html",
controller: "view2Controller"
}
}
})
Затем внутри HTML вашего состояния вы можете связать эти представления
Привет, мир
**ШАГ 1: Установка**
Прежде чем вы сможете использовать Angular-UI Router, вы должны включить в свой проект сам AngularJS. Подробное руководство по этому вопросу см. В этой [[https://riptutorial.com/fr/angularjs/example/1054/getting-started|документации]] .
Вы можете загрузить Angular-UI Router либо с [[https://github.com/angular-ui/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'' чтобы внутренние представления могли быть заполнены внутри.
----
**ШАГ 3: Доступ к состояниям**
Есть все три способа доступа к состоянию, которое определено в ''$stateProvider'' .
**1. Через директиву ''ui-sref'' **
Вы можете получить доступ к состояниям внутри вашего HTML, используя директиву ''ui-sref''
Go to the Kitchen
Enter the den
Key Board
**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'' - сервер, на котором размещается ваше приложение.
Если вы все еще запутались, вот полностью работающий [[http://plnkr.co/edit/y67KK9gZ5NdIMbMrBF6s?p=preview//|Plnkr]]
Разрешение данных в состояние[[https://riptutorial.com/ru/angular-ui-router#-----------------------------|#]]
Вы можете ''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);
....
})
Использование событий перехода[[https://riptutorial.com/ru/angular-ui-router#------------------------------|#]]
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// - объект, представляющий состояние, которое не было найдено