Angular2開發拙見

2022-07-28 05:54:13 字數 1675 閱讀 7153

本文集中講講筆者目前使用ng2來開發專案時對其元件的使用的個人的一些拙劣的經驗。

先簡單講講從ng1到ng2框架下元件的職責與地位:

ng1中的一大特色——指令,分為屬性型、標籤型、css型別和注釋型。其中寫在css類以及注釋中的元件想必多數人都不會去使用,而屬性型指令與標籤型指令則是ng1火遍宇宙的功臣之一。在ng2中,標籤型指令乾脆被分離出來,追隨vue等新興勢力的風格公升級並稱為元件,並用來處理所有與檢視(dom)打交道的事情,包括展示資料與動畫。而屬性型指令則用於完善元件的功能,比如接收使用者輸入、響應使用者點選等事件。其實ng2中內嵌的許多功能都是屬性型指令——ngfor、ngif等等,而對於元件來說比較依賴具體的專案,所以跟適合基於專案來使用元件寫出乙個個使用者看得見的介面來。同時元件還需要與路由打交道,前端路由可以看成是動態更改dom,在ng2路由中制定好規則後,其實就是在動態渲染或銷毀不同的元件,以此實現前端頁面的切換。

1. 照著官方的做法,每個應用得有乙個根元件。

2. 區分前端路由,每個路由條目指向乙個元件,每個元件各自渲染乙個頁面。

3. 專案擴大,單模組不能滿足業務分類,所以先由根路由引導懶載入各個子模組,然後由子模組的子路由各自指向具體的子元件,並渲染各自的頁面。

4. 著眼單個子元件渲染的單個頁面,其實可以將一些可重用的標籤塊封裝到乙個新的元件裡(比如需要ngfor遍歷的複雜資料項)。

5. 發現其實有一些元件(比如側邊按鈕或訊息模態框)其實整個專案都可能使用到,得把這些封裝成全域性共享的元件。

到現在自己都覺得有一點亂,究其原因,應該是元件這個名稱的問題,因為在ng2框架下,大到路由頁面小到資料條目全都用的元件,宣告方式全都乙個模樣,難免會亂。

沒辦法只能自己來給元件繼續細分類別了,筆者於是把ng2的元件分成了四類:

布局元件

單位元件

共享元件

如果純文字不夠形象,筆者再給出自己畫的簡易版ng2超級無敵前端架構圖:

講來講去其實這裡面完全沒有技術難點,只是在暗示著一件事——專案目錄安排很重要。

ng2可不認識筆者給它細分的這麼多型別的元件,這些分類是給自己看的,具體的體現就是以這個分類體系得出的乙個專案目錄結構。

以筆者自己在寫的乙個專案為例:

筆者給資料夾命名前面有的加上了加號有的加上了減號,也算是自己的一種看似奇怪的目錄結構安排了。

解釋一下就是:最外層這個+term代表整個懶載入模組的目錄,裡面帶加號的目錄下的元件代表是頁面元件,什麼符號都沒有的代表是布局元件,帶減號的目錄下的元件代表是單位元件,單位元件可能在整個懶載入模組中都使用到,所以直接在懶載入目錄的最外層,而布局元件都在具體的頁面元件同級目錄下。

總結就是拋開es6與typescript的外表後ng2元件的使用在技術上難點不算多,本文純粹是一點拙劣的經驗之談,當然筆者目前的經驗還遠遠不足,希望在日後的開發以致研究透徹ng2原始碼後能有更深的見解。

angular2 發布angular2模組,服務

上回說到了如何利用npm包管理器發布自己的包,這次咱們就來個實踐。1 寫好自己的元件 2 利用npm發布自己的元件 3 使用包 基於angular2的架構,一般都需要下列檔案 html檔案,css檔案,component檔案,module檔案。component檔案內容 import區域 impor...

使用angular2開發管理系統專案

公司內部有乙個內部專案,功能是對一些資料進行crud,所以前端方面便選擇了angular2。當時最新版本是beta1,整個開發流程總共花了一周的時間。webpack的配置直接使用了angular2 webpack starter裡的配置。ng2最麻煩的應該就是環境配置了,得益於這個github的專案...

Angular2表單驗證

angular2中使用表單,首先要在from上新增 forma ngform 這個是給from定義成了angular的from物件 form horizontal forma ngform ngsubmit onsubmit showmodal 下面的label中的for對應著input中的id值,...