概念
构建前端界面的mvvm框架
angularJS 1系列
angular 2-9
安装
- 安装脚手架
npm install -g @angular/cli
脚手架常用命令
ng new 项目名称
创建一个新的项目ng serve
启动项目ng g c 组件名称
创一个组件ng g s 服务名
创一个服务
angular启动过程
main.ts 引导启动
根模块app.moudule.ts 启动
根组件
包含组件服务指令路由app.component.ts 根组件
-
index.html
- 根组件会替换掉该<app-root>指令
angular 核心概念
组件
- 分割复杂业务逻辑
重用功能
模块
- 组织 组件 服务 路由等
模板
- html模板
元数据(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>
类与样式绑定
myclass = 'active'
mystyle = {color:"yellow","font-size":'38px','font-weight':900}
<p [class]="myclass">只为 求得此生一寸心安</p>
<p [ngClass]="{'active':flag}">抬眼望 是狼烟</p>
<p [class.active]="flag">迟迟 不见当年的独我言</p>
<p [style.color]="flag?'orange':'green'">样式绑定</p>
<p [ngStyle]="mystyle">山水觅</p>
<p [ngStyle]="{'color':'pink','font-size':'24px'}">却不现</p>
<style>
.active{color: skyblue;}
</style>
表单绑定
- 在
app.module.ts中
import {FormsModule} from '@angular/forms';
// 导入表单模块
@NgModule({
imports: [
FormsModule,
],
})
msg = '寻常巷陌尽日暮 花深处 我误入';
<p>手动双向绑定:<br>
<input type="text" [value]="msg" (input)="msg=$event.target.value">
</p>
<p>FormsModule 自动双向绑定:<br>
<input type="text" [(ngModel)]="msg">
</p>
checkbox绑定
sel = false;
<p>
<input type="checkbox" [(ngModel)]="sel">阅读并同意条款
</p>
<p><button [disabled]="!sel">登录</button></p>
下拉选择
hobby = '吃饭';
<p>下拉 - {{hobby}}</p>
<select [(ngModel)]="hobby">
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="打豆豆">打豆豆</option>
</select>
标签引用
msg = '我爱我的祖国';
<input type="text" #phone><br><br>
<button (click)="msg=phone.value">修改</button>
默认管道-过滤器
d = new Date();
obj = {name:"abc",age:5,arr:[1,2,3]};
<p>时间:{{d}}</p>
<p>时间:{{d|date:'yy-MM-dd HH:mm:ss'}}</p>
<p>json:{{obj|json}}</p>
<p>数字:{{3.1415926|number:'1.2-2'}}</p>
截取管道|slice
list = ["jquery","vue","react","angular"];
<ul>
<li *ngFor="let item of list|slice:2:4;let i=index">
{{i+1}} {{item}}
</li>
</ul>
