Rc5 doc sweep (#2218)

* Removed 03-05, 04-12, 04-15.

Removed style for whitespace in imports.

Removed + sign prefix for routing folders. Updated all code.

Removed style that said to use lazy loading.  There was no value in the style other than use it :)

* renamed componet router to router
This commit is contained in:
John Papa 2016-09-13 21:51:03 -04:00 committed by Ward Bell
parent 1fb488b4ec
commit 39c5a2b949
36 changed files with 22 additions and 282 deletions

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -1,6 +0,0 @@
<div>Actual favorite: {{favorite?.name}}</div>
<ul>
<li *ngFor="let hero of heroes">
{{hero.name}}
</li>
</ul>

View File

@ -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);
}
}

View File

@ -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 {}

View File

@ -1,3 +0,0 @@
export * from './+heroes';
export * from './shared';
export * from './app.component';

View File

@ -1,4 +0,0 @@
import { Injectable } from '@angular/core';
@Injectable()
export class ExceptionService { }

View File

@ -1,6 +0,0 @@
// #docregion
// #docregion example
export * from './exception.service';
export * from './spinner';
export * from './toast';
// #enddocregion example

View File

@ -1,3 +0,0 @@
// #docregion
export * from './spinner.component';
export * from './spinner.service';

View File

@ -1,16 +0,0 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { SpinnerService } from './spinner.service';
@Component({
selector: 'toh-spinner',
template: '<div>spinner</div>'
})
export class SpinnerComponent implements OnDestroy, OnInit {
constructor(private spinnerService: SpinnerService) { }
ngOnInit() { }
ngOnDestroy() { }
}

View File

@ -1,12 +0,0 @@
import { Injectable } from '@angular/core';
export interface ISpinnerState { }
@Injectable()
export class SpinnerService {
spinnerState: any;
show() { }
hide() { }
}

View File

@ -1,3 +0,0 @@
// #docregion
export * from './toast.component';
export * from './toast.service';

View File

@ -1,14 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { ToastService } from './toast.service';
@Component({
moduleId: module.id,
selector: 'toh-toast',
templateUrl: '<div>toast</div>'
})
export class ToastComponent implements OnInit {
constructor(toastService: ToastService) { }
ngOnInit() { }
}

View File

@ -1,6 +0,0 @@
import { Injectable } from '@angular/core';
@Injectable()
export class ToastService {
activate: (message?: string, title?: string) => void;
}

View File

@ -1 +0,0 @@
export * from './shared';

View File

@ -1,7 +0,0 @@
// #docregion
// #docregion example
export class Hero {
name: string;
power: string;
}
// #enddocregion example

View File

@ -1,2 +0,0 @@
export * from './hero.model';
export * from './hero.service';

View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Hero, HeroService } from './+heroes'; import { Hero, HeroService } from './heroes';
import { ExceptionService, SpinnerService, ToastService } from './shared'; import { ExceptionService, SpinnerService, ToastService } from './shared';
@Component({ @Component({

View File

@ -1,3 +1,3 @@
export * from './+heroes'; export * from './heroes';
export * from './shared'; export * from './shared';
export * from './app.component'; export * from './app.component';

View File

@ -2,7 +2,7 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
// #docregion example // #docregion example
import { HeroesComponent } from './+heroes'; import { HeroesComponent } from './heroes';
// #enddocregion example // #enddocregion example
@Component({ @Component({

View File

@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { HeroesComponent } from './+heroes'; import { HeroesComponent } from './heroes';
@NgModule({ @NgModule({
imports: [ imports: [

View File

@ -1,3 +1,3 @@
export * from './+heroes'; export * from './heroes';
export * from './shared'; export * from './shared';
export * from './app.component'; export * from './app.component';

View File

@ -9,12 +9,12 @@
'03-03', '03-03/app', '03-03/app/shared', '03-03', '03-03/app', '03-03/app/shared',
'03-04', '03-04/app', '03-04/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', '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', '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', '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', '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-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-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-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', '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-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-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-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', '05-17/app/heroes/shared',
'06-01', '06-01/app', '06-01/app/shared', '06-01', '06-01/app', '06-01/app/shared',
'06-03', '06-03/app', '06-03/app/shared', '06-03', '06-03/app', '06-03/app/shared',

View File

@ -89,7 +89,7 @@ a(id='toc')
.s-why.s-why-last .s-why.s-why-last
:marked :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 :marked
The key is to make the code more reusable, easier to read, and less mistake prone. 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 a(href="#toc") Back to top
.l-main-section
:marked
### <a id="03-05"></a>Import Destructuring Spacing
#### <a href="#03-05">Style 03-05</a>
.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 .l-main-section
:marked :marked
### <a id="03-06"></a>Import Line Spacing ### <a id="03-06"></a>Import Line Spacing
@ -802,10 +781,10 @@ a(href="#toc") Back to top
:marked :marked
**Why?** Alphabetizing makes it easier to read and locate imports. **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 :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 :marked
a(href="#toc") Back to top a(href="#toc") Back to top
@ -954,7 +933,7 @@ a(href="#toc") Back to top
.children .children
.file app .file app
.children .children
.file +heroes .file heroes
.children .children
.file hero .file hero
.children .children
@ -1013,7 +992,7 @@ a(href="#toc") Back to top
.children .children
.file app .file app
.children .children
.file +heroes .file heroes
.children .children
.file hero .file hero
.children .children
@ -1080,7 +1059,7 @@ a(href="#toc") Back to top
.children .children
.file app .file app
.children .children
.file +heroes .file heroes
.children .children
.file hero .file hero
.children .children
@ -1093,7 +1072,7 @@ a(href="#toc") Back to top
.file ... .file ...
.file heroes.component.ts|html|css|spec.ts .file heroes.component.ts|html|css|spec.ts
.file index.ts .file index.ts
.file +villains .file villains
.children .children
.file villain .file villain
.children .children
@ -1147,7 +1126,7 @@ a(href="#toc") Back to top
.children .children
.file app .file app
.children .children
.file +heroes .file heroes
.children .children
.file ... .file ...
.file shared .file shared
@ -1225,11 +1204,11 @@ a(href="#toc") Back to top
.children .children
.file app .file app
.children .children
.file +dashboard .file dashboard
.children .children
.file ... .file ...
.file index.ts .file index.ts
.file +heroes .file heroes
.children .children
.file ... .file ...
.file index.ts .file index.ts
@ -1276,41 +1255,6 @@ a(href="#toc") Back to top
a(href="#toc") Back to top a(href="#toc") Back to top
.l-main-section
:marked
### <a id="04-12"></a>Prefix Lazy Loaded Folders with +
#### <a href="#04-12">Style 04-12</a>
.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 .l-main-section
:marked :marked
### <a id="04-13"></a>Never Directly Import Lazy Loaded Folders ### <a id="04-13"></a>Never Directly Import Lazy Loaded Folders
@ -1322,7 +1266,7 @@ a(href="#toc") Back to top
.s-why.s-why-last .s-why.s-why-last
:marked :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) +makeExample('style-guide/ts/04-13/app/app.component.avoid.ts', 'example', 'app/app.component.ts')(avoid=1)
:marked :marked
@ -1342,26 +1286,11 @@ a(href="#toc") Back to top
:marked :marked
**Why?** A parent module has already been loaded by the time the lazy loaded module imports it. **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') +makeExample('style-guide/ts/04-14/app/heroes/heroes.component.ts', 'example', 'app/heroes/heroes.component.ts')
:marked :marked
a(href="#toc") Back to top a(href="#toc") Back to top
.l-main-section
:marked
### <a id="04-15"></a>Use Component Router to Lazy Load
#### <a href="#04-15">Style 04-15</a>
.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
.l-main-section .l-main-section
:marked :marked
## Components ## Components