Красивые URL для angular.js. Убираем хэш тэги
Рубрика: JavaScript -> Angular.JS -> Программирование
Метки: framework | history api | html5 | JavaScript | программирование | советы
Просмотров: 15199
В последний день первого летнего месяца мне хотелось бы поговорить тюнинге URL в Angular.js приложениях. Если ничего не менять в настройках, то angular.js по умолчанию будет применять в url хеш тэг (#) для разделения пути. Например, http://mysite/#/about. Такой стиль отображения URL во многих случаях не подходит и разработчику обязательно захочется навести красоту, вырезав этот неуместный хэш-тэг. К счастью, это сделать совсем не трудно.
Удаляем # из url в angular.js
Удалить хэш тэг из ссылки в angular.js приложении - путь из двух шагов. Необходимо лишь сконфигурировать $locationProvider и установить базовый url для относительных ссылок.
Перед тем как приступить к тюнингу напомню, что за разбор URL в angular.js отвечает сервис $location. Перед тем как двигаться дальше, настоятельно рекомендую заглянуть в официальную документацию и познакомиться с деталями.
Для достижения поставленной цели потребуется сконфигурировать $locationProvider и намекнуть ему о использовании HTML5 History API. На практике это будет выглядеть так:
angular.module('mymodule', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'rootdir/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'rootdir/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'rootdir/contact.html',
controller : mainController
});
$locationProvider.html5Mode(true);
});
Конфигурирование роутов выглядит вполне прозрачно. Теперь зададим базовый URL для относительных ссылок. Для этого воспользуемся тегом
. Смотрим пример:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
Все, хэш тэг больше не должен омрачать своим присутствием адресную строку. HTML5 History API прекрасно работает в новых браузерах, но что будет если к нашему приложению обратится юзер из бродилки, не поддерживающей History API? Все поломается? Ни в коем случае! Сервис $location автоматически переключится на использование хэш тэга (#) и приложение продолжит работу в штатном режиме.
