Персональный блог Игоря Антонова aka "spider_net"

Красивые URL для angular.js. Убираем хэш тэги


Рубрика: JavaScript -> Angular.JS -> Программирование
Метки: | | | | |
Просмотров: 15451
Красивые URL для angular.js. Убираем хэш тэги

В последний день первого летнего месяца мне хотелось бы поговорить тюнинге 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 автоматически переключится на использование хэш тэга (#) и приложение продолжит работу в штатном режиме.

Оставьте комментарий!
comments powered by HyperComments