W3cubDocs

Improve this Doc ngRoute

Installation

First, get the file:

"//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"

NPM e.g.

npm install --save [email protected]

yarn add [email protected]

Bower e.g.
```
bower install angular-route#X.Y.Z
```
code.angularjs.org (discouraged for production use) e.g.
```
"//code.angularjs.org/X.Y.Z/angular-route.js"
```

where X.Y.Z is the AngularJS version you are running.

Then, include angular-route.js in your HTML:

<script src="path/to/angular.js"></script>
<script src="path/to/angular-route.js"></script>

Finally, load the module in your application by adding it as a dependent module:

angular.module('app', ['ngRoute']);

With that you're ready to get started!

ngRoute

The ngRoute module provides routing and deeplinking services and directives for angular apps.

See $route for an example of configuring and using ngRoute.

Known Issues

Name Description

Name	Description
ngView	If `ngView` is contained in an asynchronously loaded template (e.g. in another directive's templateUrl or in a template loaded using `ngInclude`), then you need to make sure that `$route` is instantiated in time to capture the initial `$locationChangeStart` event and load the appropriate view. One way to achieve this is to have it as a dependency in a `.run` block: `myModule.run(['$route', function() {}]);`

ngView

If ngView is contained in an asynchronously loaded template (e.g. in another directive's templateUrl or in a template loaded using ngInclude), then you need to make sure that $route is instantiated in time to capture the initial $locationChangeStart event and load the appropriate view. One way to achieve this is to have it as a dependency in a .run block: myModule.run(['$route', function() {}]);

Module Components

Directive

Name Description

Name	Description
ngView	Overview `ngView` is a directive that complements the $route service by including the rendered template of the current route into the main layout (`index.html`) file. Every time the current route changes, the included view changes with it according to the configuration of the `$route` service.

ngView

Overview

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Provider

Name	Description
$routeProvider	Used for configuring routes.

Service

Name	Description
$route	`$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.
$routeParams	The `$routeParams` service allows you to retrieve the current set of route parameters.

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.5.11/docs/api/ngRoute