angular基本使用小技巧
你好！ 如果你想學習如何使用angular技巧, 可以仔細閱讀這篇文章，了解一下angular的基本語法知識，
一、起步
1.安裝 Angular CLI
npm install -g @angular/cli
2.創建專案
ng new my-app
3.運行專案
ng serve -o
4.創建頁面
創建自定義頁面：ng g c 創建的頁面路徑， 如：ng g c components/home，在components目錄下創建了一個home的頁面
ng g c components/home
4.配置路由
在app-routing.module.ts頁面下配置路由，小技巧：可以先去app.module.ts目錄下，復制創建生成的HomeComponent路徑，然后在app-routing.module.ts粘貼參考即可
import { HomeComponent } from './components/home/home.component';
const routes: Routes = [
{
data:{title:"首頁"},
path:"home",
component:HomeComponent
}
]
二、常用指令
1.*ngIf
下面展示一些 *ngIf用來顯示隱藏
<div *ngIf="show"></div>
2.*ngFor
下面展示一些 let item of list用來回圈遍歷陣列
<div *ngFor="let data of list"></div>
3.[class]
下面展示一些 [class] [style]，這是屬性指令
<div [class]="attr"></div>
<div [style]="{color:'red'}"></div>
4.(click)
下面展示一些 (click)，這是點擊事件，click后面注意必須得加 () 如:getclick()，
<div (click)="getclick()"></div>
5.[(ngModel)]
下面展示一些 [(ngModel)]，雙向系結輸入框
<input [(ngModel)]="num" />
<selest[(ngModel)]="select" />
<option>懂得都懂</option>
</select>
~~最后，請大家關注我并轉發此篇文章，以上就是對AngularJS 小技巧的使用，后續繼續補充相關資料，謝謝大家對我的支持！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277043.html
標籤：其他
上一篇：echarts地圖 湖南|陜西|北京|貴州等全國各個地區地圖
下一篇：引入圖示字體的三種方式