版本
`
angularJS 1系列
angular 2-9
`
安装
npm install -g @angular/cli 安装脚手架
常用命令
ng new 项目名 //创建一个新的项目
ng serve //启动项目
ng g c 组件名称 //创建一个组件
ng g s 服务名 //创建一个服务
元数据(class装饰器)
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls:['./app.component.css']
})
数据绑定
{{}}
指令
业务逻辑与模板链接在一起的命令
服务
为多个组件提供数据函数xxx等服务
依赖注入
把服务注入到内部组件
使用
文本渲染
在app.component.ts中(下同)
export class AppComponent {
title = 'myng';
msg = '你好';
}
在app.component.html中(下同)
<p>{{msg}}</p>
<p [innerHTML] = "msg"></p>
条件渲染
flag = true;
<div *ngIf="flag else myelse">桥如虹，水如空</div>
<ng-template #myelse>一页飘然烟雨中</ng-template>
列表渲染
list = ["jquery","vue","react","angular"];
<ul>
<li *ngFor="let item of list;let i=index"
(click)="setCurrent($event,i)"
[ngClass]="{'active':i==current}">
{{i+1}} {{item}}
</li>
</ul>
事件绑定
showMsg(e){
console.log("abc");
}
flag = true;
<button (click)="showMsg($event)">响应函数</button> |
<button (click)="flag=!flag">变身</button> |
<button (click)="msg=''奥利给"></button> |
<button (click)="msg=$event.target.innerHTML">事件参数</button>
复选框
<p><input type="checkbox" [(ngModel)]="sel">同意并阅读条款</p>
<p><button [disabled]="!sel">登录</button></p>
下拉列表
<select [(ngModel)]="hobby">
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="打豆豆">打豆豆</option>
</select>
<p>选中的爱好：{{ hobby }}</p>
Class 与 Style 绑定
class
<p [class]="myclass">夏天来了!!!</p>
<p [ngClass]="{'active':!flag}">我相信明天会更好</p>
<p [class.active]="flag">我相信明天会更好</p>
style
<p [style.color]="flag?'orangered':'red'">样式绑定</p>
<p [ngStyle]="mystyle">吃得苦中苦</p>
<p [ngStyle]="{'color':'red','font-size':'24px'}">方为人上人</p>
默认管道-过滤器
<p>时间:{{d}}</p>
<p>时间：{{d|date:'yy-MM-dd HH:mm:ss'}}</p>
<p>json: {{obj|json}}</p>
<p>数字：{{3.1415926 | number:'1.2-4'}}</p>
<p>截取管道 | slice</p>
<ul>
<li
*ngFor="let item of list|slice:2:4;let i=index">
{{i+1}} - {{item}}
</li>
</ul>
