Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danwahlin/angular-architecture
Examples of Angular Architecture Concepts
https://github.com/danwahlin/angular-architecture
angular architecture typescript
Last synced: 4 days ago
JSON representation
Examples of Angular Architecture Concepts
- Host: GitHub
- URL: https://github.com/danwahlin/angular-architecture
- Owner: DanWahlin
- Created: 2018-04-27T16:24:39.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-03-19T16:44:55.000Z (10 months ago)
- Last Synced: 2024-12-21T20:05:04.577Z (11 days ago)
- Topics: angular, architecture, typescript
- Language: TypeScript
- Size: 10.4 MB
- Stars: 798
- Watchers: 39
- Forks: 493
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Architecture
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).
## Running the Application
1. Install the Angular CLI: `npm install -g @angular/cli`
1. Open the `demos` folder and run `npm install`
1. Run `ng serve -o` in the `demos` folder to start the server and launch the app
### Main Demos
| 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 |
## Additional Demos
| 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 |
## The Angular JumpStart Application
You can find an example of an application that follows the rules in this course at https://github.com/DanWahlin/Angular-JumpStart