This code sample demonstrates different Angular Architecture concepts. It's used in the Angular Architecture and Best Practices video course on Pluralsight (https://www.pluralsight.com/courses/angular-architecture-best-practices) and in the Angular Architecture and Best Practices instructor-led training course (https://codewithdan.com/products/angular-architecture).
-
Install the Angular CLI:
npm install -g @angular/cli -
Open the
demosfolder and runnpm install -
Run
ng serve -oin thedemosfolder to start the server and launch the app
| Name | Description |
|---|---|
| Communication | Show services and subjects to provide communication for components. |
| Component Inheritance | inheriting components |
| Features Modules | Example structure with NgModules |
| Http Client RxJS | RxJS to combine results with operators |
| Pipes and Functions | Pipes |
| Planning | Planning tips for your app |
| Signals | Simple Signals demo |
| Structuring Components | Component presentation with change detection |
| Subjects | Simple use of each Subject type |
| View Models | Progressive examples of where view models are useful |
| Name | Description |
|---|---|
| Cloning | Run the project in the cloning folder |
| Input/Output Properties | Run the project in the input-output-demo project |
| Shared Library | Run the project in the shared-library-example project |
| State Management | Open the state-management folder and run any of the demos |
| State - DIY Store | Open the state-management/diy-store folder and start here with a simple "do it yourself" store with subjects and observables |
| State - NgRx | Open the state-management/ngrx folder |
| State - ngrx-data | Open the state-management/ngrx-data folder |
| State - Observable Store | Open the state-management/observable-store folder Observable Store library |
You can find an example of an application that follows the rules in this course at https://github.com/DanWahlin/Angular-JumpStart