https://github.com/cotag/ngroutenames
AngularJS Named Routes
https://github.com/cotag/ngroutenames
Last synced: 4 months 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: 2026-02-06T19:37:36.499Z (5 months ago)
- Language: JavaScript
- Size: 205 KB
- Stars: 17
- Watchers: 5
- 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):
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:
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@