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