DRY роутинг в AngularJS

Настройка роутинга в 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 ($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. Уверен, что всё можно обыграть более изящно, ведь всегда есть куда стремиться, так? Но я просто хотел добавить ещё один рецепт в копилку. Надеюсь что описное мной вам пригодиться.