我爱编程

Angular2 笔记

2018-03-20  本文已影响28人  Realank

安装相关:

安装Angular CLI工具:

npm install -g @angular/cli

创建新应用:

ng new new-app

启动应用服务器

//cd add directory
ng serve --open  //open参数自动打开浏览器

创建新的内容

创建新组件

ng generate component newcomponent

创建服务

ng generate service newservice --module=app //后面的参数把服务自动提供给AppModule

创建模块

ng generate module app-routing --flat --module=app
//--flat 把这个文件放进了 src/app 中,而不是单独的目录中。
//--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中

创建类(也可以直接创建一个ts文件)

ng generate class newclass

创建指令

ng generate directive highlight

数据绑定

在html中显示组件中的属性

{{title}}

CSS 类绑定

<span [hidden]="isUnchanged">changed</span>
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>

for循环

<div *ngFor="let hero of heroes">{{hero.name}}</div>

属性绑定:

<img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>

事件绑定:

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
上一篇 下一篇

猜你喜欢

热点阅读