Angular Architecture

首先我們想想為什麼需要「明確的」前端架構？很多時候我們都是希望快速應付使用者或客戶需求，在先求有再求好的心態下，草草開發上線，這樣的做法看似成本很低廉，但是這些作為，卻讓我們在後續的維護、修復和功能擴充上吃足苦頭，付出高昂的代價，無法騰出更多時間去做其他更有價值的事。

在參考很多文章和框架後，歸納出幾點要注意的：

• 首先，我們希望以後的系統能易於維護，也易於擴充
• 其次，我們希望很多可以元件或工具可以重複使用
• 最後，我們得注意執行效能，建置時只導入你需要的套件，runtime時只載入你需要的功能

基於以上幾點，我們開始思考，應該怎麼做，第一個引起注意的，是我們需要分離一些關注點，譬如可以把很多的程序，盡可能地分解成更多個小單元，就像樂高積木一樣，由很多很小的積木，去組成一個大的成品。而這其中，又分成水平分割以及垂直分割，

• 水平分割：類似於MVC這樣的概念，希望每個面向各司其職。

┃Presentation Layer：專注於使用者互動(UI/UX)

┃Business Layer：系統的業務邏輯應用領域

┃Resource Layer：數據資料流

•  垂直分割：把應用程序中的相同功能或子系統相關的功能放在一起，希望能更易於後續維護。

┃Module A┃Module B┃Module C ...

            譬如ModuleA負責病患掛號作業，Module B負責醫師看診作業，ModuleC負責藥劑作業等

接著動手Angular專案建置未來的開發架構，並嘗試把架構畫下來，並做說明。

可以看到App module中包含了core module、shared module和更多的project modules，這樣的概念如同上述的垂直切割，我將分別說明其功用。

• core module：整個架構裡底層的工具，譬如Http發送request 和response，攔劫用的interceptor加工等
• shared module：存放共享的工具，如組件、服務、指令等
• project module：可能是一個子系統或功能，需要import core module和shared module，在project 跟project 之間應該要彼此獨立。

在每一個project裡，又做了更進一步的規劃，包含了views、services、models、pipes、...，這樣的概念如上述的水平切割，

• views：主要進行ui/ux的設計
• services：業務邏輯、資料處理
• models：定義資料架構、類別

如此一來，接手的人只要了解系統架構，就能更明瞭整個專案運作方式，想要擴充功能、維護繼有作業，也能有更好的方向。

補充，至於一開始談到的第三點，後來使用lazy loading的方式載入子系統，只載入需要的，藉以解決龐大系統問題。

最後附上整個開發架構的目錄結構，希望對大家有幫助。

|—–app

|—–core module

—–core_module.ts

|—–shared module

|—–services

|—–views

|—–models

|—–pipes

|—–directives

—–shared.module.ts

|—–project1 module

|—–services

|—–views

|—–models

|—–pipes

|—–directives

—–project1.module.ts

—–project1-routing.ts

|—–project2 module

|—–services

|—–views

|—–models

|—–pipes

|—–directives

—–project1.module.ts

—–project1-routing.ts

—–app.component.html

        —–app.component.css

—–app.component.ts

        —–app.modules.ts

        —–app-routing.module.ts