https://github.com/cotag/ngRouteNames

AngularJS Named Routes
https://github.com/cotag/ngRouteNames

Last synced: about 1 year ago
JSON representation

AngularJS Named Routes

• Host: GitHub
• URL: https://github.com/cotag/ngRouteNames
• Owner: cotag
• License: mit
• Created: 2013-07-29T07:48:01.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2015-10-04T22:50:24.000Z (over 10 years ago)
• Last Synced: 2024-03-25T20:36:34.208Z (over 2 years ago)
• Language: JavaScript
• Size: 205 KB
• Stars: 17
• Watchers: 6
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.textile
  • License: LICENSE

Awesome Lists containing this project

README

          
h1. ngRouteNames

- AngularJS Named Routes !https://travis-ci.org/cotag/ngRouteNames-tests.png?branch=master!:https://travis-ci.org/cotag/ngRouteNames-tests

A route provider and ng-href add-on for advanced routing and mobile device support

The @goto@ directive depends on "Angular Gesture":https://github.com/cotag/bower-angular-gesture so the links are responsive on all mobile devices

h3. Installing

# Open bower.json or components.json

# Add @"ngRouteNames": "~1.1.1"@ to your dependency list

# Run @bower install@

# In your application you can now add: (depending on what you need)

#* @@

#* @@

h2. Defining Routes

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

# Use of @$routeNamesProvider@ in replacement of @$routeProvider@

# Supplying a name for the route

# 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.

        });

	};

}]);



h2. 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 @
link tags
@

* Use attributes to define route parameters for @Specific links@


Example 2 (using the routes from example 1):





	


		
View2

		
View3

		
View4
 

	




h2. 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:



	


		

		


			View2

		

	




h2. 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:

* @@ as an object

* @@ as a string

* @@ as a function call

* @@ maintain any existing search params

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