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

This commit is contained in:
Mike Brocchi 2016-04-19 10:33:52 -04:00 committed by Filipe Silva
parent 61c383c98d
commit fdae6c7c81

View File

@ -99,57 +99,18 @@ used in `hero`):
ng generate route hero ng generate route hero
``` ```
This will create a folder with a routable component (`hero-root.component.ts`) This will create a folder which will contain the hero component and related test and style files.
with two sub-routes. The file structure will be as follows:
``` The generated route will also be registered with the parent component's `@RouteConfig` decorator.
...
|-- 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
...
```
By default the cli will add the import statements for HeroList and HeroDetail to 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.
`hero-root.component.ts`:
``` 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`.
@RouteConfig([ This is done in accordance with the style guide.
{path:'/', name: 'HeroList', component: HeroListComponent, useAsDefault: true},
{path:'/:id', name: 'HeroDetail', component: HeroDetailComponent}
])
```
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`)
``` There is an optional flag for `skip-router-generation` which will not add the route to the parent component's `@RouteConfig` decorator.
// 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.
### Creating a build ### Creating a build