Angular

1. git clone

git clone https://github.com/angular/quickstart ng4-quickstart

2. 双向绑定：

前端：<input type="text" ng-model="name"> <h1>Hello {{name}} {{address.city}}</h1>

后端：export class AppComponent {name = ‘Hello‘; address = {province: ‘江苏‘,city: ‘苏州‘}} //address是对象

利用Angular内置json管道显示对象信息：<p>{{address | json}}</p>

3. 表单

<form (submit)="addSkill(skill.value)">

　　<label>添加剂能</label>

　　<input type="text" #skill>

</form>

4. 事件绑定

<button (click)="toggleSkills()">

　　{{showSkill ? "隐藏技能" : "显示技能"}}

</button>

toggleSkills() {this.showSkill = !this.showSkill;}

5. *ngIf *ngFor

<div *ngIf = "members">

　　<li *ngFor = "let member of members;" >

　　</li>

</div>

6. HTTP

this.http.get(‘https://api.github.com...‘)

　　.map(res => res.json())

　　.subscribe(data => {

　　　　if(data) this.members = data;

　　});

7. 注入

export class MemberService{

　　getMembers(){

　　　　return this.http.get(‘https://api...‘).map(res => res.json())

　　}

}

this.memberservice.getMembers()

　　.subscribe(data => {

　　　　if(data) this.members = data;

　　});