了解組件體系結構：重構Angular應用

本教程顯示瞭如何重構單片的角度應用到更模塊化的組件體系結構中。 我們將把一個組件分解為較小的可重複使用的組件，提高可維護性和理解。

>

密鑰改進：

• 增強的可維護性：重構為較小的組件使代碼更易於理解，修改和調試。
• 可重用性：較小的組件可以在應用程序的不同部分重複使用。
>
• >更清晰的結構：結構化組件樹改善了代碼的整體組織和可讀性。
智能與愚蠢的組件：該方法使用“智能”組件（管理數據和邏輯）和“ Dumb”組件（處理演示文稿），促進了顧慮的干淨分離。
• > 有效的通信：
組件使用自定義事件和屬性綁定有效地通信，避免了緊密的耦合。
• >可伸縮性：
>將
• 提供商移動到>確保範圍範圍的服務可用性，支持未來的增長和懶惰的加載。 > TodoDataService>測試性：AppModule模塊化設計簡化了單元測試。
• 第1部分的回顧：

>第1部分涵蓋了使用Angular CLI設置TODO應用程序，創建A類，a>服務，並為UI使用

。 該應用程序的架構是一個大，大

。 TodoTodoDataService AppComponent 第2部分中的重構AppComponent

此部分重構通過創建：

：處理創建新的Todos。

AppComponent：顯示todos的列表。

：顯示一個單個待辦事項。
• TodoListHeaderComponent：顯示剩餘的todos的數量。
• TodoListComponent
• TodoListItemComponent
學習目標：
• TodoListFooterComponent

了解角組件體系結構。

使用屬性綁定將數據傳遞到組件中。

使用事件偵聽器處理由組件發出的事件。 較小的可重複使用的組件的好處。

智能組件和愚蠢組件之間的區別。
• 入門：

1. >安裝最新的Angular CLI：npm install -g @angular/cli@latest（或使用npm uninstall -g @angular/cli angular-cli; npm cache clean; npm install -g @angular/cli@latest刪除以前的版本）。
克隆存儲庫：
2. git clone git@github.com:sitepoint-editors/angular-todo-app.git
>安裝依賴項：
3. cd angular-todo-app; npm install
結帳第1部分：
4. git checkout part-1>
運行應用程序：
5. ng serve

原始的AppComponent： 原始

在單個組件中包含所有應用程序的邏輯和UI，這不是可維護性的理想選擇。

AppComponent創建新組件：

教程使用Angular CLI（），相關的HTML和邏輯從

>移動到新組件，詳細介紹了每個新組件的創建。 它強調使用

>和ng generate component <component-name></component-name>裝飾器在數據綁定和事件處理中使用，使新組件“愚蠢”和可重複使用。 AppComponent@Input()移動@Output()：

>

提供商從TodoDataService> 移動以確保範圍範圍的可訪問性。

TodoDataService摘要：AppComponentAppModule

該部分成功地重構了該應用程序，展示了角度組件體系結構中的最佳實踐。 下一部分將集成一個REST API。 所有代碼均可在GitHub上找到。 本文還包括一個FAQ部分，介紹了Angular組件體系結構中的關鍵概念。

以上是了解組件體系結構：重構Angular應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！