Watches $location.url()
and tries to map the path to an existing route
definition. It is used for deep-linking URLs to controllers and views (HTML partials).
The $route
service is typically used in conjunction with ng:view
widget and the $routeParams
service.
Sets route definition that will be used on route change when no other route definition is matched.
params – {Object} –
Mapping information to be assigned to $route.current
.
Sets a scope to be used as the parent scope for scopes created on route change. If not set, defaults to the root scope.
scope – {Scope} –
Scope to be used as parent for newly created
$route.current.scope
scopes.
Causes $route
service to reload (and recreate the $route.current
scope) upon the next
eval even if $location
hasn't changed.
Adds a new route definition to the $route
service.
path – {string} –
Route path (matched against $location.hash
)
route – {Object} –
Mapping information to be assigned to $route.current
on route
match.
Object properties:
controller
– {function()=}
– Controller fn that should be associated with newly
created scope.template
– {string=}
– path to an html template that should be used by
ng:view
or
ng:include
widgets.redirectTo
– {(string|function())=} – value to update
$location
path with and trigger route redirection.
If redirectTo
is a function, it will be called with the following parameters:
{Object.<string>}
- route parameters extracted from the current
$location.path()
by applying the current route template.{string}
- current $location.path()
{Object}
- current $location.search()
The custom redirectTo
function is expected to return a string which will be used
to update $location.path()
and $location.search()
.
[reloadOnSearch=true]
- {boolean=} - reload route when only $location.search()
changes.
If the option is set to false and url in the browser changes, then
$routeUpdate event is emited on the current route scope. You can use this event to
react to angular.module.ng.$routeParams
changes:
function MyCtrl($route, $routeParams) {
this.$on('$routeUpdate', function() {
// do stuff with $routeParams
}); }
{Object}
– route object
Reference to the current route definition.
Array of all configured routes.
Broadcasted after a route change.
current – {Route} –
Current route information.
previous – {Route} –
Previous route information.
The Route
object extends the route definition with the following properties.
scope
- The instance of the route controller.params
- The current params
.Broadcasted before a route change.
next – {Route} –
Future route information.
current – {Route} –
Current route information.
The Route
object extends the route definition with the following properties.
scope
- The instance of the route controller.params
- The current params
.The reloadOnSearch
property has been set to false, and we are reusing the same
instance of the Controller.
This example shows how changing the URL hash causes the $route to match a route against the URL, and the [[ng:include]] pulls in the partial.
<script> function MainCntl($route, $routeParams, $location) { this.$route = $route; this.$location = $location; this.$routeParams = $routeParams; $route.when('/Book/:bookId', {template: 'examples/book.html', controller: BookCntl}); $route.when('/Book/:bookId/ch/:chapterId', {template: 'examples/chapter.html', controller: ChapterCntl}); } function BookCntl($routeParams) { this.name = "BookCntl"; this.params = $routeParams; } function ChapterCntl($routeParams) { this.name = "ChapterCntl"; this.params = $routeParams; } </script> <div ng:controller="MainCntl"> Choose: <a href="#/Book/Moby">Moby</a> | <a href="#/Book/Moby/ch/1">Moby: Ch1</a> | <a href="#/Book/Gatsby">Gatsby</a> | <a href="#/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a><br/> <pre>$location.path() = {{$location.path()}}</pre> <pre>$route.current.template = {{$route.current.template}}</pre> <pre>$route.current.params = {{$route.current.params}}</pre> <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre> <pre>$routeParams = {{$routeParams}}</pre> <hr /> <ng:view></ng:view> </div>