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//定义为任意类型,适用于调取接口时不知道返回的数据是何种类型