W3cubDocs

/Angular.js 1.6

Improve this Doc ngComponentRouter

Deprecated:

In an effort to keep synchronized with router changes in Angular 2, this implementation of the Component Router (ngComponentRouter module) has been deprecated and will not receive further updates.

We are investigating backporting the Angular 2 Router to Angular 1, but alternatively, use the ngRoute module or community developed projects (e.g. ui-router).

Installation

Currently, the Component Router module must be installed via npm/yarn, it is not available on Bower or the Google CDN.

yarn add @angular/router@0.2.0

Include angular_1_router.js in your HTML:

<script src="/node_modules/@angular/router/angular1/angular_1_router.js"></script>

You also need to include ES6 shims for browsers that do not support ES6 code (Internet Explorer, iOs < 8, Android < 5.0, Windows Mobile < 10):

<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

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

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

Module Components

Type

Name Description
Router

A Router is responsible for mapping URLs to components.

ChildRouter

This type extends the Router.

RootRouter

This type extends the Router.

ComponentInstruction

A ComponentInstruction represents the route state for a single component. An Instruction is composed of a tree of these ComponentInstructions.

RouteDefinition

Each item in the RouteConfig for a Routing Component is an instance of this type. It can have the following properties:

RouteParams

A map of parameters for a given route, passed as part of the ComponentInstruction to the Lifecycle Hooks, such as $routerOnActivate and $routerOnDeactivate.

Directive

Name Description
ngOutlet

The directive that identifies where the Router should render its Components.

Service

Name Description
$rootRouter

The singleton instance of the RootRouter type, which is associated with the top level $routerRootComponent.

$routerRootComponent

The top level Routing Component associated with the $rootRouter.

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