# naru32/angular-fundalmentals architecture

> Architecture diagram of the GitHub repository naru32/angular-fundalmentals, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/naru32/angular-fundalmentals
- Repository: https://github.com/naru32/angular-fundalmentals

## Overview

This is an Angular fundamentals teaching app: users navigate a routed collection of examples covering components, forms, directives, pipes, signals, RxJS, API calls, and application state. The app shell and route table provide the principal entry flow; individual demo components implement the lessons. Shared examples demonstrate student-role streams, reusable UI, and NgRx state, while HTTP is configured with an auth interceptor. Some feature files were not excerpted, so their documented route connections are shown, but uncertain internal behavior is omitted.

Main entry points: [`src/app/app.routes.ts`](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.routes.ts) (Route table), [`src/app/app.config.ts`](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.config.ts) (App providers), [`src/app/app.ts`](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.ts) (App shell), [`src/app/second-component/second-component.ts`](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/second-component/second-component.ts) (Second component)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["App shell<br/>[app.ts]"]
  node_routes["Route table<br/>[app.routes.ts]"]
  node_config["App providers<br/>[app.config.ts]"]
end

subgraph group_demos["Angular feature demos"]
  node_first["First component<br/>[first-component.ts]"]
  node_second["Second component"]
  node_binding["Data binding<br/>[data-binding.ts]"]
  node_signals["Signals<br/>[signals.ts]"]
  node_directives["Directives"]
  node_forms["Forms"]
  node_pipes["Pipes<br/>[pipes.ts]"]
  node_lifecycle["Lifecycle<br/>[lifecycle.ts]"]
  node_template["Template demo<br/>[template.ts]"]
  node_selectform["Select form<br/>[select-form.ts]"]
  node_user["User view<br/>[user.ts]"]
  node_login["Login view<br/>[login.ts]"]
end

subgraph group_data["Reactive data and state"]
  node_rxjs["RxJS examples"]
  node_students["Student service<br/>[students.ts]"]
  node_counter["Counter reducer<br/>[counter.reducer.ts]"]
  node_actions["Counter actions<br/>[counter.action.ts]"]
end

subgraph group_integrations["HTTP and shared UI"]
  node_getapi["GET example<br/>[get-api.ts]"]
  node_postapi["POST example<br/>[post-api.ts]"]
  node_button["Reusable button<br/>[button.ts]"]
  node_card["Reusable card<br/>[card.ts]"]
  node_interceptor["Auth interceptor"]
end

node_visitor(("App visitor"))
node_api{{"Remote APIs"}}

node_visitor -->|"opens"| node_app
node_app -->|"hosts outlet"| node_routes
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_first
node_routes -->|"routes to"| node_second
node_routes -->|"routes to"| node_binding
node_routes -->|"routes to"| node_signals
node_routes -->|"routes to"| node_forms
node_routes -->|"routes to"| node_selectform
node_routes -->|"routes to"| node_user
node_routes -->|"routes to"| node_getapi
node_routes -->|"routes to"| node_postapi
node_routes -->|"routes to"| node_lifecycle
node_routes -->|"routes to"| node_template
node_routes -->|"routes to"| node_rxjs
node_routes -->|"routes to"| node_pipes
node_config -->|"provides router"| node_routes
node_config -->|"registers reducer"| node_counter
node_config -->|"registers interceptor"| node_interceptor
node_first -->|"uses state"| node_counter
node_counter -->|"handles actions"| node_actions
node_app -->|"publishes roles"| node_students
node_pipes -->|"subscribes to roles"| node_students
node_second -->|"subscribes to roles"| node_students
node_pipes -->|"uses"| node_button
node_second -->|"uses"| node_card
node_rxjs -->|"sends HTTP requests"| node_api

click node_app "https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.ts"
click node_routes "https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.routes.ts"
click node_config "https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.config.ts"
click node_first "https://github.com/naru32/angular-fundalmentals/blob/master/src/app/first-component/first-component.ts"
click node_second "https://github.com/naru32/angular-fundalmentals/blob/master/src/app/second-component/second-component.ts"
click node_binding "https://github.com/naru32/angular-fundalmentals/blob/master/src/components/data-binding/data-binding.ts"
click node_signals "https://github.com/naru32/angular-fundalmentals/blob/master/src/components/signals/signals.ts"
click node_directives "https://github.com/naru32/angular-fundalmentals/tree/master/src/Directives"
click node_forms "https://github.com/naru32/angular-fundalmentals/tree/master/src/Forms"
click node_pipes "https://github.com/naru32/angular-fundalmentals/blob/master/src/Pipes/pipes/pipes.ts"
click node_lifecycle "https://github.com/naru32/angular-fundalmentals/blob/master/src/components/lifecycle/lifecycle.ts"
click node_template "https://github.com/naru32/angular-fundalmentals/blob/master/src/components/template/template/template.ts"
click node_selectform "https://github.com/naru32/angular-fundalmentals/blob/master/src/components/select-form/select-form.ts"
click node_user "https://github.com/naru32/angular-fundalmentals/blob/master/src/components/user/user.ts"
click node_login "https://github.com/naru32/angular-fundalmentals/blob/master/src/components/login/login.ts"
click node_rxjs "https://github.com/naru32/angular-fundalmentals/tree/master/src/RxJS"
click node_students "https://github.com/naru32/angular-fundalmentals/blob/master/src/app/service/students.ts"
click node_counter "https://github.com/naru32/angular-fundalmentals/blob/master/src/app/store/counter.reducer.ts"
click node_actions "https://github.com/naru32/angular-fundalmentals/blob/master/src/app/store/counter.action.ts"
click node_getapi "https://github.com/naru32/angular-fundalmentals/blob/master/src/api-integration/get-api/get-api.ts"
click node_postapi "https://github.com/naru32/angular-fundalmentals/blob/master/src/api-integration/post-api/post-api.ts"
click node_button "https://github.com/naru32/angular-fundalmentals/blob/master/src/Reusable/button/button.ts"
click node_card "https://github.com/naru32/angular-fundalmentals/blob/master/src/Reusable/card/card.ts"
click node_interceptor "https://github.com/naru32/angular-fundalmentals/blob/master/src/interceptor/auth-interceptor.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_routes,node_config toneBlue
class node_first,node_second,node_binding,node_signals,node_directives,node_forms,node_pipes,node_lifecycle,node_template,node_selectform,node_user,node_login toneAmber
class node_rxjs,node_students,node_counter,node_actions,node_api toneMint
class node_getapi,node_postapi,node_button,node_card,node_interceptor toneRose
class node_visitor toneIndigo
```

## Components

### App navigation

- [App shell](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.ts): `src/app/app.ts`
- [Route table](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.routes.ts): `src/app/app.routes.ts`
- [App providers](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/app.config.ts): `src/app/app.config.ts`

### Angular feature demos

- [First component](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/first-component/first-component.ts): `src/app/first-component/first-component.ts`
- [Second component](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/second-component/second-component.ts): `src/app/second-component/second-component.ts`
- [Data binding](https://github.com/naru32/angular-fundalmentals/blob/master/src/components/data-binding/data-binding.ts): `src/components/data-binding/data-binding.ts`
- [Signals](https://github.com/naru32/angular-fundalmentals/blob/master/src/components/signals/signals.ts): `src/components/signals/signals.ts`
- [Directives](https://github.com/naru32/angular-fundalmentals/tree/master/src/Directives): `src/Directives`
- [Forms](https://github.com/naru32/angular-fundalmentals/tree/master/src/Forms): `src/Forms`
- [Pipes](https://github.com/naru32/angular-fundalmentals/blob/master/src/Pipes/pipes/pipes.ts): `src/Pipes/pipes/pipes.ts`
- [Lifecycle](https://github.com/naru32/angular-fundalmentals/blob/master/src/components/lifecycle/lifecycle.ts): `src/components/lifecycle/lifecycle.ts`
- [Template demo](https://github.com/naru32/angular-fundalmentals/blob/master/src/components/template/template/template.ts): `src/components/template/template/template.ts`
- [Select form](https://github.com/naru32/angular-fundalmentals/blob/master/src/components/select-form/select-form.ts): `src/components/select-form/select-form.ts`
- [User view](https://github.com/naru32/angular-fundalmentals/blob/master/src/components/user/user.ts): `src/components/user/user.ts`
- [Login view](https://github.com/naru32/angular-fundalmentals/blob/master/src/components/login/login.ts): `src/components/login/login.ts`

### Reactive data and state

- [RxJS examples](https://github.com/naru32/angular-fundalmentals/tree/master/src/RxJS): `src/RxJS`
- [Student service](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/service/students.ts): `src/app/service/students.ts`
- [Counter reducer](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/store/counter.reducer.ts): `src/app/store/counter.reducer.ts`
- [Counter actions](https://github.com/naru32/angular-fundalmentals/blob/master/src/app/store/counter.action.ts): `src/app/store/counter.action.ts`

### HTTP and shared UI

- [GET example](https://github.com/naru32/angular-fundalmentals/blob/master/src/api-integration/get-api/get-api.ts): `src/api-integration/get-api/get-api.ts`
- [POST example](https://github.com/naru32/angular-fundalmentals/blob/master/src/api-integration/post-api/post-api.ts): `src/api-integration/post-api/post-api.ts`
- [Reusable button](https://github.com/naru32/angular-fundalmentals/blob/master/src/Reusable/button/button.ts): `src/Reusable/button/button.ts`
- [Reusable card](https://github.com/naru32/angular-fundalmentals/blob/master/src/Reusable/card/card.ts): `src/Reusable/card/card.ts`
- [Auth interceptor](https://github.com/naru32/angular-fundalmentals/blob/master/src/interceptor/auth-interceptor.ts): `src/interceptor/auth-interceptor.ts`

### Other components

- **App visitor**
- **Remote APIs**

## Connections

- App visitor → App shell: opens
- App shell → Route table: hosts outlet (evidence: `src/app/app.ts`)
- Route table → Login view: routes to (evidence: `src/app/app.routes.ts`)
- Route table → First component: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Second component: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Data binding: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Signals: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Forms: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Select form: routes to (evidence: `src/app/app.routes.ts`)
- Route table → User view: routes to (evidence: `src/app/app.routes.ts`)
- Route table → GET example: routes to (evidence: `src/app/app.routes.ts`)
- Route table → POST example: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Lifecycle: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Template demo: routes to (evidence: `src/app/app.routes.ts`)
- Route table → RxJS examples: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Pipes: routes to (evidence: `src/app/app.routes.ts`)
- App providers → Route table: provides router (evidence: `src/app/app.config.ts`)
- App providers → Counter reducer: registers reducer (evidence: `src/app/app.config.ts`)
- App providers → Auth interceptor: registers interceptor (evidence: `src/app/app.config.ts`)
- First component → Counter reducer: uses state (evidence: `src/app/first-component/first-component.ts`)
- Counter reducer → Counter actions: handles actions (evidence: `src/app/store/counter.reducer.ts`)
- App shell → Student service: publishes roles (evidence: `src/app/app.ts`)
- Pipes → Student service: subscribes to roles (evidence: `src/Pipes/pipes/pipes.ts`)
- Second component → Student service: subscribes to roles (evidence: `src/app/second-component/second-component.ts`)
- Pipes → Reusable button: uses (evidence: `src/Pipes/pipes/pipes.ts`)
- Second component → Reusable card: uses (evidence: `src/app/second-component/second-component.ts`)
- RxJS examples → Remote APIs: sends HTTP requests (evidence: `src/RxJS/combine-observable/combine-observable.ts`)