angular-ra-route

AngularJS Module: route

Added by: Sam Deering

GitHub

Repository

red-ant/angular-ra-route

Stats

Stars: 0

Watchers: 0

Forks: 0

Author

Red Ant
Red Ant

Module Description

angular-ra-route

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('index').
      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';
  });

route

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.show, recipe, true">Jerked chicken recipe</a>
<!-- Will become -->
<a href="/recipes/21?name=Jerked+chicken">Jerked chicken recipe</a>

route-params

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
</a>
<!-- Will become -->
<a href="/recipes/34/edit/chicken">
  Edit chicken recipe: Jerked chicken
</a>

route-search

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
</a>
<!-- Will become -->
<a href="/recipes/34/edit/chicken?page=2">
  Edit chicken recipe: Jerked chicken
</a>

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 README.md"
  • 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

Module stats last updated: 2015-04-19 02:59:29

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!