Настройка роутинга в Angular JS — не самая сложная штука. Поэтому я лишь предлагаю одно из возможных решений, которое поможет вам придерживаться принципа “don't repeat yourself” при работе с маршрутами.
Во-первых хочу призвать создавать 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 (localeFactory, $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. Уверен, что всё можно обыграть более изящно, ведь всегда есть куда стремиться, так? Но я просто хотел добавить ещё один рецепт в копилку. Надеюсь что описное мной вам пригодиться.
Автор: Light241