怎么組織 Angular 項(xiàng)目？下面本篇文章整理分享5 個(gè)管理 Angular 項(xiàng)目的實(shí)用技巧，希望對(duì)大家有所幫助！

如何快速入門(mén)VUE3.0：進(jìn)入學(xué)習(xí)

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

在如此高速的發(fā)布周期中，代碼很快會(huì)變得笨拙。特別是基于 JavaScript 開(kāi)發(fā)的項(xiàng)目，比如 NextJS 或者 Angular。

下面是我們?cè)诠芾?Angular 項(xiàng)目中 5 個(gè)最好的實(shí)踐，以達(dá)到最大的可讀性，可維護(hù)性和可擴(kuò)展性。

1. 準(zhǔn)守單一職責(zé)原則

很多單應(yīng)用程序核心是具有臃腫類(lèi)的代碼庫(kù)。從本質(zhì)上講，這些臃腫的程序很難維護(hù)。從某種意義上講，他們很脆弱，脆弱到更改一行代碼可能對(duì)到整個(gè)程序產(chǎn)生災(zāi)難的影響。single responsibility principle 能阻止這些問(wèn)題。

單一職責(zé)原則意味著組件有且僅有一個(gè)功能。

使用這種方法構(gòu)建應(yīng)用程序會(huì)產(chǎn)生一個(gè)模塊化框架，其中應(yīng)用程序是通過(guò)這些代碼塊串聯(lián)在一塊的。

使用這種方法能夠讓程序更易讀和更好維護(hù)。也能夠在應(yīng)用中很好定位指定的功能。

為了確保你的代碼能夠滿足這種要求，你可以問(wèn)自己一個(gè)問(wèn)題：這代碼是干什么的？如果自己的回答包含 and 這個(gè)關(guān)鍵字，那么你需要將你的代碼重構(gòu)為單一職責(zé)的代碼。

構(gòu)建 Angular 應(yīng)用程序并對(duì)其擴(kuò)展是一種持續(xù)性的練習(xí)。在不斷的練習(xí)中，使用單一職責(zé)原則組織你的項(xiàng)目，將使你的應(yīng)用程序干凈，可讀和可維護(hù)。

2. 綁定代碼到模塊中

Angular 中的 modules 是單一原則的實(shí)施。在 Angular 中，每一個(gè)模塊代表一個(gè)分離的和獨(dú)立的功能。

Angular 中提供了幾種類(lèi)型模塊去指定如何對(duì)它們進(jìn)行邏輯分組或組織。

Core

Core 模塊是一個(gè) NgModule，用來(lái)實(shí)例化應(yīng)用并加載全局使用的核心功能。

所以，任何單例服務(wù)都應(yīng)該在核心模塊中實(shí)現(xiàn)。頁(yè)頭，頁(yè)腳或者導(dǎo)航欄都是這種類(lèi)型的模塊。

每個(gè)應(yīng)用程序有且只有一個(gè)實(shí)例的所有服務(wù)（單例服務(wù)）都應(yīng)該在核心模塊實(shí)現(xiàn)。例如鑒權(quán)服務(wù)或者用戶服務(wù)。

Feature

功能模塊代表構(gòu)建應(yīng)用程序功能的代碼。比如，在一個(gè)線上購(gòu)物的應(yīng)用中，我們會(huì)有將商品添加到購(gòu)物車(chē)的功能和用于付款的單獨(dú)模塊。

Shared

共享模塊由可以被組合以創(chuàng)建新功能的模塊組成。比如，搜索函數(shù)在平臺(tái)中可以被用于多個(gè)功能。

以這種方式構(gòu)建代碼使事情更加容易定位并增加代碼可重用性的機(jī)會(huì)。

3. 組織 SCSS 文件

如果不遵循通用結(jié)構(gòu)，樣式文件很快就會(huì)變得雜亂無(wú)章。一般最佳實(shí)踐的模式 7-1 模式，該模式使用 7 個(gè)文件夾和 1 個(gè)文件，如下所示：

• App – 項(xiàng)目的主要文件夾

• Abstract – 抽象部分，包含所有變量、混合和類(lèi)似的組件

• Core – 包含整個(gè)站點(diǎn)的排版、重置和樣板代碼

• Components – 包含要為一個(gè)網(wǎng)站創(chuàng)建的所有組件的樣式，例如按鈕、選項(xiàng)卡和模式

• Layout – 包含定義站點(diǎn)布局所需要的文件，例如頁(yè)頭和頁(yè)腳

• Pages – 包含每個(gè)特定頁(yè)面樣式

• Vendors – 這個(gè)可選文件夾適合項(xiàng)目的使用的引導(dǎo)框架，比如 bootstrap

為包含該特定文件夾所有代入的在每個(gè)文件夾中新建一個(gè) all.scss 文件。

4. 將私有服務(wù)放到組件中

許多服務(wù)都被設(shè)計(jì)全局范圍內(nèi)運(yùn)行。然后，在某些情況下，一個(gè)組件需要一個(gè)服務(wù)。傳統(tǒng)的編碼組件實(shí)踐推薦單一責(zé)任原則。

在這種方法下，服務(wù)和組件被編寫(xiě)為單獨(dú)的項(xiàng)目。

但是，考慮下入鍋刪除這些服務(wù)的組件會(huì)發(fā)生什么？你最終得到的是死代碼，只會(huì)使得倉(cāng)庫(kù)變得更加混亂。在這種情況下，最佳實(shí)踐是將服務(wù)放在組件內(nèi)部。

這樣，維護(hù)組件和服務(wù)就更加容易了。

5. 簡(jiǎn)化導(dǎo)入的 Angular 最佳實(shí)踐

嵌套文件結(jié)構(gòu)本質(zhì)上比將所有代碼文件都放在一個(gè)目錄中的平面文件系統(tǒng)更加容易導(dǎo)航。

然而，隨著項(xiàng)目的方法，項(xiàng)目的文件結(jié)構(gòu)可能變得相當(dāng)復(fù)雜。雖然這使得定位代碼變得更加容易，但是當(dāng)它在編寫(xiě)導(dǎo)入語(yǔ)句時(shí)提出了挑戰(zhàn)。

當(dāng)一個(gè)目錄結(jié)構(gòu)開(kāi)始超過(guò)三個(gè)或者四個(gè)級(jí)別的時(shí)候， import 語(yǔ)句就會(huì)變得非常長(zhǎng)并且難以閱讀。

解決這個(gè)問(wèn)題的，我們可以在 tsconfig.json 文件中配置路徑的別名。在這個(gè)文件中，有個(gè)名為 compilerOptions 的數(shù)組。這個(gè)是你在應(yīng)用程序中配置路徑別名。

當(dāng)代碼編譯后，在該數(shù)組中定義的路徑別名會(huì)替換成真實(shí)的路徑。每個(gè)路徑的值是一個(gè)包含實(shí)際路徑和別名的鍵值對(duì)對(duì)象。

構(gòu)建 Angular 應(yīng)用程序并對(duì)其進(jìn)行擴(kuò)展是一項(xiàng)持續(xù)的練習(xí)。

本文為譯文，采用意譯的形式。

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