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.moudule.ts 启动根组件
  包含 组件 服务 指令 路由

• app.component.ts 根组件

• index.html

  • 根组件会替换掉该指令

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中(下同)

{{msg}}

条件渲染

flag = true;

自古情难断 意难全
和衣 栏下醉卧我笑陶潜

列表渲染

list = ["jquery","vue","react","angular"];


    

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

事件绑定

showMsg(e){
  console.log("abc");
}
flag = true;

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

类与样式绑定

myclass = 'active'
mystyle = {color:"yellow","font-size":'38px','font-weight':900}

只为 求得此生一寸心安
抬眼望 是狼烟
迟迟 不见当年的独我言
样式绑定
山水觅
却不现

表单绑定

• 在app.module.ts中

import {FormsModule} from '@angular/forms';
// 导入表单模块
@NgModule({
  imports: [
    FormsModule,
  ],
})

msg = '寻常巷陌尽日暮 花深处 我误入';

手动双向绑定:

    

FormsModule 自动双向绑定:

    

checkbox绑定

sel = false;

    阅读并同意条款

登录

下拉选择

hobby = '吃饭';

下拉 - {{hobby}}

    吃饭
    睡觉
    打豆豆

标签引用

msg = '我爱我的祖国';




修改

默认管道-过滤器

d = new Date();
obj = {name:"abc",age:5,arr:[1,2,3]};

时间:{{d}}
时间:{{d|date:'yy-MM-dd HH:mm:ss'}}
json:{{obj|json}}
数字:{{3.1415926|number:'1.2-2'}}

截取管道|slice

list = ["jquery","vue","react","angular"];


    

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