$route
is used for deep-linking URLs to controllers and views (HTML partials).
It watches $location.url()
and tries to map the path to an existing route definition.
Requires the ngRoute
module to be installed.
You can define routes through $routeProvider's API.
The $route
service is typically used in conjunction with the
ngView
directive and the
$routeParams
service.
Causes $route
service to update the current URL, replacing
current route parameters with those specified in newParams
.
Provided property names that match the route's path segment
definitions will be interpolated into the location's path, while
remaining properties will be treated as query params.
Param | Type | Details |
---|---|---|
newParams | !Object<string, string> |
mapping of URL parameter names to values |
Broadcasted before a route change. At this point the route services starts
resolving all of the dependencies needed for the route change to occur.
Typically this involves fetching the view template as well as any dependencies
defined in resolve
route property. Once all of the dependencies are resolved
$routeChangeSuccess
is fired.
The route change (and the $location
change that triggered it) can be prevented
by calling preventDefault
method of the event. See $rootScope.Scope
for more details about event object.
Param | Type | Details |
---|---|---|
angularEvent | Object |
Synthetic event object. |
next | Route |
Future route information. |
current | Route |
Current route information. |
Broadcasted after a route change has happened successfully.
The resolve
dependencies are now available in the current.locals
property.
ngView listens for the directive to instantiate the controller and render the view.
Param | Type | Details |
---|---|---|
angularEvent | Object |
Synthetic event object. |
current | Route |
Current route information. |
previous | RouteUndefined |
Previous route information, or undefined if current is first route entered. |
Broadcasted if any of the resolve promises are rejected.
Param | Type | Details |
---|---|---|
angularEvent | Object |
Synthetic event object |
current | Route |
Current route information. |
previous | Route |
Previous route information. |
rejection | Route |
Rejection of the promise. Usually the error of the failed promise. |
The reloadOnSearch
property has been set to false, and we are reusing the same
instance of the Controller.
Param | Type | Details |
---|---|---|
angularEvent | Object |
Synthetic event object |
current | Route |
Current/previous route information. |
current
Object | Reference to the current route definition. The route definition contains:
|
routes
Object | Object with all route configuration Objects as its properties. |
This example shows how changing the URL hash causes the $route
to match a route against the
URL, and the ngView
pulls in the partial.
<div ng-controller="MainController">
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> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>