URL generation for defined routes / Use routing service to both map and generate URLs

[slavafomin]

Hello, right now $routeProvider from ngRoute is used to setup routes for application.

It looks like this:

$routeProvider
    .when('/', {
        redirectTo: '/foo'
    })
    .when('/foo', {
        controller: 'FooCtrl',
        templateUrl: '/partials/foo',
    })
    .when('/foo/bar', {
        controller: 'FooBarCtrl',
        templateUrl: '/partials/foo-bar',
    })
;

And in the HTML we have to use code like this:

<a href="/foo">Foo</a>
<a href="/foo/bar">Foo's Bar</a>

The problem is, that this approach is breaking DRY principle. We have to specify URL's in two places: first in route definition when('/foo', ...) second in href attribute of HTML page. It gets complicated pretty fast when you have lots of routes and complex URLs and you trying to refactor it somehow.

The better approach is to use single service to both map and generate URLs. This service can be configured like this:

$routeProvider
    .when('root', '/', {
        redirectTo: '/foo'
    })
    .when('foo', '/foo', {
        controller: 'FooCtrl',
        templateUrl: '/partials/foo',
    })
    .when('foo-bar', '/foo/bar', {
        controller: 'FooBarCtrl',
        templateUrl: '/partials/foo-bar',
    })
;

And HTML could look like this:

<a ng-href="foo | route">Foo</a>
<a ng-href="foo-bar | route">Foo's Bar</a>

And both foo | route and foo-bar | route will be replaced by proper URLs generated with the help of routing service.

This is exactly how routing implemented in Symfony 2 framework for example.

Of course, this routing service can be implemented by the end-developers, but I think the whole community will benefit greatly if it will be included in the ngRoute. In the end, this is a good practice to keep things DRY.

Thank you! I hope I'm not duplicating issues.

[epitka]

I would be great if something like that was built in. In the mean time I implemented something similar to what you need (I think). Here is the code.

Setup routes and assign name to each one:

(function() {

    'use strict';

    var app = angular.module('app');

    // Collect the routes
    app.constant('routes', getRoutes());

    // Configure the routes and route resolvers
    app.config(['$routeProvider', 'routes', routeConfigurator]);

    function routeConfigurator($routeProvider, routes) {

        routes.forEach(function (r) {
            $routeProvider.when(r.url, r.config);
        });
        $routeProvider.otherwise({ redirectTo: '/insureds/search' });
    }

    // Define the routes 
    function getRoutes() {
        return [
            {
                name:'InsuredsSearchView',
                url:'/insureds/search',
                config: {
                    templateUrl: 'app/insured/search/inSearch.html',
                    reloadOnSearch: false,
                    settings:{}
                }
            },
            {
                name:'InsuredProfileSummary',
                url: '/insureds/:insuredId/profile/summary',
                config: {
                    templateUrl: 'app/insured/profile/summary/inProfileSummary.html',
                    reloadOnSearch: false,
                    settings:{}
                }
            },
            {
                name: 'InsuredEdit',
                url: '/insureds/edit/:insuredId',
                config: {
                    templateUrl: 'app/insured/edit/insuredEdit.html',
                    reloadOnSearch: false,
                    settings: {}
                }
            },
             {
                 name: 'InsuredAdd',
                 url: '/insureds/add/',
                 config: {
                     templateUrl: 'app/insured/edit/insuredEdit.html',
                     reloadOnSearch: false,
                     settings: {}
                 }
             },
             {
                 name: 'DirectCoverageAdd',
                 url: '/insureds/:insuredId/coverages/add',
                 config: {
                     templateUrl: 'app/insured/coverage/edit/inAddDirectCoverage.html',
                     reloadOnSearch: false,
                     settings: {}
                 }
             }

        ];
    }

})();

Create route service that would give me path, templateUrl etc. based on the name of the route (I use undersocrejs for filtering)

(function () {
    'use strict';

    var serviceId = 'routesSvc';

    angular.module('app').factory(serviceId, ['$location', 'routes', routesSvc]);

    function routesSvc($location, routes) {
        // Define the functions and properties to reveal.
        var service = {
            getPath: getPath,
            navigateTo: navigateTo,
            getTemplateUrl: getTemplateUrl
        };

        return service;

        function getPath(routeName, routeParameters) {

            var route = _.findWhere(routes, { name: routeName });

            var qParameterKeys = [];

            var path = route.url;

            for (var key in routeParameters) {
                if (path.indexOf(":" + key) == -1) {
                    qParameterKeys.push(key);
                } else {
                    path = path.replace(":" + key, routeParameters[key]);
                }
            }

            if (qParameterKeys.length > 0) {
                path = path + "?";
                key = qParameterKeys[0];
                path = path + key + "=" + routeParameters[key];

                for (var i = 1; i < qParameterKeys.length; i++) {
                    key = qParameterKeys[0];
                    path = path +'&'+ key + "=" + routeParameters[key]; 
                }

            }
        return  path;
    }

    function navigateTo(routeName, routeParameters) {
        $location.url(getPath(routeName, routeParameters));
    }

    function getTemplateUrl(routeName) {
        var route = _.findWhere(routes, { name: routeName });

        if (route !== undefined) {
            return route.config.templateUrl;
        }
        return "";
    }
}
})();

You can define helper method to be available on the scope like this

(function () {
    'use strict';

    var app = angular.module('app');

    app.run(function ($rootScope, routesSvc) {

        $rootScope.getPath = function (routeName, parameters) {
            return routesSvc.getPath(routeName, parameters);
        };

        $rootScope.navigateTo = function(routeName, parameters) {
            routesSvc.navigateTo(routeName, parameters);
        };

        $rootScope.getTemplateUrl = function(routeName) {
            routesSvc.getTemplateUrl(routeName);
        };
    });
})();

And now in html you don't have to use href

<a data-ng-href="#{{getPath('InsuredProfileSummary',{insuredId:result.insuredId})}}">{{result.lastName}}, {{result.firstName}} {{result.middleInitial}}</a>

And in the controller you can use same service

 $scope.navigateTo("DirectCoverageAdd", { insuredId: payload.insuredId });

I hope this helps you.

[slavafomin]

Thank you @epitka for a great example!

By the way, the length of code and overall complexity of this example is a good demonstration of why this functionality ought to be implemented in the core modules = )

[slavafomin]

I've created several libraries and a module for AngularJS to solve this problem. At least for a time being, before this functionality will be implemented with ngRoute itself.

Here's the AngularJS module: ngRouter that can be used as a transparent extension for ngRoute. It allows you to generate URLs based on route definitions. You just have to replace $routeProvider with shipped routerProvider and specify names for routes that you want to generate URLs for.

Documentation has all the details. I hope it will help someone out there.

Cheers!

[Narretz]

Essentially duplicate of #1791. Note that there are no plans to implement this at this point, since uiRouter already has all these features.