Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-25 16:57:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update README to reflect route generation changes (#458)

Browse Source
This commit is contained in:
Mike Brocchi 2016-04-19 10:33:52 -04:00 committed by Filipe Silva
parent 61c383c98d
commit fdae6c7c81
1 changed files with 7 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
README.md
View File

@ -99,57 +99,18 @@ used in `hero`):
ng generate route hero
```
This will create a folder with a routable component (`hero-root.component.ts`)
with two sub-routes. The file structure will be as follows:
This will create a folder which will contain the hero component and related test and style files.
```
...
|-- app
| |-- hero
| | |-- hero-detail.component.html
| | |-- hero-detail.component.css
| | |-- hero-detail.component.spec.ts
| | |-- hero-detail.component.ts
| | |-- hero-list.component.html
| | |-- hero-list.component.css
| | |-- hero-list.component.spec.ts
| | |-- hero-list.component.ts
| | |-- hero-root.component.spec.ts
| | |-- hero-root.component.ts
| | |-- hero.service.spec.ts
| | |-- hero.service.ts
| |-- ...
|-- app.ts
|-- route-config.ts
...
```
The generated route will also be registered with the parent component's `@RouteConfig` decorator.
By default the cli will add the import statements for HeroList and HeroDetail to
`hero-root.component.ts`:
By default the route will be designated as a **lazy** route which means that it will be loaded into the browser when needed, not upfront as part of a bundle.
```
@RouteConfig([
{path:'/', name: 'HeroList', component: HeroListComponent, useAsDefault: true},
{path:'/:id', name: 'HeroDetail', component: HeroDetailComponent}
])
```
In order to visually distinguish lazy routes from other routes the folder for the route will be prefixed with a `+` per the above example the folder will be named `+hero`.
This is done in accordance with the style guide.
The generated `route-config.ts` file is also updated with the following:
The default lazy nature of routes can be turned off via the lazy flag (`--lazy false`)
```
// DO NOT EDIT THIS FILE
// IT IS AUTO GENERATED BY ANGULAR-CLI
import {HeroRoot} from './hero/hero-root.component';
export const CliRouteConfig = [
{path:'/hero/...', name: 'HeroRoot', component: HeroRoot}
];
```
Visiting `http://localhost:4200/hero` will show the hero list.
There is an optional flag for `skip-router-generation` which will not add the route to the `CliRouteConfig` for the application.
There is an optional flag for `skip-router-generation` which will not add the route to the parent component's `@RouteConfig` decorator.
### Creating a build