Angular 架构
该代码示例演示了不同的 Angular 架构概念。它用于 Pluralsight 上的 Angular 架构和最佳实践视频课程(https://www.pluralsight.com/courses/angular-architecture-best-practices)以及 Angular 架构和最佳实践讲师指导培训课程(https://codewithdan.com/products/angular-architecture)。
运行应用程序
-
安装 Angular CLI:
npm install -g @angular/cli
-
打开
demos
文件夹并运行npm install
-
在
demos
文件夹中运行ng serve -o
以启动服务器并启动应用程序
主要演示
名称 | 描述 |
---|---|
通信 | 展示服务和主题以为组件提供通信。 |
组件继承 | 继承组件 |
功能模块 | NgModules 的示例结构 |
Http Client RxJS | 使用运算符组合 RxJS 结果 |
管道和函数 | 管道 |
规划 | 应用程序规划技巧 |
信号 | 简单的 Signals 演示 |
组件结构 | 带变更检测的组件展示 |
主题 | 每种主题类型的简单使用 |
视图模型 | 视图模型有用的渐进示例 |
额外演示
名称 | 描述 |
---|---|
克隆 | 运行 cloning 文件夹中的项目 |
输入/输出属性 | 运行 input-output-demo 项目 |
共享库 | 运行 shared-library-example 项目 |
状态管理 | 打开 state-management 文件夹并运行任何演示 |
状态 - DIY 存储 | 打开 state-management/diy-store 文件夹,从这里开始使用主题和可观察对象的简单"自己动手"存储 |
状态 - NgRx | 打开 state-management/ngrx 文件夹 |
状态 - ngrx-data | 打开 state-management/ngrx-data 文件夹 |
状态 - Observable 存储 | 打开 state-management/observable-store 文件夹 Observable Store 库 |
Angular JumpStart 应用程序
您可以在 https://github.com/DanWahlin/Angular-JumpStart 找到遵循本课程规则的应用程序示例