了解组件体系结构：重构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中文网其他相关文章！