AngularJS UrlHelper module samples

var module = angular.module('demo-urls', ['ngRoute', 'urlHelper']);

module.config(function ($routeProvider) {
    $routeProvider.when("/",
    {
        name: "main",
        controller: "mainController",
        templateUrl: "main.html",
    }).when("/page1",
    {
        name: "page1",
        controller: "page1Controller",
        templateUrl: "app/views/page1.html",
    }).when("/page1/:param",
    {
        name: "page1",
        controller: "page1Controller",
        templateUrl: "app/views/page1.html",
    }).when("/page2",
    {
        name: "page2",
        controller: "page2Controller",
        templateUrl: "app/views/page2.html",
    }).otherwise({ redirectTo: "/" });
});

module.controller('mainController', function($scope) {
  $scope.name = 'default';
});

<!DOCTYPE html>
<html ng-app="demo-urls">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Url Helper</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script src="https://code.angularjs.org/1.2.16/angular-route.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="app.js"></script>
    <script src="urls.js"></script>
  </head>

  <body ng-view>
  </body>

</html>

/* Put your css in here */

// AngularJS - Url Helper Module 1.0.0
// (c) Sébastien Ollivier - http://sebastienollivier.fr/blog/angularjs/urlhelper-module

(function () {
    'use strict';

    angular.module('urlHelper', [])
        .factory("urlService", ["$route", "$exceptionHandler", function ($route, $exceptionHandler) {
            var self = this;

            self.routes = _.sortBy(
                            _.map(
                                _.filter($route.routes, function (route) {
                                    return route.name;
                                }),
                            function (route) {
                                return { name: route.name, path: route.originalPath, keys: route.keys }
                            }),
                        function (route) {
                            return route.keys.length;
                        });

            return {
                urlFor: function (routeName, params) {
                    var eligibleRoutes = _.filter(self.routes, function (route) {
                        return route.name == routeName;
                    });

                    for (var i = eligibleRoutes.length - 1; i >= 0; i--) {
                        var eligibleRoute = eligibleRoutes[i];
                        var computedRoute = eligibleRoute.path;
                        var match = true;

                        for (var j = 0; j < eligibleRoute.keys.length; j++) {
                            var key = eligibleRoute.keys[j].name;

                            if (params && params[key]) {
                                computedRoute = computedRoute.replace(":" + key, params[key]);
                            } else {
                                match = false;
                                break;
                            }
                        }

                        if (match) {
                            return computedRoute;
                        }
                    }

                    $exceptionHandler("Route '" + routeName + "' not found for parameters : " + params);
                }
            };
        }])
        .filter("url", ["urlService", function (urlService) {
            return function (routeName, params) {
                return urlService.urlFor(routeName, params);
            }
        }])
        .directive('urlFor', ['urlService', function (urlService) {
            return {
                restrict: 'EA',
                scope: {
                  urlForParams : "="
                },
                link: function (scope, element, attrs) {
                    var url = urlService.urlFor(attrs.urlFor, scope.urlForParams);
                    element.html(url);
                }
            };
        }])
        .directive('urlForHref', ['urlService', function (urlService) {
            return {
                restrict: 'A',
                scope: {
                  urlForParams : "="
                },
                link: function (scope, element, attrs) {
                    var url = urlService.urlFor(attrs.urlForHref, scope.urlForParams);
                    attrs.$set('href', url);
                }
            };
        }]);
})();

<p>Name : <input type="text" ng-model="name" /></p>
    <hr />
    <p>Filter without param : {{ 'page1' | url }}</p>
    <p>Filter with param : {{ 'page1' | url:{param: name} }}</p>
    <p>Link filter with param : <a href="{{ 'page1' | url:{param: name} }}">Page1 Link</a></p>
    <br />
    <p>Directive without param : <span url-for='page1'></span></p>
    <p>Directive with param : <span url-for='page1' url-for-params="{param: name}"></span></p>
    <br />
    <p>Directive href without param : <a url-for-href='page1'>Page1 Link</a></p>
    <p>Directive href with param : <a url-for-href='page1' url-for-params="{param: name}">Page1 Link</a></p>