Angular NgRoute UrlFor helper via Directive

README.md

Rails style helpers for URL

Sometimes we need changes in urls.
Sometimes number of changing urls is huge.

With this scheme we can store our URLS in constant Service.
And get it by the key & params from UrlService.

At the end, here i'm using Directive to optimize Angular's "Dirty Checking".

  a(rt-href="organization" data-params="{{organizationId}}") Some Link

app.coffee

# MSIE Angular check
window.msie = parseInt((/msie (\d+)/.exec(navigator.userAgent.toLowerCase()) || [])[1])
if isNaN(window.msie)
  window.msie = parseInt((/trident\/.*; rv:(\d+)/.exec(navigator.userAgent.toLowerCase()) || [])[1])
  
angular.module('app',['app.controllers','app.services','app.routes','app.directives','app.config','app.templates'])

index.jade

doctype html
html(lang='en', ng-app='app')
  head
    title Some Title
  body
    li
      a(rt-href="organization" data-params="{{organizationId}}")
        i.icon-picture
        | OrganizationsShow

OrganizationsRoute.coffee

'use strict';

angular.module('app.routes', ['ngRoute', 'app.config'])
.config(['$routeProvider', 'ROUTES', ($routeProvider, ROUTES) ->
    $routeProvider

    # Organizations

    .when(ROUTES.organizations, {
        templateUrl: '/templates/organizations/index.html',
        controller: 'OrganizationsCtrl',
        controllerAs: 'orgs',
        resolve: {
          some: ['$route', ($route) ->
            console.log $route.current.params
          ]
        }
      })
    .when(ROUTES.organization, {
        templateUrl: '/templates/organizations/show.html',
        controller: 'OrganizationsShowCtrl',
        controllerAs: 'org'
      })
    .when(ROUTES.organization_edit, {
        templateUrl: '/templates/organizations/edit.html',
        controller: 'OrganizationsEditCtrl',
        controllerAs: 'org'
      })
    .when(ROUTES.organization_new, {
        templateUrl: '/templates/organizations/new.html',
        controller: 'OrganizationsNewCtrl',
        controllerAs: 'org'
      })

RoutesConfig.coffee

'use strict';

angular.module('app.config', [])
.constant 'ROUTES', {
    index: '/'

    # Organizations

    organizations: '/organizations'
    organization: "/organizations/:organizationId"
    organization_edit: "/organizations/:organizationId/edit"
    organization_new: "/organizations/new"

    # Nodes

    organization_nodes: "/organizations/:organizationId/nodes"
    organization_node: "/organizations/:organizationId/nodes/:nodeId"

    settings: '/settings'

  }

rtHref.coffee

'use strict';

angular.module('app.directives')
.directive 'rtHref', ['UrlService', (UrlService) ->
  link = (scope, element, attr) ->
    propName = 'href'
    name = 'href'
    route = attr.rtHref

    if toString.call(element.prop(name)) is '[object SVGAnimatedString]'
      name = 'xlinkHref'
      attr.$attr[name] = 'xlink:href'
      propName = null

    attr.$observe 'params', (value) ->
      unless value
        attr.$set(name, null)
        return

      request = value.split(',')

      path = UrlService[route](request)

      attr.$set name, path

      if msie && propName
        element.prop(propName, attr[name])

  return {
    restrict: 'A'
    priority: 99
    link: link
  }
]

# DEPRECATED $compile example
#angular.module('app.directives', ['app.services'])
#.directive 'rtHref', ['$compile', 'UrlService', ($compile, UrlService) ->
  #return {
    #terminal: true
    #priority: 1001
    #compile: (el) ->
      #query = el.attr('rt-href').split(',')
      #el.removeAttr('rt-href')
      #path = UrlService.path(query[0], query)
      #el.attr('ng-href', path)
      #fn = $compile(el)
      #return (scope) ->
        #fn(scope)
  #}
#]

UrlService.coffee

'use strict';

angular.module('app.services', ['app.config'])
.service 'UrlService', ['ROUTES', (ROUTES) ->
  regex = /:[a-zA-Z0-9\_]+/g
  
  new class UrlService
    # Generate methods
    _.each ROUTES, (route, method) ->
      UrlService.prototype[method] = (args) ->
        if Array.isArray(args)
          path = route.replace regex, () ->
            args.shift() if args.length > 0
          "##{path}"
    
    # DEPRECATED
    path: (name, args) ->
      path = ROUTES[name]
      matches = path.match(regex)
      _.each args, (value, index) ->
        return if index == 0
        path = path.replace(matches[index-1], value)
      "##{path}"