Angular基礎小知識

2021-09-13 11:54:43 字數 1434 閱讀 9366

1.angular的腳手架的安裝

npm(cnpm) i @angular/cli -g    //安裝腳手架

ng new 專案名 //建立專案(缺省會進行npm install)

ng new 專案名 --skip-install //建立專案但是不安裝依賴

ng g component (組建的目錄路徑/)名字  //新增元件 ()裡面表示可選 推薦是components/名字

例子: ng g component components/home //新增home元件,在components目錄下

3.ng定義屬性,ts的語法

4.繫結資料,繫結屬性,繫結html,資料迴圈,條件判斷,ngclass,ngstyle,事件,管道,本地載入,ngswitch

(1) }

//資料繫結

(2) 測試屬性

//屬性繫結,用,表示是變數

(3) 繫結html

//html繫結

(4) }----} //資料迴圈 ngfor item表示迴圈的物件,key表示陣列的索引 都是自定義的名字

(5) 條件判斷

//條件判斷, flag為true就展示, 會刪除dom

(6) 隱藏

//條件判斷, flag為true表示隱藏,不會刪除dom,類似display:none

(7) 測試ngclass

//ngclass 對樣式進行賦值 格式可以是string,array和object,上面是object例子

(8) ngstyle

//ngstyle 有''表示是字串,沒有表示是變數

(9) 事件處理 //事件用()表示,裡面可以傳事件$event物件

(10) }

//管道,類似於filter, date是內部就有的

(11)

(12) ngswitch的操作類似switch語句,status=1時候展示11,status=3展示預設就是33

//使用方法就是[(ngmodel)]繫結到變數

Angular基礎知識

打包 ng build prod aot output hashing all pipe官網鏈結 get format get format 與date format進行資料繫結 template the hero s birthday is toggle format export class h...

angular的基礎知識

本篇主要介紹下angular裡的一些概念,並且在咱們的小應用上加上點料。模板 動態模板,是動態的,直接去處理dom的,而不是通過處理字串模版 靜態模板 mvc 核心思想實現 資料管理 資料模型model 應用邏輯 控制器controller 資料表現 檢視view 三者的之間的分離。view從mod...

angular路由詳解一(基礎知識)

本人原來是ios開發,沒想到工作後,離ios開發原來越遠,走上了前端的坑。一路走來,也沒有向別人一樣遇到乙個技術上的師傅,無奈只能乙個人苦苦摸索。如今又開始填angular的坑了。閒話不扯了。本人學習是根據官網教程,如果想根據官網教程學習,我建議先把官網的例子先學一遍,路由的路基部分,都是根據這個例...