MCPcopy Index your code
hub / github.com/DanWahlin/angular-architecture

github.com/DanWahlin/angular-architecture @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
2,086 symbols 3,675 edges 773 files 122 documented · 6%
What it actually does AI analysis from the code graph — generated when you open this
loading…
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

  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

Extension points exported contracts — how you extend this code

Db (Interface)
In-memory database data
labs/state-management/ngrx/begin/src/app/core/in-memory-data.service.ts
Db (Interface)
In-memory database data
labs/standalone/end/src/app/core/in-memory-data.service.ts
Db (Interface)
In-memory database data
labs/routing-guards-and-preload-strategies/end/src/app/core/in-memory-data.service.ts
Db (Interface)
In-memory database data
state-management/ngrx/src/app/core/in-memory-data.service.ts
Db (Interface)
In-memory database data
state-management/diy-store/src/app/in-memory-data-service/in-memory-data.service.ts
Db (Interface)
In-memory database data
state-management/observable-store/src/app/core/in-memory-data.service.ts
Db (Interface)
In-memory database data
state-management/ngrx-data/src/app/core/in-memory-data.service.ts
LoggerService (Interface)
(no doc) [1 implementers]
shared-library-abc-logging/projects/browser-logger/src/lib/browser-logger.service.ts

Core symbols most depended-on inside this repo

emit
called by 75
demos/src/app/core/services/event-bus.service.ts
get
called by 55
labs/state-management/observable-store/begin/src/app/orders/orders.service.ts
forRoot
called by 45
shared-library-abc-logging/projects/browser-logger/src/lib/browser-logger.module.ts
log
called by 29
demos/src/app/core/services/browser-logger.service.ts
error
called by 26
demos/src/app/core/services/browser-logger.service.ts
get
called by 21
state-management/observable-store/src/app/orders/orders.service.ts
post
called by 17
state-management/diy-store/src/app/in-memory-data-service/in-memory-data.service.ts
filter
called by 13
labs/state-management/ngrx/begin/src/app/customers/customers-list/filter-textbox.component.ts

Shape

Class 958
Method 946
Function 111
Interface 63
Enum 8

Languages

TypeScript100%

Modules by API surface

state-management/ngrx/src/app/store/actions/customer.actions.ts39 symbols
labs/state-management/ngrx/begin/src/app/store/actions/customer.actions.ts36 symbols
demos/src/app/core/services/httpClientRxJS.service.ts19 symbols
state-management/ngrx/src/app/store/actions/order.actions.ts18 symbols
labs/state-management/ngrx/begin/src/app/store/actions/order.actions.ts18 symbols
demos/src/app/view-model/services/customer-orders-data.service.ts18 symbols
demos/src/app/signals/signals.component.ts13 symbols
labs/standalone/reference/src/app/villains/villains/villains.component.ts12 symbols
labs/standalone/reference/src/app/heroes/heroes/heroes.component.ts12 symbols
labs/standalone/end/src/app/villains/villains/villains.component.ts12 symbols
labs/standalone/end/src/app/heroes/heroes/heroes.component.ts12 symbols
labs/standalone/begin/src/app/villains/villains/villains.component.ts12 symbols

For agents

$ claude mcp add angular-architecture \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact