怎麼組織Angular 專案？以下這篇文章整理分享5 個管理Angular 專案的實用技巧，希望對大家有幫助！ 
前端（vue）入門到精通課程：進入學習
伴隨著新功能的發布， Web apps的體積越發大。在公司DevOps的過程中，這種發布變更每天都會發生。 【相關教學推薦：《angular教學》】
在如此高速的發布週期中，程式碼很快就會變得笨拙。特別是基於JavaScript開發的項目，例如NextJS 或Angular。
以下是我們在管理Angular專案中5 個最好的實踐，以達到最大的可讀性，可維護性和可擴展性。
很多單應用程式核心是具有臃腫類的程式碼庫。從本質上講，這些臃腫的程序很難維護。從某種意義上講，他們很脆弱，脆弱到更改一行程式碼可能會對整個程式產生災難的影響。 single responsibility principle 能阻止這些問題。
單一職責原則意味著組件有且僅有一個功能。
使用這種方法建立應用程式會產生一個模組化框架，其中應用程式是透過這些程式碼區塊串聯在一塊的。
使用這種方法能夠讓程式更易讀和更好地維護。也能夠在應用中很好地定位指定的功能。
為了確保你的程式碼能夠滿足這個要求，你可以問自己一個問題：这代码是干什么的？如果自己的答案包含and這個關鍵字，那麼你需要將你的程式碼重構為單一職責的程式碼。
建立Angular應用程式並對其擴展是一種持續性的練習。在不斷的練習中，使用單一職責原則組織你的項目，將使你的應用程式乾淨，可讀和可維護。
Angular中的modules 是單一原則的實作。在Angular中，每一個模組代表一個分離的和獨立的功能。
Angular中提供了幾種類型模組去指定如何對它們進行邏輯分組或組織。
Core
Core模組是一個NgModule ，用來實例化應用並載入全域使用的核心功能。
所以，任何單例服務都應該在核心模組中實現。頁頭，頁尾或導覽列都是這種類型的模組。
每個應用程式擁有且只有一個實例的所有服務（單例服務）都應該在核心模組實現。例如鑑權服務或使用者服務。
Feature
功能模組代表建構應用程式功能的程式碼。例如，在一個線上購物的應用程式中，我們會有將商品加入購物車的功能和用於付款的單獨模組。
Shared
共享模組由可以被組合以創建新功能的模組組成。例如，搜尋函數在平台中可以被用於多個功能。
以這種方式建立程式碼使事情更加容易定位並增加程式碼可重用性的機會。
如果不遵循通用結構，樣式文件很快就會變得雜亂無章。一般最佳實踐的模式7-1模式，該模式使用7個資料夾和1個文件，如下所示：
App - 專案的主要資料夾
Abstract - 抽象部分，包含所有變數、混合和類似的元件
Core - 包含整個網站的排版、重設和樣板程式碼
Components - 包含要為一個網站建立的所有元件的樣式，例如按鈕、標籤和模式
Layout - 包含定義網站佈局所需的文件，例如頁頭和頁腳
Pages - 包含每個特定頁面樣式
Vendors - 這個可選資料夾適合專案的使用的引導框架，例如bootstrap
為包含該特定資料夾所有代入的在每個資料夾中新建一個all.scss檔案。
許多服務都被設計全域範圍內運作。然後，在某些情況下，一個元件需要一個服務。傳統的編碼組件實踐推薦單一責任原則。
在這種方法下，服務和元件被編寫為單獨的項目。
但是，考慮下入鍋刪除這些服務的組件會發生什麼？你最終得到的是死代碼，只會使得倉庫變得更加混亂。在這種情況下，最佳實踐是將服務放在元件內部。
這樣，維護組件和服務就更容易了。
嵌套檔案結構本質上比將所有程式碼檔案都放在一個目錄中的平面檔案系統更容易導航。
然而，隨著專案的方法，專案的文件結構可能變得相當複雜。雖然這使得定位程式碼變得更加容易，但是當它在編寫導入語句時提出了挑戰。
當一個目錄結構開始超過三個或四個層級的時候， import語句就會變得非常長且難以閱讀。
解決這個問題的，我們可以在tsconfig.json 檔案中配置路徑的別名。在這個檔案中，有一個名為compilerOptions的陣列。這個是你在應用程式中配置路徑別名。
當程式碼編譯後，在該數組中定義的路徑別名會被替換成真實的路徑。每個路徑的值是一個包含實際路徑和別名的鍵值對物件。
建立Angular應用程式並對其進行擴展是一項持續的練習。