ngRouteNames

- AngularJS Named Routes

A route provider and ng-href add-on for advanced routing and mobile device support
The goto directive depends on Angular Gesture so the links are responsive on all mobile devices

Installing

1. Open bower.json or components.json
2. Add "ngRouteNames": "~1.1.1" to your dependency list
3. Run bower install
4. In your application you can now add: (depending on what you need)
   • <script src="components/ngRouteNames/ngRouteNames.js"></script>
   • <script src="components/ngRouteNames/directive/goto.js"></script>

Defining Routes

Routes are defined in the same way as regluar AngularJS routes with the following differences:

1. Use of $routeNamesProvider in replacement of $routeProvider
2. Supplying a name for the route
3. Provides a promise that is resolved once navigation is complete

Example 1:

angular.module('ExampleApp', ['ngRouteNames'])

.config(['$routeNamesProvider', '$locationProvider', function ($routeProvider) {

  $routeProvider
    .when('/', {
      templateUrl: 'views/view1.html',
      name: 'home'
    })
    .when('/view2', {
      templateUrl: 'views/view2.html',
      name: 'view2'
    })
    .when('/:user/view3', {
      templateUrl: 'views/view3.html',
      name: 'view3'
    })
    .when('/:user/view4', {
      templateUrl: 'views/view4.html',
      name: 'view4'
    })
    .otherwise({
      redirectTo: '/'
    });

    $routeProvider.activeClass = 'is-active';	// This is the default

}]).

controller('SomeCtrl', ['$scope', '$route', '$http', function ($scope, $route, $http) {
	$scope.funcToCall = function() {
		// Simple:
		$route.to.view4();

		// defining params and search params (both optional)
		$route.to.view4({
				user: 'steve'
			},
			{
				using: 'search',
				params: 'is optional too'
		});

        // Promises:
        $route.to.view4().then(function() {
            // Update elements on the page or trigger functions.
            // Great for things like using HTML5 fullscreen where
            // Updating the route after making an element
            // fullscreen will cause fullscreen to exit.
        });
	};
}]);

Defining links in the view:

• Links are defined using the goto directive and should be used instead of ng-href.
• They are not limited to use on <div goto="route-name">link tags</div>
• Use attributes to define route parameters for <a goto="route-name" param1="somedata" param2="more">Specific links</a>

Example 2 (using the routes from example 1):

<img src="logo.jpg" goto="home" />
<nav>
	<ul>
		<li><a goto="view2">View2</a></li>
		<li><a goto="view3" user="steve">View3</a></li>
		<li><a goto="view4">View4</a></li> <!-- will use existing user param if defined in the current url -->
	</ul>
</nav>

Highlighting any active links

• 'is-active' is defined as the default active class.
  • The first example indicates how you can change this
  • Any link defined with goto will have this class when the current url matches.
• Links defined with goto will have the route name added as a class

Note: If you are looking to highlight a higher dom element such as the li elements in example 2 you can do the following:

<nav>
	<ul>
		<!-- apply the class 'active' when the route name matches -->
		<li ng-class="{active: $route.current.name === 'view2'}">
			<a goto="view2">View2</a>
		</li>
	</ul>
</nav>

Adding search params

Experimental – issues / feedback welcome

A param named search is reserved for defining search params. This param is $parsed so it must be valid javascript returning a string or object that will be used as the search parameters

Examples:

• <a goto="search" search="{param1:'somedata', param2:'more data'}"></a> as an object
• <a goto="search" search="'param1=somedata&param2=more data'"></a> as a string
• <a goto="search" search="someFunction();"></a> as a function call
• <a goto="search" search="true"></a> maintain any existing search params

Note: the context for the search parameter is the current $scope when using goto