5 個管理 Angular 專案的實用技巧（總結分享）

怎麼組織 Angular 專案？以下這篇文章整理分享5 個管理 Angular 專案的實用技巧，希望對大家有幫助！

伴隨著新功能的發布，Web apps 的體積越發大。在公司 DevOps 的過程中，這種發布變更每天都會發生。 【相關教學推薦：《angular教學》】

在如此高速的發布週期中，程式碼很快就會變得笨拙。特別是基於 JavaScript 開發的項目，例如 NextJS 或 Angular。

以下是我們在管理 Angular 專案中 5 個最好的實踐，以達到最大的可讀性，可維護性和可擴展性。

1. 準守單一職責原則

許多單一應用核心是具有臃腫類別的程式碼庫。從本質上講，這些臃腫的程序很難維護。從某種意義上講，他們很脆弱，脆弱到更改一行程式碼可能會對整個程式產生災難的影響。 single responsibility principle 能阻止這些問題。

單一職責原則意味著元件有且僅有一個功能。

使用這種方法建立應用程式會產生一個模組化框架，其中應用程式是透過這些程式碼區塊串聯在一塊的。

使用這種方法能夠讓程式更易讀、更好地維護。也能夠在應用中很好地定位指定的功能。

為了確保你的程式碼能夠滿足這個要求，你可以問自己一個問題：這程式碼是做什麼的？ 如果自己的答案包含 and 這個關鍵字，那麼你需要將你的程式碼重構為單一職責的程式碼。

建立 Angular 應用程式並對其擴展是一種持續性的練習。在不斷的練習中，使用單一職責原則組織你的項目，將使你的應用程式乾淨，可讀和可維護。

2. 綁定程式碼到模組中

#Angular 中的modules 是單一原則的實施。在 Angular 中，每一個模組代表一個分離的和獨立的功能。

Angular 中提供了幾種類型模組去指定如何對它們進行邏輯分組或組織。

Core

Core 模組是一個 NgModule，用來實例化應用並載入全域使用的核心功能。

所以，任何單例服務都應該在核心模組中實作。頁頭，頁尾或導覽列都是這種類型的模組。

每個應用程式擁有且只有一個實例的所有服務（單例服務）都應該在核心模組實現。例如鑑權服務或使用者服務。

Feature

功能模組代表建置應用程式功能的程式碼。例如，在一個線上購物的應用程式中，我們會有將商品加入購物車的功能和用於付款的單獨模組。

Shared

共享模組由可以被組合以建立新功能的模組組成。例如，搜尋函數在平台中可以被用於多個功能。

以這種方式建立程式碼使事情更容易定位並增加程式碼可重用性的機會。

3. 組織 SCSS 檔案

如果不遵循通用結構，樣式檔案很快就會變得雜亂無章。一般最佳實踐的模式7-1 模式，該模式使用7 個資料夾和1 個文件，如下所示：

• #App - 專案的主要資料夾

• #Abstract - 抽象部分，包含所有變數、混合和類似的元件

• Core - 包含整個網站的排版、重設和樣板程式碼

• ##Components - 包含要為一個網站建立的所有元件的樣式，例如按鈕、選項卡和模式

• #Layout - 包含定義網站佈局所需的文件，例如頁頭和頁尾

• Pages - 包含每個特定頁面樣式

• Vendors - 這個可選資料夾適合專案的使用的引導框架，例如bootstrap

為包含該特定資料夾所有代入的在每個資料夾中新建一個all.scss 檔案。

4. 將私有服務放到元件中

#許多服務都被設計全域範圍內運作。然後，在某些情況下，一個元件需要一個服務。傳統的編碼組件實踐推薦單一責任原則。

在這種方法下，服務和元件被編寫為單獨的項目。

但是，考慮下入鍋刪除這些服務的元件會發生什麼事？你最終得到的是死代碼，只會使得倉庫變得更加混亂。在這種情況下，最佳實踐是將服務放在元件內部。

這樣，維護元件和服務就更加容易了。

5. 簡化導入的Angular 最佳實踐

#嵌套檔案結構本質上比將所有程式碼檔案都放在一個目錄中的平面檔案系統更加容易導航。

然而，隨著專案的方法，專案的檔案結構可能變得相當複雜。雖然這使得定位程式碼變得更加容易，但是當它在編寫導入語句時提出了挑戰。

當一個目錄結構開始超過三個或四個層級的時候， import 語句就會變得非常長且難以閱讀。

解決這個問題的，我們可以在 tsconfig.json 檔案中配置路徑的別名。在這個檔案中，有一個名為 compilerOptions 的陣列。這個是你在應用程式中配置路徑別名。

當程式碼編譯後，在該陣列中定義的路徑別名會被替換成真實的路徑。每個路徑的值是一個包含實際路徑和別名的鍵值對物件。

建立 Angular 應用程式並對其進行擴展是一項持續的練習。

本文為譯文，以意譯的形式。

原文網址：https://www.adservio.fr/post/how-to-organize-angular-project-top-5-tips

更多程式相關知識，請造訪：程式設計影片！ ！

以上是5 個管理 Angular 專案的實用技巧（總結分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！