diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts deleted file mode 100644 index cff95fd096..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docregion -// #docregion example -/* avoid */ - -import {Injectable} from '@angular/core'; -import {Http, Response} from '@angular/http'; - -import {Hero} from './hero.model'; -import {ExceptionService, SpinnerService, ToastService} from '../../shared'; -// #enddocregion example - -@Injectable() -export class HeroService { - - constructor( - private exceptionService: ExceptionService, - private spinnerService: SpinnerService, - private toastService: ToastService, - private http: Http - ) { } - - getHero(id: number) { - return this.http.get(`api/heroes/${id}`) - .map((res: Response) => res.json().data); - } - - getHeroes() { - return this.http.get(`api/heroes`) - .map((res: Response) => res.json().data); - } - -} - diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts deleted file mode 100644 index 85fa486432..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docregion -// #docregion example -import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; - -import { Hero } from './hero.model'; -import { ExceptionService, SpinnerService, ToastService } from '../../shared'; -// #enddocregion example - -@Injectable() -export class HeroService { - cachedHeroes: Hero[]; - - constructor( - private exceptionService: ExceptionService, - private spinnerService: SpinnerService, - private toastService: ToastService, - private http: Http - ) { } - - getHero(id: number) { - return this.http.get(`app/heroes/${id}`) - .map((res: Response) => res.json().data); - } - - getHeroes() { - return this.http.get(`api/heroes`) - .map((res: Response) => res.json().data); - } - -} - diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.component.html b/public/docs/_examples/style-guide/ts/03-05/app/app.component.html deleted file mode 100644 index 67fb0d5964..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/app.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
Actual favorite: {{favorite?.name}}
- diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts deleted file mode 100644 index 8268f0d0b9..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroService } from './+heroes'; -import { ExceptionService, SpinnerService, ToastService } from './shared'; - -@Component({ - moduleId: module.id, - selector: 'sg-app', - templateUrl: 'app.component.html', - providers: [HeroService, ExceptionService, SpinnerService, ToastService] -}) -export class AppComponent implements OnInit { - favorite: Hero; - heroes: Hero[]; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.heroService.getHero(1).subscribe(hero => this.favorite = hero); - this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes); - } -} diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts deleted file mode 100644 index b70c8416c7..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -export const route = { path: '03-05', component: AppComponent }; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '03-05', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/03-05/app/index.ts b/public/docs/_examples/style-guide/ts/03-05/app/index.ts deleted file mode 100644 index aa9e5b0b7c..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './+heroes'; -export * from './shared'; -export * from './app.component'; diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts deleted file mode 100644 index 7180c88e6b..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class ExceptionService { } diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/index.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/index.ts deleted file mode 100644 index e4e6723f91..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/shared/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -// #docregion example -export * from './exception.service'; -export * from './spinner'; -export * from './toast'; -// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/index.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/index.ts deleted file mode 100644 index 1d619300c0..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -export * from './spinner.component'; -export * from './spinner.service'; diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.component.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.component.ts deleted file mode 100644 index 1fd2a01500..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; - -import { SpinnerService } from './spinner.service'; - -@Component({ - selector: 'toh-spinner', - template: '
spinner
' -}) - -export class SpinnerComponent implements OnDestroy, OnInit { - constructor(private spinnerService: SpinnerService) { } - - ngOnInit() { } - - ngOnDestroy() { } -} diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.service.ts deleted file mode 100644 index ad5d2ed6e0..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.service.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Injectable } from '@angular/core'; - -export interface ISpinnerState { } - -@Injectable() -export class SpinnerService { - spinnerState: any; - - show() { } - - hide() { } -} diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/index.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/index.ts deleted file mode 100644 index 01b41aff98..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -export * from './toast.component'; -export * from './toast.service'; diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.component.ts deleted file mode 100644 index 24afa50a5b..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { ToastService } from './toast.service'; - -@Component({ - moduleId: module.id, - selector: 'toh-toast', - templateUrl: '
toast
' -}) -export class ToastComponent implements OnInit { - constructor(toastService: ToastService) { } - - ngOnInit() { } -} diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts deleted file mode 100644 index e92e75ee45..0000000000 --- a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class ToastService { - activate: (message?: string, title?: string) => void; -} diff --git a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.model.ts deleted file mode 100644 index c3277621cb..0000000000 --- a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.model.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -// #docregion example -export class Hero { - name: string; - power: string; -} -// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/index.ts deleted file mode 100644 index dbb150d3f8..0000000000 --- a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './hero.model'; -export * from './hero.service'; diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts index 8268f0d0b9..17822c8a3e 100644 --- a/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Hero, HeroService } from './+heroes'; +import { Hero, HeroService } from './heroes'; import { ExceptionService, SpinnerService, ToastService } from './shared'; @Component({ diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/03-06/app/heroes/index.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/03-05/app/+heroes/index.ts rename to public/docs/_examples/style-guide/ts/03-06/app/heroes/index.ts diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.model.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.model.ts rename to public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.model.ts diff --git a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts rename to public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts diff --git a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.ts rename to public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.ts diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/index.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/index.ts rename to public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/index.ts diff --git a/public/docs/_examples/style-guide/ts/03-06/app/index.ts b/public/docs/_examples/style-guide/ts/03-06/app/index.ts index aa9e5b0b7c..251d78ac56 100644 --- a/public/docs/_examples/style-guide/ts/03-06/app/index.ts +++ b/public/docs/_examples/style-guide/ts/03-06/app/index.ts @@ -1,3 +1,3 @@ -export * from './+heroes'; +export * from './heroes'; export * from './shared'; export * from './app.component'; diff --git a/public/docs/_examples/style-guide/ts/04-13/app/app.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-13/app/app.component.avoid.ts index d41269c2c5..dc96beac4c 100644 --- a/public/docs/_examples/style-guide/ts/04-13/app/app.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/04-13/app/app.component.avoid.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; // #docregion example -import { HeroesComponent } from './+heroes'; +import { HeroesComponent } from './heroes'; // #enddocregion example @Component({ diff --git a/public/docs/_examples/style-guide/ts/04-13/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-13/app/heroes/index.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/04-13/app/+heroes/index.ts rename to public/docs/_examples/style-guide/ts/04-13/app/heroes/index.ts diff --git a/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts b/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts index be01c06624..a9377ce9d6 100644 --- a/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts +++ b/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts @@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; -import { HeroesComponent } from './+heroes'; +import { HeroesComponent } from './heroes'; @NgModule({ imports: [ diff --git a/public/docs/_examples/style-guide/ts/04-14/app/+heroes/heroes.component.css b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.css similarity index 100% rename from public/docs/_examples/style-guide/ts/04-14/app/+heroes/heroes.component.css rename to public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.css diff --git a/public/docs/_examples/style-guide/ts/04-14/app/+heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html similarity index 100% rename from public/docs/_examples/style-guide/ts/04-14/app/+heroes/heroes.component.html rename to public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html diff --git a/public/docs/_examples/style-guide/ts/04-14/app/+heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/04-14/app/+heroes/heroes.component.ts rename to public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts diff --git a/public/docs/_examples/style-guide/ts/04-14/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-14/app/heroes/index.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/04-14/app/+heroes/index.ts rename to public/docs/_examples/style-guide/ts/04-14/app/heroes/index.ts diff --git a/public/docs/_examples/style-guide/ts/04-14/app/+heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/04-14/app/heroes/shared/hero.model.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/04-14/app/+heroes/shared/hero.model.ts rename to public/docs/_examples/style-guide/ts/04-14/app/heroes/shared/hero.model.ts diff --git a/public/docs/_examples/style-guide/ts/04-14/app/+heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/04-14/app/heroes/shared/index.ts similarity index 100% rename from public/docs/_examples/style-guide/ts/04-14/app/+heroes/shared/index.ts rename to public/docs/_examples/style-guide/ts/04-14/app/heroes/shared/index.ts diff --git a/public/docs/_examples/style-guide/ts/04-14/app/index.ts b/public/docs/_examples/style-guide/ts/04-14/app/index.ts index aa9e5b0b7c..251d78ac56 100644 --- a/public/docs/_examples/style-guide/ts/04-14/app/index.ts +++ b/public/docs/_examples/style-guide/ts/04-14/app/index.ts @@ -1,3 +1,3 @@ -export * from './+heroes'; +export * from './heroes'; export * from './shared'; export * from './app.component'; diff --git a/public/docs/_examples/style-guide/ts/systemjs.custom.js b/public/docs/_examples/style-guide/ts/systemjs.custom.js index 1ffb1b863a..bc5a4d2eb3 100644 --- a/public/docs/_examples/style-guide/ts/systemjs.custom.js +++ b/public/docs/_examples/style-guide/ts/systemjs.custom.js @@ -9,12 +9,12 @@ '03-03', '03-03/app', '03-03/app/shared', '03-04', '03-04/app', '03-04/app/shared', '03-05', '03-05/app', '03-05/app/shared', '03-05/app/shared/spinner', '03-05/app/shared/toast', - '03-05/app/+heroes', '03-05/app/+heroes/shared', + '03-05/app/heroes', '03-05/app/heroes/shared', '03-06', '03-06/app', '03-06/app/shared', '03-06/app/shared/spinner', '03-06/app/shared/toast', - '03-06/app/+heroes', '03-06/app/+heroes/shared', - '04-10', '04-10/app', '04-10/app/shared', '04-10/app/+heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast', + '03-06/app/heroes', '03-06/app/heroes/shared', + '04-10', '04-10/app', '04-10/app/shared', '04-10/app/heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast', '04-10/app/shared/filter-text', '04-10/app/shared/modal', '04-10/app/shared/nav', - '04-14', '04-14/app', '04-14/app/+heroes', '04-14/app/+heroes/shared', '04-14/app/shared', + '04-14', '04-14/app', '04-14/app/heroes', '04-14/app/heroes/shared', '04-14/app/shared', '05-02', '05-02/app', '05-02/app/heroes', '05-02/app/heroes/shared', '05-02/app/heroes/shared/hero-button', '05-03', '05-03/app', '05-03/app/heroes', '05-03/app/heroes/shared', '05-03/app/heroes/shared/hero-button', '05-04', '05-04/app', '05-04/app/heroes', '05-04/app/heroes/shared', @@ -23,7 +23,7 @@ '05-14', '05-14/app', '05-14/app/shared', '05-14/app/shared/toast', '05-15', '05-15/app', '05-15/app/heroes', '05-15/app/heroes/hero-list', '05-15/app/heroes/shared', '05-16', '05-16/app', '05-16/app/heroes', - '05-17', '05-17/app', '05-17/app/heroes', '05-17/app/heroes/hero', '05-17/app/heroes/hero-list', + '05-17', '05-17/app', '05-17/app/heroes', '05-17/app/heroes/hero', '05-17/app/heroes/hero-list', '05-17/app/heroes/shared', '06-01', '06-01/app', '06-01/app/shared', '06-03', '06-03/app', '06-03/app/shared', diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index 0d22202d44..31cba7c769 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -89,7 +89,7 @@ a(id='toc') .s-why.s-why-last :marked - **Why?** A single component can be the default export for its file which facilitates lazy loading with the Component Router. + **Why?** A single component can be the default export for its file which facilitates lazy loading with the Router. :marked The key is to make the code more reusable, easier to read, and less mistake prone. @@ -756,27 +756,6 @@ a(href="#toc") Back to top a(href="#toc") Back to top -.l-main-section -:marked - ### Import Destructuring Spacing - #### Style 03-05 - -.s-rule.do - :marked - **Do** leave one whitespace character inside of the `import` statements' curly braces when destructuring. - -.s-why.s-why-last - :marked - **Why?** Whitespace makes it easier to read the imports. - -+makeExample('style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts', 'example', 'app/+heroes/shared/hero.service.ts')(avoid=1) -:marked - -+makeExample('style-guide/ts/03-05/app/+heroes/shared/hero.service.ts', 'example', 'app/+heroes/shared/hero.service.ts') -:marked - -a(href="#toc") Back to top - .l-main-section :marked ### Import Line Spacing @@ -802,10 +781,10 @@ a(href="#toc") Back to top :marked **Why?** Alphabetizing makes it easier to read and locate imports. -+makeExample('style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts', 'example', 'app/+heroes/shared/hero.service.ts')(avoid=1) ++makeExample('style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts', 'example', 'app/heroes/shared/hero.service.ts')(avoid=1) :marked -+makeExample('style-guide/ts/03-06/app/+heroes/shared/hero.service.ts', 'example', 'app/+heroes/shared/hero.service.ts') ++makeExample('style-guide/ts/03-06/app/heroes/shared/hero.service.ts', 'example', 'app/heroes/shared/hero.service.ts') :marked a(href="#toc") Back to top @@ -954,7 +933,7 @@ a(href="#toc") Back to top .children .file app .children - .file +heroes + .file heroes .children .file hero .children @@ -1013,7 +992,7 @@ a(href="#toc") Back to top .children .file app .children - .file +heroes + .file heroes .children .file hero .children @@ -1080,7 +1059,7 @@ a(href="#toc") Back to top .children .file app .children - .file +heroes + .file heroes .children .file hero .children @@ -1093,7 +1072,7 @@ a(href="#toc") Back to top .file ... .file heroes.component.ts|html|css|spec.ts .file index.ts - .file +villains + .file villains .children .file villain .children @@ -1147,7 +1126,7 @@ a(href="#toc") Back to top .children .file app .children - .file +heroes + .file heroes .children .file ... .file shared @@ -1225,11 +1204,11 @@ a(href="#toc") Back to top .children .file app .children - .file +dashboard + .file dashboard .children .file ... .file index.ts - .file +heroes + .file heroes .children .file ... .file index.ts @@ -1276,41 +1255,6 @@ a(href="#toc") Back to top a(href="#toc") Back to top -.l-main-section -:marked - ### Prefix Lazy Loaded Folders with + - #### Style 04-12 - -.s-rule.do - :marked - **Do** prefix the name of a *lazy loaded folder* with a (+) e.g., `+dashboard/`. - -.s-why - :marked - **Why?** Lazy loaded code paths are easily identifiable by their `+` prefix. - -.s-why - :marked - **Why?** Lazy loaded code paths are easily distinguishable from non lazy loaded paths. - -.s-why.s-why-last - :marked - **Why?** If we see an `import` path that contains a `+`, we can quickly refactor to use lazy loading. - -.example-title Lazy Loaded Folders -.filetree - .file src - .children - .file app - .children - .file +dashboard - .children - .file dashboard.component.ts|html|css|spec.ts - .file index.ts -:marked - -a(href="#toc") Back to top - .l-main-section :marked ### Never Directly Import Lazy Loaded Folders @@ -1322,7 +1266,7 @@ a(href="#toc") Back to top .s-why.s-why-last :marked - **Why?** Directly importing a module loads it immediately when our intention is to load it on demand. + **Why?** Directly importing and using a module loads it immediately when our intention is to load it on demand. +makeExample('style-guide/ts/04-13/app/app.component.avoid.ts', 'example', 'app/app.component.ts')(avoid=1) :marked @@ -1342,23 +1286,8 @@ a(href="#toc") Back to top :marked **Why?** A parent module has already been loaded by the time the lazy loaded module imports it. -+makeExample('style-guide/ts/04-14/app/+heroes/heroes.component.ts', 'example', 'app/+heroes/heroes.component.ts') -:marked - -a(href="#toc") Back to top - -.l-main-section ++makeExample('style-guide/ts/04-14/app/heroes/heroes.component.ts', 'example', 'app/heroes/heroes.component.ts') :marked - ### Use Component Router to Lazy Load - #### Style 04-15 - -.s-rule.do - :marked - **Do** use the Component Router to lazy load routable features. - -.s-why.s-why-last - :marked - **Why?** That's the easiest way to load a module on demand. a(href="#toc") Back to top