AngularJS Module: route
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


AngularJS Module: route

route directive

The route directive allows for easy setting of anchor hrefs utilising the Route service.

The following basic AngularJS app will be used throughout the examples, so take heed.

angular.module('MyCoolApp', ['ra.route']).
  config(function(RouteProvider) {
    RouteProvider.base('recipes', '/recipes').
      when('edit',      '/:id/edit').
      when('edit-type', '/:id/edit/:category').
      when('show',      '/:id');
  controller('Recipe', function($scope) {
    $scope.recipe = {
      id: 21,
      name: 'Jerked chicken'
    $scope.category = 'chicken';


Please note: all the following route-* attributes are reliant on this directive.

The easiest and dirtiest method, which will cover the majority of cases.

In the form of route="lookup_key[, params[, append_query]]"

  • lookup_key: the key specified in the RouteProvider
  • object: object to replace parameter placeholders
  • append_query: any leftover parameters will be appended as a query string
<a route="recipe.index">Recipe index</a>
<!-- Will become -->
<a href="/recipes">Recipe index</a>

<a route="recipe.edit, recipe">Edit: Jerked chicken</a>
<!-- Will become -->
<a href="/recipes/21/edit">Edit: Jerked chicken</a>

<a route=", recipe, true">Jerked chicken recipe</a>
<!-- Will become -->
<a href="/recipes/21?name=Jerked+chicken">Jerked chicken recipe</a>


The param and append_query options in the route directive are not well thought out, and probably should be refactored. If the params is in object notation e.g. { id: 1, ... }, you will have to use the route-params attribute.

<a route="recipe.edit-type" route-params="{ id: 34, type: category }">
  Edit {{ category }} recipe: Jerked chicken
<!-- Will become -->
<a href="/recipes/34/edit/chicken">
  Edit chicken recipe: Jerked chicken


You can append a search query using this attribute.

<a route="recipe.edit-type" route-params="{ id: 34, type: category }" route-search="{ page: 2 }">
  Edit {{ category }} recipe: Jerked chicken
<!-- Will become -->
<a href="/recipes/34/edit/chicken?page=2">
  Edit chicken recipe: Jerked chicken

grunt tasks

  • Make sure grunt is installed npm -g install grunt-cli and npm install
  • Make your changes in src/
  • Run grunt build to fire tests, clean, concat, and minify.
  • If all went well, commit your changes. git commit -am "Update"
  • Run grunt bump to increment versions in package + bower, includes another commit + push.
    • grunt bump and grunt bump:patch will increment v0.0.1 to v0.0.2
    • grunt bump:minor will increment v0.0.1 to v0.1.0
    • grunt bump:major will increment v0.0.1 to v1.0.0