Angular

标签：quick   inpu   .sh   name   ppc   port   service   前端   api   

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;

　　});

Angular

标签：quick   inpu   .sh   name   ppc   port   service   前端   api   

原文地址：https://www.cnblogs.com/embeddedking/p/9886383.html