Настройка роутинга в Angular JS — не самая сложная штука. Поэтому я лишь предлагаю одно из возможных решений, которое поможет вам придерживаться принципа “don't repeat yourself” при работе с маршрутами.
Во-первых хочу призвать создавать URL-адреса в стиле a-ля REST. Такое соглашение внутри команды пригодиться, когда проект значительно вырастет.
Допустим наш сайт продаёт корм для животных.
Тогда URL’ы будут выглядеть следующим образом:
Список кормов — /#!/dogfoods
Страница “корма” — /#!/dogfood/:id
Какая-то дополнительная информация по корму — /#!/dogfood/:id/details
Если вы не знаете, зачем нужен /#!/ — вам сюда. Если кратко — такие ссылки считаются seo-френдли для аяксовых сайтов.
Теперь давайте поговорим о том, что я считаю “сухим” роутингом. Всё просто — это когда url’ы лежат в константах. Вот и вся идея.
Для этого достаточно положить список url’ов в .constant. Назовём его ROUTES.
Теперь конфигурируем роутинг:
Окей, должно работать. Возможно сейчас это и выглядит излишне, но сейчас мы будем использовать наши константы повторно.
Например главное меню нашего сайта. В html-шаблоне пишем просто:
Ну как, обретает всё смысл? Теперь все урлы в одном месте, меньше работы руками в если надо будет что то переименовать. Да и появляется поддержка со стороны IDE.
Ах да, небольшой момент. Поскольку мы не знаем в каком scope нам понадобятся константы url’ов, нам надо положить их в rootScope. Лично мне это не кажется загрязнением скопов — URL'ам там самое место.
Сделать это можно например так:
Так же я предлагаю завести себе такой вот сервис:
Название сервиса redirectFactory говорит само за себя — делать редиректы, например из контроллера, или других сервисов, например при авторизации, логауте и т.п.
Так, я уже вижу что в меня летят какашки. Действительно, как быть с параметризироваными урлами? Тут нам на помощь придут фильтры.
Допустим параметром у нас будет язык. Например я хочу получить url’ы вида /#!/eng/dogfoods.
Модифицируем наши константы ROUTES:
Создадим фильтр routeFilter:
Отлично, теперь делаем просто вот так:
Правда после этого фильтр придётся применять и в js.
Например вот так будет выглядеть наш сервис redirectFactory:
Вот пожалуй и всё.
Чего сейчас не хватает Angular JS, так это сборника рецептов и best practice. Уверен, что всё можно обыграть более изящно, ведь всегда есть куда стремиться, так? Но я просто хотел добавить ещё один рецепт в копилку. Надеюсь что описное мной вам пригодиться.
Во-первых хочу призвать создавать URL-адреса в стиле a-ля REST. Такое соглашение внутри команды пригодиться, когда проект значительно вырастет.
Допустим наш сайт продаёт корм для животных.
Тогда URL’ы будут выглядеть следующим образом:
Список кормов — /#!/dogfoods
Страница “корма” — /#!/dogfood/:id
Какая-то дополнительная информация по корму — /#!/dogfood/:id/details
Если вы не знаете, зачем нужен /#!/ — вам сюда. Если кратко — такие ссылки считаются seo-френдли для аяксовых сайтов.
Теперь давайте поговорим о том, что я считаю “сухим” роутингом. Всё просто — это когда url’ы лежат в константах. Вот и вся идея.
Для этого достаточно положить список url’ов в .constant. Назовём его ROUTES.
.constant('ROUTES', (function () {
return {
DOGFOODS: '/dogfoods',
DOGFOOD: '/dogfood/:id',
DOGFOOD_DETAILS: '/dogfood/:id/details'
}
})())
Теперь конфигурируем роутинг:
.config(['$routeProvider', 'ROUTES', function ($routeProvider, ROUTES) {
var pathToIncs = '/pages/'; //папка, в которой лежат шаблоны
$routeProvider.when(ROUTES.DOGFOODS, {templateUrl: pathToIncs + 'dogfoods.html', controller: 'dogfoodsCtrl'});
$routeProvider.when(ROUTES.DOGFOOD, {templateUrl: pathToIncs + 'dogfood.html', controller: 'dogfoodCtrl'});
$routeProvider.when(ROUTES.DOGFOOD_DETAILS, {templateUrl: pathToIncs + 'dogfood_details.html', controller: 'dogfoodsDetailsCtrl'});
}])
Окей, должно работать. Возможно сейчас это и выглядит излишне, но сейчас мы будем использовать наши константы повторно.
Например главное меню нашего сайта. В html-шаблоне пишем просто:
<a href="ROUTES.DOGFOODS">Dogfoods list</a>
Ну как, обретает всё смысл? Теперь все урлы в одном месте, меньше работы руками в если надо будет что то переименовать. Да и появляется поддержка со стороны IDE.
Ах да, небольшой момент. Поскольку мы не знаем в каком scope нам понадобятся константы url’ов, нам надо положить их в rootScope. Лично мне это не кажется загрязнением скопов — URL'ам там самое место.
Сделать это можно например так:
.run(['$rootScope', 'ROUTES', function ($rootScope, ROUTES) {
$rootScope.ROUTES = ROUTES;
}])
Так же я предлагаю завести себе такой вот сервис:
factory('redirectFactory', ['$location', 'ROUTES', function ($location, ROUTES) {
return {
goDogfoods: function () {
$location.path(ROUTES.DOGFOODS);
}
};
}])
Название сервиса redirectFactory говорит само за себя — делать редиректы, например из контроллера, или других сервисов, например при авторизации, логауте и т.п.
Так, я уже вижу что в меня летят какашки. Действительно, как быть с параметризироваными урлами? Тут нам на помощь придут фильтры.
Допустим параметром у нас будет язык. Например я хочу получить url’ы вида /#!/eng/dogfoods.
Модифицируем наши константы ROUTES:
.constant('ROUTES', (function () {
var langParam = '/:lang';
return {
DOGFOODS: langParam + '/dogfoods',
...
}
})())
Создадим фильтр routeFilter:
.filter('routeFilter', ['$filter', function ($filter) {
return function (route) {
var langParam = '/:lang';
var langVal = ‘/*тут мы подставляем параметр*/’;
return route.replace(langParam, langParam.replace(langParam, '/' + langVal));
};
}])
Отлично, теперь делаем просто вот так:
<a href="/#!{{ROUTES.DOGFOODS | routeFilter}}">Dogfoods list</a>
Правда после этого фильтр придётся применять и в js.
Например вот так будет выглядеть наш сервис redirectFactory:
.factory('redirectFactory', ['$location', 'ROUTES', '$filter', function ($location, ROUTES, $filter) {
var 'routeFilter' = $filter('routeFilter');
return {
goDogfoods: function () {
$location.path(routeFilter(ROUTES.DOGFOODS));
},
...
}])
Вот пожалуй и всё.
Заключение
Чего сейчас не хватает Angular JS, так это сборника рецептов и best practice. Уверен, что всё можно обыграть более изящно, ведь всегда есть куда стремиться, так? Но я просто хотел добавить ещё один рецепт в копилку. Надеюсь что описное мной вам пригодиться.