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
  根组件会替换掉该指令

angular 核心概念

组件

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

模块

阻止 组件 服务 路由 等

模板

html模板

元数据（class装饰器）

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

如果来组织处理组件

数据绑定 {{ }}

指令

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

服务

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

文本绑定

Message: {{ msg }}

属性绑定

p>
  


  


  

列表渲染

  

    {{i+1}} - {{item}}
  

条件渲染

我喜欢if
我爱else

事件处理

响应函数 |
变身 |
神奇文本 |
事件参数 

表单输入绑定

文本

配置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 { }

手动双向绑定:
  

FormsModule 自动双向绑定:
  

复选框

同意并阅读条款
登录

下拉列表

  吃饭
  睡觉
  打豆豆

选中的爱好：{{ hobby }}

Class 与 Style 绑定

class

夏天来了!!!
我相信明天会更好
我相信明天会更好

style

样式绑定
吃得苦中苦
方为人上人

默认管道-过滤器

时间:{{d}}
时间：{{d|date:'yy-MM-dd HH:mm:ss'}}
json: {{obj|json}}
数字：{{3.1415926 | number:'1.2-4'}}
截取管道 | slice

  

    {{i+1}} - {{item}}