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//定義爲任意類型，適用於調取接口時不知道返回的數據是何種類型