angular-1

概念

• 构建前端界面的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>