Описание тега angular-routing
AngularJSмаршруты позволяют создавать разные URL-адреса для разного контента в вашем приложении. Наличие разных URL-адресов для разного контента позволяет пользователю добавлять в закладки URL-адреса для определенного контента и отправлять эти URL-адреса друзьям и т. Д. В AngularJS каждый такой URL-адрес, добавляемый в закладки, называется маршрутом.
AngularJSroutes позволяют отображать различный контент в зависимости от того, какой маршрут выбран. Маршрут указывается в URL после#подписать. Таким образом, все следующие URL-адреса указывают на один и тот жеAngularJS приложение, но каждый указывает на разные маршруты:
http://myangularjsapp.com/index.html#books
http://myangularjsapp.com/index.html#albums
http://myangularjsapp.com/index.html#games
http://myangularjsapp.com/index.html#apps
Когда браузер загружает эти ссылки, будет загружено то же приложение AngularJS (расположенное по адресу http://myangularjsapp.com/index.html), но AngularJS будет смотреть на маршрут (часть URL-адреса после #) и решать, что HTML-шаблон для показа.
На данный момент это может показаться немного абстрактным, поэтому давайте посмотрим на полностью рабочий пример маршрута AngularJS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routes example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="sampleApp">
<a href="#/route1">Route 1</a><br/>
<a href="#/route2">Route 2</a><br/>
<div ng-view></div>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("RouteController", function($scope) {
})
</script>
Каждая часть этого примера приложения будет объяснена в следующих разделах.
Включение модуля маршрута AngularJS
Первое, на что следует обратить внимание в приведенном выше примере приложения, - это дополнительный JavaScript, включенный в раздел заголовка:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
Модуль AngularJS Route содержится в собственном файле JavaScript. Чтобы использовать его, мы должны включить его в наше приложение AngularJS.
Объявление зависимости от модуля маршрута AngularJS
Второе, на что следует обратить внимание, это то, что модуль приложения AngularJS (называемый sampleApp) декларирует зависимость от модуля маршрута AngularJS:
var module = angular.module("sampleApp", ['ngRoute']);
Модуль приложения должен объявить эту зависимость, чтобы использовать модуль ngRoute. Это объясняется более подробно в моем руководстве по модульности и внедрению зависимостей, в разделе о зависимостях между модулями.
Директива ngView
Третье, на что следует обратить внимание в приведенном выше примере, - это использование директивы ngView:
<div ng-view></div>
Внутри div с директивой ngView (также может быть написано ng-view) будет отображаться HTML-шаблон, специфичный для данного маршрута.
Настройка $routeProvider
Четвертое, на что следует обратить внимание в примере, показанном в начале этого текста, - это конфигурация $routeProvider. В$routeProviderэто то, что создает сервис $ route. Настроив$routeProvider перед $route сервис создан, мы можем установить, какие маршруты должны приводить к отображению HTML-шаблонов.
Вот код из примера:
<script>
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
</script>
В $routeProviderнастраивается в функции config() модуля. Мы передаем функцию конфигурации в функцию config() модуля, которая принимает $routeProvider в качестве параметра. Теперь внутри этой функции мы можем настроить $routeProvider.
В $routeProvider настраивается через вызовы функций when() и иначе ().
Функция when() принимает в качестве параметров путь маршрута и объект JavaScript.
Путь маршрута сопоставляется с частью URL-адреса после # при загрузке приложения. Как видите, два пути маршрута, переданные двум вызовам функции when(), совпадают с двумя путями маршрута в атрибуте href ссылок в том же примере.
Объект JavaScript содержит два свойства с именами templateUrl и controller. Свойство templateUrl сообщает, какой HTML-шаблон AngularJS должен загружать и отображать внутри div с помощью директивы ngView. Свойство контроллера сообщает, какие из ваших функций контроллера следует использовать с шаблоном HTML.
Функция else() принимает объект JavaScript. Этот объект JavaScript сообщает AngularJS, что он должен делать, если ни один путь маршрута не соответствует данному URL-адресу. В приведенном выше примере браузер перенаправляется на тот же URL-адрес с #/ в качестве пути маршрута.
Ссылки на маршруты
Последнее, на что следует обратить внимание в этом примере, - это две ссылки на HTML-странице:
<a href="#/route1">Route 1</a><br/>
<a href="#/route2">Route 2</a><br/>
Обратите внимание, как часть URL-адресов после # соответствует маршрутам, настроенным в $routeProvider.
При нажатии на одну из этих ссылок URL-адрес в окне браузера изменяется, и в div с директивой ngView отображается шаблон HTML, соответствующий пути маршрута.
Параметры маршрута
Вы можете вставлять параметры в путь маршрута. Вот пример параметра пути маршрута AngularJS:
#/books/12345
Это URL-адрес, в котором указан путь маршрута. Фактически, он в значительной степени состоит только из пути маршрута. Часть параметра - это 12345, который представляет собой конкретный идентификатор книги, на которую указывает URL.
AngularJS может извлекать значения из пути маршрута, если мы определяем параметры в путях маршрута при настройке $routeProvider. Вот предыдущий пример $routeProvider, но с параметрами, вставленными в пути маршрута:
<script>
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1/:param', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2/:param', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
</script>
Оба URL-адреса в вызовах when() теперь определяют параметр. Это часть, начинающаяся с двоеточия (:param)
AngularJS теперь будет извлекать из URL-адреса (пути маршрута) все, что идет после #/route1/ part. Таким образом, из этого URL:
#/route1/12345
Значение 12345 будет извлечено как параметр.
Функции вашего контроллера могут получить доступ к параметрам маршрута через службу AngularJS $routeParams следующим образом:
module.controller("RouteController", function($scope, $routeParams) {
$scope.param = $routeParams.param;
})
Обратите внимание, как функция контроллера принимает службу $routeParams в качестве параметра, а затем копирует параметр с именем param в свойство $ scope.param. Теперь ваши представления AngularJS могут получить к нему доступ, или вы можете использовать его в вызовах AJAX и т. Д.
Вот полный пример параметра маршрута AngularJS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routes example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="sampleApp">
<a href="#/route1/abcd">Route 1 + param</a><br/>
<a href="#/route2/1234">Route 2 + param</a><br/>
<div ng-view></div>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1/:param', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2/:param', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("RouteController", function($scope, $routeParams) {
$scope.param = $routeParams.param;
})
</script>
</body>
</html>