iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(style-guide): add style-guide - v.4

This commit is contained in:
John Papa 2016-04-25 22:42:22 -07:00 committed by Ward Bell
parent 1ac2a42308
commit d5e909bde0
67 changed files with 1120 additions and 671 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
gulpfile.js
View File

@ -25,6 +25,8 @@ var globby = require("globby");
var treeKill = require("tree-kill");
var blc = require("broken-link-checker");
var tslint = require('gulp-tslint');
// TODO:
// 1. Think about using runSequence
// 2. Think about using spawn instead of exec in case of long error messages.
@ -45,6 +47,7 @@ var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZip
var plunkerBuilder = require(path.resolve(TOOLS_PATH, 'plunker-builder/plunkerBuilder'));
var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
var _devguideShredOptions = {
examplesDir: path.join(DOCS_PATH, '_examples'),
fragmentsDir: path.join(DOCS_PATH, '_fragments'),
@ -498,6 +501,20 @@ gulp.task('_zip-examples', function() {
});
// Linting
gulp.task('lint', function() {
return gulp.src(['./public/docs/_examples/style-guide/ts/**/*.ts', '!./public/docs/_examples/style-guide/ts/**/*.avoid.ts'])
.pipe(tslint({
rulesDirectory: ['node_modules/codelyzer'],
configuration: require('./tslint.json')
}))
.pipe(tslint.report('prose', {
summarizeFailureOutput: true
}));
});
// Helper functions
function harpCompile() {

6
package.json
View File

@ -9,7 +9,6 @@
"harp": "harp",
"live-server": "live-server",
"test-api-builder": "jasmine-node tools/api-builder",
"protractor": "protractor"
},
"repository": {
@ -28,10 +27,11 @@
"devDependencies": {
"archiver": "^0.16.0",
"assert-plus": "^0.1.5",
"broken-link-checker":"0.7.0",
"broken-link-checker": "0.7.0",
"browser-sync": "^2.9.3",
"canonical-path": "0.0.2",
"cross-spawn": "^2.1.0",
"codelyzer": "0.0.18",
"del": "^1.2.0",
"dgeni": "^0.4.0",
"dgeni-packages": "^0.11.1",
@ -42,6 +42,7 @@
"gulp": "^3.5.6",
"gulp-env": "0.4.0",
"gulp-task-listing": "^1.0.1",
"gulp-tslint": "^4.3.5",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.3.4",
"harp": "^0.20.3",
@ -66,6 +67,7 @@
"protractor": "^3.0.0",
"q": "^1.4.1",
"tree-kill": "^1.0.0",
"tslint": "^3.2.2",
"typescript": "1.7.3",
"yargs": "^3.23.0"
},

25
public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
View File

@ -1,29 +1,16 @@
// #docplaster
// #docregion
/* recommended */
import { Component } from 'angular2/core';
// app.component.ts
import { Component, OnInit } from 'angular2/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroService } from './heroes/hero.service';
@Component({
selector: 'toh-app',
template: `
<pre>{{heroes | json}}</pre>
<toh-heroes></toh-heroes>
`,
styleUrls: ['app/app.component.css'],
directives: [HeroesComponent],
providers: [HeroService]
})
export class AppComponent implements OnInit{
heroes: Hero[] = [];
constructor(private heroService: HeroService) {}
ngOnInit() {
this.heroService.getHeroes()
.then(heroes => this.heroes = heroes);
}
}
export class AppComponent { }

40
public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts Normal file
View File

@ -0,0 +1,40 @@
// #docregion
/* avoid */
import { bootstrap } from 'angular2/platform/browser';
import { Component, OnInit } from 'angular2/core';
class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<pre>{{heroes | json}}</pre>
`,
styleUrls: ['app/app.component.css']
})
class AppComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[] = [];
ngOnInit() {
getHeroes().then(heroes => this.heroes = heroes);
}
}
bootstrap(AppComponent, []);
const HEROES: Hero[] = [
{id: 1, name: 'Bombasto'},
{id: 2, name: 'Tornado'},
{id: 3, name: 'Magneta'},
];
function getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES); // TODO: get hero data from the server;
}

4
public/docs/_examples/style-guide/ts/01-01/app/hero.model.ts → public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.model.ts
View File

@ -1,8 +1,4 @@
// #docplaster
// #docregion
/* recommended */
export class Hero {
id: number;
name: string;

7
public/docs/_examples/style-guide/ts/01-01/app/hero.service.ts → public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts
View File

@ -1,10 +1,7 @@
// #docplaster
// #docregion
/* recommended */
import { Injectable } from 'angular2/core';
import { HEROES } from './mock-heroes';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {

22
public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts Normal file
View File

@ -0,0 +1,22 @@
// #docregion
import { Component, OnInit } from 'angular2/core';
import { Hero } from './hero.model';
import { HeroService } from './hero.service';
@Component({
selector: 'toh-heroes',
template: `
<pre>{{heroes | json}}</pre>
`
})
export class HeroesComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService: HeroService) {}
ngOnInit() {
this.heroService.getHeroes()
.then(heroes => this.heroes = heroes);
}
}

8
public/docs/_examples/style-guide/ts/01-01/app/heroes/mock-heroes.ts Normal file
View File

@ -0,0 +1,8 @@
// #docregion
import { Hero } from './hero.model';
export const HEROES: Hero[] = [
{id: 1, name: 'Bombasto'},
{id: 2, name: 'Tornado'},
{id: 3, name: 'Magneta'},
];

5
public/docs/_examples/style-guide/ts/01-01/app/main.ts
View File

@ -1,9 +1,6 @@
// #docplaster
// #docregion
/* recommended */
import { bootstrap } from 'angular2/platform/browser';
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
bootstrap(AppComponent, []);

93
public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts
View File

@ -1,93 +0,0 @@
// #docplaster
// #docregion 01-01-1
/* avoid */
import { bootstrap } from 'angular2/platform/browser';
import { Component, OnInit } from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<pre>{{heroes | json}}</pre>
`,
styleUrls: ['app/app.component.css']
})
export class AppComponent implements OnInit{
title = 'Tour of Heroes';
heroes: Hero[] = [];
ngOnInit() {
getHeroes().then(heroes => this.heroes = heroes);
}
}
bootstrap(AppComponent, []);
function getHeroes() {
return // some promise of data;
}
// #enddocregion 01-01-1
// #docregion 01-01-2
/* recommended */
// main.ts
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
bootstrap(AppComponent, []);
/* recommended */
// app.component.ts
import { Component, OnInit } from 'angular2/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
selector: 'my-app',
template: `
<pre>{{heroes | json}}</pre>
`,
styleUrls: ['app/app.component.css'],
providers: [HeroService]
})
export class AppComponent implements OnInit{
heroes: Hero[] = [];
constructor(private heroService: HeroService) {}
ngOnInit() {
this.heroService.getHeroes()
.then(heroes => this.heroes = heroes);
}
}
// #enddocregion 01-01-2
// #docregion 01-01-3
/* recommended */
// hero.service.ts
import { Injectable } from 'angular2/core';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
getHeroes() {
return Promise.resolve(HEROES);
}
}
// #enddocregion 01-01-3
// #docregion 01-01-4
/* recommended */
// hero.ts
export class Hero {
id: number;
name: string;
}
// #enddocregion 01-01-4

8
public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts Normal file
View File

@ -0,0 +1,8 @@
// #docregion
/* avoid */
// HeroComponent is in the Tour of Heroes feature
@Component({
selector: 'hero'
})
export class HeroComponent {}

9
public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts Normal file
View File

@ -0,0 +1,9 @@
// #docregion
import { Component } from 'angular2/core';
// #docregion example
@Component({
selector: 'toh-hero'
})
export class HeroComponent {}
// #enddocregion example

8
public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts Normal file
View File

@ -0,0 +1,8 @@
// #docregion
/* avoid */
// UsersComponent is in an Admin feature
@Component({
selector: 'users'
})
export class UsersComponent {}

9
public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts Normal file
View File

@ -0,0 +1,9 @@
// #docregion
import { Component } from 'angular2/core';
// #docregion example
@Component({
selector: 'admin-users'
})
export class UsersComponent {}
// #enddocregion example

7
public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts Normal file
View File

@ -0,0 +1,7 @@
// #docregion
/* avoid */
@Directive({
selector: '[validate]'
})
export class ValidateDirective {}

9
public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts Normal file
View File

@ -0,0 +1,9 @@
// #docregion
import { Directive } from 'angular2/core';
// #docregion example
@Directive({
selector: '[tohValidate]'
})
export class ValidateDirective {}
// #enddocregion example

2
public/docs/_examples/style-guide/ts/05-02/app/app.component.html Normal file
View File

@ -0,0 +1,2 @@
<!-- #docregion -->
<toh-hero-button></toh-hero-button>

7
public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.avoid.ts Normal file
View File

@ -0,0 +1,7 @@
// #docregion
/* avoid */
@Component({
selector: 'tohHeroButton'
})
export class HeroButtonComponent {}

9
public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.ts Normal file
View File

@ -0,0 +1,9 @@
// #docregion
import { Component } from 'angular2/core';
// #docregion example
@Component({
selector: 'toh-hero-button'
})
export class HeroButtonComponent {}
// #enddocregion example

2
public/docs/_examples/style-guide/ts/05-03/app/app.component.html Normal file
View File

@ -0,0 +1,2 @@
<!-- #docregion -->
<toh-hero-button></toh-hero-button>

3
public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.html Normal file
View File

@ -0,0 +1,3 @@
<!-- #docregion -->
<!-- avoid -->
<div tohHeroButton></div>

7
public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.ts Normal file
View File

@ -0,0 +1,7 @@
// #docregion
/* avoid */
@Component({
selector: '[tohHeroButton]'
})
export class HeroButtonComponent {}

9
public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.ts Normal file
View File

@ -0,0 +1,9 @@
// #docregion
import { Component } from 'angular2/core';
// #docregion example
@Component({
selector: 'toh-hero-button'
})
export class HeroButtonComponent {}
// #enddocregion example

5
public/docs/_examples/style-guide/ts/05-04/app/heroes/hero.model.ts Normal file
View File

@ -0,0 +1,5 @@
// #docregion
export class Hero {
id: number;
name: string;
}

52
public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts Normal file
View File

@ -0,0 +1,52 @@
// #docregion
/* avoid */
@Component({
selector: 'toh-heroes',
template: `
<div>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="#hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name | uppercase}} is my hero</h2>
</div>
</div>
`,
styleUrls: [`
.heroes {
margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
})
export class HeroesComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
}

28
public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.css Normal file
View File

@ -0,0 +1,28 @@
/* #docregion */
.heroes {
margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}

12
public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html Normal file
View File

@ -0,0 +1,12 @@
<!-- #docregion -->
<div>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="#hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name | uppercase}} is my hero</h2>
</div>
</div>

16
public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts Normal file
View File

@ -0,0 +1,16 @@
// #docregion
import { Component, OnInit } from 'angular2/core';
import { Hero } from './hero.model';
// #docregion example
@Component({
selector: 'toh-heroes',
templateUrl: 'heroes.component.html',
styleUrls: ['heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
}
// #enddocregion example

17
public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.avoid.ts Normal file
View File

@ -0,0 +1,17 @@
// #docregion
/* avoid */
@Component({
selector: 'toh-hero-button',
template: `<button></button>`,
inputs: [
'label'
],
outputs: [
'change'
]
})
export class HeroButtonComponent {
change = new EventEmitter<any>();
label: string;
}

13
public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.ts Normal file
View File

@ -0,0 +1,13 @@
// #docregion
import { Component, Input, Output, EventEmitter } from 'angular2/core';
// #docregion example
@Component({
selector: 'toh-hero-button',
template: `<button>OK</button>`
})
export class HeroButtonComponent {
@Output() change = new EventEmitter<any>();
@Input() label: string;
}
// #enddocregion example

4
public/docs/_examples/style-guide/ts/05-13/app/app.component.avoid.html Normal file
View File

@ -0,0 +1,4 @@
<!-- #docregion -->
<!-- avoid -->
<toh-hero-button labelAttribute="OK" (changeEvent)="doSomething()">
</toh-hero-button>

3
public/docs/_examples/style-guide/ts/05-13/app/app.component.html Normal file
View File

@ -0,0 +1,3 @@
<!-- #docregion -->
<toh-hero-button label="OK" (change)="doSomething()">
</toh-hero-button>

11
public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.avoid.ts Normal file
View File

@ -0,0 +1,11 @@
// #docregion
/* avoid */
@Component({
selector: 'toh-hero-button',
template: `<button>{{label}}</button>`
})
export class HeroButtonComponent {
@Output('changeEvent') change = new EventEmitter<any>();
@Input('labelAttribute') label: string;
}

13
public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.ts Normal file
View File

@ -0,0 +1,13 @@
// #docregion
import { Component, Input, Output, EventEmitter } from 'angular2/core';
// #docregion example
@Component({
selector: 'toh-hero-button',
template: `<button>{{label}}</button>`
})
export class HeroButtonComponent {
@Output() change = new EventEmitter<any>();
@Input() label: string;
}
// #enddocregion example

37
public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.avoid.ts Normal file
View File

@ -0,0 +1,37 @@
// #docregion
/* avoid */
export class ToastComponent implements OnInit {
private defaults = {
title: '',
message: 'May the Force be with You'
};
message: string;
title: string;
private toastElement: any;
ngOnInit() {
this.toastElement = document.getElementById('toh-toast');
}
// private methods
private hide() {
this.toastElement.style.opacity = 0;
window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
}
activate(message = this.defaults.message, title = this.defaults.title) {
this.title = title;
this.message = message;
this.show();
}
private show() {
console.log(this.message);
this.toastElement.style.opacity = 1;
this.toastElement.style.zIndex = 9999;
window.setTimeout(() => this.hide(), 2500);
}
}

40
public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.ts Normal file
View File

@ -0,0 +1,40 @@
// #docregion
import { Component, OnInit } from 'angular2/core';
@Component({
selector: 'my-toast',
template: `...`
})
// #docregion example
export class ToastComponent implements OnInit {
// public properties
message: string;
title: string;
// private fields
private defaults = {
title: '',
message: 'May the Force be with You'
};
private toastElement: any;
// public methods
activate(message = this.defaults.message, title = this.defaults.title) {
this.title = title;
this.message = message;
this.show();
}
ngOnInit() {
this.toastElement = document.getElementById('toh-toast');
}
// private methods
private hide() {
this.toastElement.style.opacity = 0;
window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
}
private show() {
console.log(this.message);
this.toastElement.style.opacity = 1;
this.toastElement.style.zIndex = 9999;
window.setTimeout(() => this.hide(), 2500);
}
}
// #endregion example

18
public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts Normal file
View File

@ -0,0 +1,18 @@
// #docregion
/* avoid */
export class HeroListComponent implements OnInit {
heroes: Hero[];
constructor(private http: Http) {}
getHeros() {
this.heroes = [];
this.http.get(heroesUrl)
.map((response: Response) => <Hero[]>response.json().data)
.catch(this.exceptionService.catchBadResponse)
.finally(() => this.spinnerService.hide())
.subscribe(heroes => this.heroes = heroes);
}
ngOnInit() {
this.getHeros();
}
}

24
public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.ts Normal file
View File

@ -0,0 +1,24 @@
// #docregion
import { Component, OnInit } from 'angular2/core';
import { Hero, HeroService } from './shared/index';
@Component({
selector: 'toh-hero-list',
template: `...`
})
// #docregion example
export class HeroListComponent implements OnInit {
heroes: Hero[];
constructor(private heroService: HeroService) {}
getHeros() {
this.heroes = [];
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
ngOnInit() {
this.getHeros();
}
}
// #enddocregion example

5
public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.model.ts Normal file
View File

@ -0,0 +1,5 @@
// #docregion
export class Hero {
id: number;
name: string;
}

13
public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts Normal file
View File

@ -0,0 +1,13 @@
// #docregion
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Rx';
import { Hero } from './hero.model.ts';
@Injectable()
export class HeroService {
getHeroes() {
let heroes: Hero[] = [];
return Observable.of(heroes);
}
}

3
public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts Normal file
View File

@ -0,0 +1,3 @@
// #docregion
export * from './hero.model.ts';
export * from './hero.service.ts';

3
public/docs/_examples/style-guide/ts/05-16/app/app.component.avoid.html Normal file
View File

@ -0,0 +1,3 @@
<!-- #docregion -->
<!-- avoid -->
<toh-hero (onSavedTheDay)="onSavedTheDay($event)"></toh-hero>

2
public/docs/_examples/style-guide/ts/05-16/app/app.component.html Normal file
View File

@ -0,0 +1,2 @@
<!-- #docregion -->
<toh-hero (savedTheDay)="onSavedTheDay($event)"></toh-hero>

12
public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.avoid.ts Normal file
View File

@ -0,0 +1,12 @@
// #docregion
/* avoid */
// #docregion example
@Component({
selector: 'toh-hero',
template: `...`
})
export class HeroComponent {
@Output() onSavedTheDay = new EventEmitter<boolean>();
}
// #enddocregion example

14
public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.ts Normal file
View File

@ -0,0 +1,14 @@
// #docregion
import { Component, Output, EventEmitter } from 'angular2/core';
@Component({
selector: 'toh-hero',
template: `...`
})
// #docregion example
export class HeroComponent {
@Output() savedTheDay = new EventEmitter<boolean>();
}
// #enddocregion example

5
public/docs/_examples/style-guide/ts/05-17/app/heroes/hero.model.ts Normal file
View File

@ -0,0 +1,5 @@
// #docregion
export class Hero {
id: number;
name: string;
}

19
public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts Normal file
View File

@ -0,0 +1,19 @@
// #docregion
/* avoid */
@Component({
selector: 'toh-heroes-list',
template: `
<section>
Our list of heroes:
<hero-profile *ngFor="#hero of heroes" [hero]="hero">
</hero-profile>
Total powers: {{totalPowers}}<br>
Average power: {{totalPowers / heroes.length}}
</section>
`
})
export class HeroesListComponent {
heroes: Hero[];
totalPowers: number;
}

24
public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.ts Normal file
View File

@ -0,0 +1,24 @@
// #docregion
import { Component } from 'angular2/core';
import { Hero } from './hero.model.ts';
// #docregion example
@Component({
selector: 'toh-heroes-list',
template: `
<section>
Our list of heroes:
<hero-profile *ngFor="#hero of heroes" [hero]="hero">
</hero-profile>
Total powers: {{totalPowers}}<br>
Average power: {{avgPower}}
</section>
`
})
export class HeroesListComponent {
heroes: Hero[];
totalPowers: number;
avgPower: number;
}
// #enddocregion example

5
public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.model.ts Normal file
View File

@ -0,0 +1,5 @@
// #docregion
export class Hero {
id: number;
name: string;
}

17
public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.service.ts Normal file
View File

@ -0,0 +1,17 @@
// #docregion
import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import { Hero } from './hero.model';
@Injectable()
// #docregion example
export class HeroService {
constructor(private http: Http) { }
getHeroes() {
return this.http.get('api/heroes')
.map((response: Response) => <Hero[]>response.json().data);
}
}
// #enddocregion example

15
public/docs/_examples/style-guide/ts/07-03/app/app.component.ts Normal file
View File

@ -0,0 +1,15 @@
// #docregion
import { Component } from 'angular2/core';
import { HeroListComponent } from './heroes/hero-list.component';
import { HeroService } from './heroes/shared/hero.service';
@Component({
selector: 'toh-app',
template: `
<toh-heroes></toh-heroes>
`,
directives: [HeroListComponent],
providers: [HeroService]
})
export class AppComponent {}

21
public/docs/_examples/style-guide/ts/07-03/app/heroes/hero-list.component.ts Normal file
View File

@ -0,0 +1,21 @@
// #docregion
import { Component, OnInit } from 'angular2/core';
import { HeroService } from './shared/hero.service';
import { Hero } from './shared/hero.model';
@Component({
selector: 'toh-heroes',
template: `
<pre>{{heroes | json}}</pre>
`
})
export class HeroListComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
}
}

5
public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.model.ts Normal file
View File

@ -0,0 +1,5 @@
// #docregion
export class Hero {
id: number;
name: string;
}

13
public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts Normal file
View File

@ -0,0 +1,13 @@
// #docregion
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Rx';
import { Hero } from './hero.model.ts';
@Injectable()
export class HeroService {
getHeroes() {
let heroes: Hero[] = [];
return Observable.of(heroes);
}
}

3
public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/index.ts Normal file
View File

@ -0,0 +1,3 @@
// #docregion
export * from './hero.model.ts';
export * from './hero.service.ts';

8
public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.avoid.ts Normal file
View File

@ -0,0 +1,8 @@
// #docregion
/* avoid */
export class HeroArena {
constructor(
@Inject(HeroService) private heroService: HeroService,
@Inject(Http) private http: Http) {}
}

14
public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.ts Normal file
View File

@ -0,0 +1,14 @@
// #docregion
import { Injectable } from 'angular2/core';
import { Http } from 'angular2/http';
import { HeroService } from './shared/index';
// #docregion example
@Injectable()
export class HeroArena {
constructor(
private heroService: HeroService,
private http: Http) {}
}
// #enddocregion example

5
public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.model.ts Normal file
View File

@ -0,0 +1,5 @@
// #docregion
export class Hero {
id: number;
name: string;
}

13
public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts Normal file
View File

@ -0,0 +1,13 @@
// #docregion
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Rx';
import { Hero } from './hero.model.ts';
@Injectable()
export class HeroService {
getHeroes() {
let heroes: Hero[] = [];
return Observable.of(heroes);
}
}

3
public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts Normal file
View File

@ -0,0 +1,3 @@
// #docregion
export * from './hero.model.ts';
export * from './hero.service.ts';

12
public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.avoid.ts Normal file
View File

@ -0,0 +1,12 @@
// #docregion
/* avoid */
@Component({
selector: 'toh-hero-button',
template: `<button>OK<button>`
})
export class HeroButtonComponent {
onInit() { // mispelled
console.log('The component is initialized');
}
}

14
public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.ts Normal file
View File

@ -0,0 +1,14 @@
// #docregion
import {Component, OnInit} from 'angular2/core';
// #docregion example
@Component({
selector: 'toh-hero-button',
template: `<button>OK<button>`
})
export class HeroButtonComponent implements OnInit {
ngOnInit() {
console.log('The component is initialized');
}
}
// #enddocregion example

22
public/docs/_examples/style-guide/ts/10-01/app/app.component.ts Normal file
View File

@ -0,0 +1,22 @@
// #docregion
import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { HeroService } from './shared';
import { NavComponent } from './layout/nav.component';
@Component({
selector: 'toh-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES, NavComponent],
providers: [
ROUTER_PROVIDERS,
HeroService
]
})
@RouteConfig([
{ path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
{ path: '/heroes/...', name: 'Heroes', component: HeroesComponent },
])
export class AppComponent {}

789
public/docs/ts/latest/guide/style-guide.jade
View File

File diff suppressed because it is too large Load Diff

3
public/resources/css/main.scss
View File

@ -48,10 +48,11 @@
@import 'module/filetree';
@import 'module/support';
@import 'module/article-card';
@import 'module/style-guide';
/*
* PRINT STYLES
*
*/
@import 'print';
@import 'print';

11
public/resources/css/module/_style-guide.scss Normal file
View File

@ -0,0 +1,11 @@
.s-rule {
margin-left: 12px;
font-style: italic;
background: #ECEFF1;
padding: 0 0 0 8px;
}
.s-why {
margin-left: 20px;
}

109
tslint.json Normal file
View File

@ -0,0 +1,109 @@
{
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"eofline": true,
"forin": true,
"indent": [
true,
"spaces"
],
"label-position": true,
"label-undefined": true,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
"static-before-instance",
"variables-before-functions"
],
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
"no-inferrable-types": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-unreachable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"quotemark": [
true,
"single"
],
"radix": true,
"semicolon": [
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
],
"directive-selector-name": [true, "camelCase"],
"component-selector-name": [true, "kebab-case"],
"directive-selector-type": [true, "attribute"],
"component-selector-type": [true, "element"],
"directive-selector-prefix": [true, "toh"],
"component-selector-prefix": [true, "toh"],
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
}