danwahlin/angular-architecture

Examples of Angular Architecture Concepts

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

2. Open the demos folder and run npm install

3. 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

angular-architecture's Issues

Angular Folder Structure

Hello,

Because your project is active (last update = 2 weeks) I wanted to make you aware of another project with the same goals: https://github.com/mathisGarberg/angular-folder-structure

We have extensive documentation and the application is undergoing something of a makeover right now. I invite you to explore our project and look forward to hearing from you.

Broken build

Hello there -

FYI - I just cloned the project and it seems the last build is broken, the view-model.css is required for components inside the demos/src/app/view-model I did removed the styleUrls from those components and works fine afterwards I was trying to open a pull request to suggest the change but it is block I did see that the last commit removed the file.