Angular使用及语法

Angualr使用

版本

• 1.X是MVC模式 写的是JS交互事件
• 2.x是MVVM模式 写的TS交互事件

准备工作

全局安装

npm i -g @angular/cli 版本号：9.1.5

创建项目

ng new ngdome（项目名称）

启动项目

ng serve 或者npm start

创建组件

ng generate component components/index（自己创建的文件夹及组件名）

简写：ng g c components/index（自己创建的文件夹及组件名字）

注意：文件夹没有的话自动创建有的话在已有文件夹下面创建组件

语法

页面渲染

{{要渲染的值}}

动态变量

<img [src]="imgurl" alt/>

<a [href]="baurl">百度一下</a>

双向数据绑定

<input type="text" [(ngModel)="变量名"]

注意：需要配置

//在Angular中表单属于特殊模块，不可以直接引用双向数据绑定，需要调取表单模块app.module.ts中，配置如下：
import {FormsModule}from "@angular/forms"

@NgModule({
  declarations: [
	//声明了所有组件
  ],
  imports: [
   //引入模块
    FormsModule
  ],
  providers: [
      //服务
  ],
  //声明跟组件
  bootstrap: [AppComponent]
})

条件判断

<h1 *ngIf="value">条件判断</h1>

注意：只有IF判断没有show的概念

使用场景：控制显示隐藏

点击事件

<button (click)="getshow">点我有惊喜</button>

注意：必须加小括号否则不能执行

键盘事件

<h1 (keydown)="enter($event)">

enter(e){
    if(keyCode === 13){
        逻辑代码
    }
}

使用场景：回车键及上下键

循环事件

<li *ngFor="let item of list let i =index">{{item}}</li>

注意：item----要循环的元素 i-----索引值 index-----这个不可以改变

---

TypeScript

• 基础使用

msg:String //定义字符串
num:Number //定义数字类型
flag:Boolean//定义布尔类型
address:Object//定义对象类型
arr:Array<String>//定义数组内部是字符串类型
arrs:String[]//定义数组内容是字符串
datalist:Array<Object>//定义数组里嵌套对象，一般是调取Api接口
list:any//定义为任意类型，适用于调取接口时不知道返回的数据是何种类型