angluar2学习（一）

1、文件结构

angular-tour-of-heroes

src

app

app.component.ts

app.module.ts

main.ts

index.html

styles.css

systemjs.config.js

tsconfig.json

node_modules ...

package.json

各模块作用：

1》app.component.ts  //APP的入口，主结构

2》app.modules.ts //引入需要的组件

3》hero.ts //声明的公共的类

4》hero-detail //声明子组件

2、一个简单的例子

1. import{Component,Input}from'@angular/core';
2.  
3. import{Hero}from'./hero';
4. @Component({
5. selector:'hero-detail',
6. template:`
7. <div *ngIf="hero">
8. <h2>{{hero.name}} details!</h2>
9. <div><label>id: </label>{{hero.id}}</div>
10. <div>
11. <label>name: </label>
12. <input [(ngModel)]="hero.name" placeholder="name"/>
13. </div>
14. </div>
15. `
16. })
17. exportclassHeroDetailComponent{
18. @Input() hero:Hero;
19. }

1. import{Component}from'@angular/core';
2.  
3. import{Hero}from'./hero';
4.  
5. const HEROES:Hero[]=[
6. { id:11, name:'Mr. Nice'},
7. { id:12, name:'Narco'},
8. { id:13, name:'Bombasto'},
9. { id:14, name:'Celeritas'},
10. { id:15, name:'Magneta'},
11. { id:16, name:'RubberMan'},
12. { id:17, name:'Dynama'},
13. { id:18, name:'Dr IQ'},
14. { id:19, name:'Magma'},
15. { id:20, name:'Tornado'}
16. ];
17.  
18. @Component({
19. selector:'my-app',
20. template:`
21. <h1>{{title}}</h1>
22. <h2>My Heroes</h2>
23. <ul class="heroes">
24. <li *ngFor="let hero of heroes"
25. [class.selected]="hero === selectedHero"
26. (click)="onSelect(hero)">
27. <span class="badge">{{hero.id}}</span> {{hero.name}}
28. </li>
29. </ul>
30. <hero-detail [hero]="selectedHero"></hero-detail>
31. `,
32. styles:[`
33. .selected {
34. background-color: #CFD8DC !important;
35. color: white;
36. }
37. .heroes {
38. margin: 0 0 2em 0;
39. list-style-type: none;
40. padding: 0;
41. width: 15em;
42. }
43. .heroes li {
44. cursor: pointer;
45. position: relative;
46. left: 0;
47. background-color: #EEE;
48. margin: .5em;
49. padding: .3em 0;
50. height: 1.6em;
51. border-radius: 4px;
52. }
53. .heroes li.selected:hover {
54. background-color: #BBD8DC !important;
55. color: white;
56. }
57. .heroes li:hover {
58. color: #607D8B;
59. background-color: #DDD;
60. left: .1em;
61. }
62. .heroes .text {
63. position: relative;
64. top: -3px;
65. }
66. .heroes .badge {
67. display: inline-block;
68. font-size: small;
69. color: white;
70. padding: 0.8em 0.7em 0 0.7em;
71. background-color: #607D8B;
72. line-height: 1em;
73. position: relative;
74. left: -1px;
75. top: -4px;
76. height: 1.8em;
77. margin-right: .8em;
78. border-radius: 4px 0 0 4px;
79. }
80. `]
81. })
82. export class AppComponent{
83. title ='Tour of Heroes';
84. heroes = HEROES;
85. selectedHero:Hero;
86.  
87. onSelect(hero:Hero):void{
88. this.selectedHero= hero;
89. }
90. }

export class Hero{ id: number; name:string;}

1. import{NgModule}from'@angular/core';
2. import{BrowserModule}from'@angular/platform-browser';
3. import{FormsModule}from'@angular/forms';
4.  
5. import{AppComponent}from'./app.component';
6. import{HeroDetailComponent}from'./hero-detail.component';
7.  
8. @NgModule({
9. imports:[
10. BrowserModule,
11. FormsModule
12. ],
13. declarations:[
14. AppComponent,
15. HeroDetailComponent
16. ],
17. bootstrap:[AppComponent]
18. })
19. export class AppModule{}

3、修饰器

@component

1> selector 主要指向组件的类名，指定该组件被使用的名

1. @Component({
2. changeDetection?:ChangeDetectionStrategy
3. viewProviders?:Provider[]
4. moduleId?: string
5. templateUrl?: string
6. template?: string
7. styleUrls?: string[]
8. styles?: string[]
9. animations?: any[]
10. encapsulation?:ViewEncapsulation
11. interpolation?:[string, string]
12. entryComponents?:Array<Type<any>|any[]>
13. preserveWhitespaces?: boolean
14. // inherited fromcore/Directive
15. selector?: string
16. inputs?: string[]
17. outputs?: string[]
18. host?:{[key: string]: string}
19. providers?:Provider[]
20. exportAs?: string
21. queries?:{[key: string]: any}
22. })

@Directive

@Directive({selector?: stringinputs?: string[]outputs?: string[]host?:{[key: string]: string}providers?:Provider[]exportAs?: stringqueries?:{[key: string]: any}})

1. @Directive({
2. selector:'interval-dir',
3. outputs:['everySecond','five5Secs: everyFiveSeconds']
4. })
5. classIntervalDir{
6. everySecond =newEventEmitter();
7. five5Secs =newEventEmitter();
8.  
9. constructor(){
10. setInterval(()=>this.everySecond.emit("event"),1000);
11. setInterval(()=>this.five5Secs.emit("event"),5000);
12. }
13. }
14.  
15. @Component({
16. selector:'app',
17. template:`
18. <interval-dir(everySecond)="everySecond()"(everyFiveSeconds)="everyFiveSeconds()">
19. </interval-dir>
20. `
21. })
22. classApp{
23. everySecond(){ console.log('second');}
24. everyFiveSeconds(){ console.log('five seconds');}
25. }

1. @Directive({
2. selector:'button[counting]',
3. host:{
4. '(click)':'onClick($event.target)'
5. }
6. })
7. classCountClicks{
8. numberOfClicks =0;
9.  
10. onClick(btn){
11. console.log("button", btn,"number of clicks:",this.numberOfClicks++);
12. }
13. }
14.  
15. @Component({
16. selector:'app',
17. template:`<button counting>Increment</button>`
18. })
19. classApp{}

1. classGreeter{
2. greet(name:string){
3. return'Hello '+ name+'!';
4. }
5. }
6.  
7. @Directive({
8. selector:'greet',
9. providers:[
10. Greeter
11. ]
12. })
13. classHelloWorld{
14. greeter:Greeter;
15.  
16. constructor(greeter:Greeter){
17. this.greeter= greeter;
18. }
19. }

@input