Angular

angular

概念

构建前端界面的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.module.ts 启动根组件
包含组件，服务，指令，路由
app.component.ts 根组件
index.html
根组件会替换掉该<app-root>指令

angular 核心概念

组件

分割复杂业务逻辑
重用功能

模块

阻止组件服务路由等

模板

html模板

元数据（class装饰器）

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

如果来组织处理组件

数据绑定 {{ }}

指令

业务逻辑与模板链接在一起的命令

服务

为多个组件提供数据函数xxx等服务

文本绑定

<p>Message: {{ msg }}</p>
<p [innerHTML]="msg"></p>

属性绑定

p>
  <img [src]="url" alt="">
</p>
<p>
  <img bind-src="url" alt="">
</p>
<p>
  <img src="{{url}}" alt="">
</p>

列表渲染

<ul>
  <li 
  *ngFor="let item of list  ;let i=index">
    {{i+1}} - {{item}}
  </li>
</ul>

条件渲染

<div *ngIf="flag else blockif">我喜欢if</div>
<ng-template #blockif>我爱else</ng-template>

事件处理

<button (click)="showMsg($event)">响应函数</button> |
<button (click)="flag=!flag">变身</button> |
<button (click)="msg='神奇文本'">神奇文本</button> |
<button (click)="msg=$event.target.innerHTML">事件参数</button>

表单输入绑定

文本

配置app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<p>手动双向绑定:
  <input type="text" [value]="msg" (input)="msg=$event.target.innerHTML">
</p>
<p>FormsModule 自动双向绑定:
  <input type="text" [(ngModel)]="msg">
</p>

复选框

<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>