# angulartemplates/learn-angular-from-scratch-step-by-step architecture

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

- Interactive diagram: https://gitdiagram.com/angulartemplates/learn-angular-from-scratch-step-by-step
- Repository: https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step

## Overview

This is an Angular FAQ-style application for browsing categories, questions, and answers, with question and answer create, update, and delete dialogs represented in the source tree. The intended user journey is category selection, question browsing, then viewing and managing answers. An Angular app module and routing layer organize the screens; feature services use a generated LoopBack SDK to communicate with a REST backend. Sampled code confirms question queries and mutations, SDK HTTP requests, and auth persistence. Category/answer wiring and route details are not shown in the excerpts, so those links are omitted.

Main entry points: [`src/app/app-routing.module.ts`](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/app-routing.module.ts) (App routing), [`sdk/services/core/base.service.ts`](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/services/core/base.service.ts) (SDK HTTP core), [`src/main.ts`](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/main.ts) (Application entry), [`src/app/app.module.ts`](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/app.module.ts) (App module)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Angular application"]
  node_entry["Application entry<br/>[main.ts]"]
  node_module["App module<br/>[app.module.ts]"]
  node_routing["App routing"]
  node_root["Root component<br/>[app.component.ts]"]
end

subgraph group_faq["FAQ features"]
  node_categories["Categories"]
  node_category_resolver["Category resolver"]
  node_category_service["Category service"]
  node_category_questions["Category questions"]
  node_category_questions_resolver["Question resolver"]
  node_question_service["Question service"]
  node_question_dialogs["Question dialogs"]
  node_question_delete["Question deletion"]
  node_answers["Question answers"]
  node_answers_resolver["Answer resolver"]
  node_answer_service["Answer service<br/>[answers.service.ts]"]
  node_answer_dialogs["Answer dialogs"]
  node_answer_update["Answer update"]
  node_answer_delete["Answer deletion"]
end

subgraph group_sdk["LoopBack SDK"]
  node_question_api["Question API<br/>[Question.ts]"]
  node_sdk_http["SDK HTTP core<br/>[base.service.ts]"]
end

subgraph group_state["Client state"]
  node_auth["SDK authentication<br/>[auth.service.ts]"]
  node_storage["Browser storage<br/>[storage.browser.ts]"]
end

node_visitor(("Visitor"))
node_backend[("LoopBack REST API")]

node_visitor -->|"uses"| node_root
node_entry -->|"bootstraps"| node_module
node_entry -->|"configures API URL"| node_backend
node_module -->|"imports"| node_routing
node_routing -->|"routes to"| node_categories
node_routing -->|"routes to"| node_category_questions
node_routing -->|"routes to"| node_answers
node_question_service -->|"invokes"| node_question_api
node_question_api -->|"uses"| node_sdk_http
node_sdk_http -->|"sends REST requests"| node_backend
node_sdk_http -->|"authenticates requests"| node_auth
node_auth -->|"reads and writes"| node_storage

click node_entry "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/main.ts"
click node_module "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/app.module.ts"
click node_routing "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/app-routing.module.ts"
click node_root "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/app.component.ts"
click node_categories "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/categories/categories.component.ts"
click node_category_resolver "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/categories/categories.resolver.ts"
click node_category_service "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/services/categories.service.ts"
click node_category_questions "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/category-questions/category-questions.component.ts"
click node_category_questions_resolver "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/category-questions/category-questions.resolver.ts"
click node_question_service "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/services/questions.service.ts"
click node_question_dialogs "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/category-questions/new-question/new-question-modal.component.ts"
click node_question_delete "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/category-questions/delete-question/delete-question-modal.component.ts"
click node_answers "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/question-answers.component.ts"
click node_answers_resolver "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/question-answers.resolver.ts"
click node_answer_service "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/services/answers.service.ts"
click node_answer_dialogs "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/new-answer/new-answer-modal.component.ts"
click node_answer_update "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/update-answer/update-answer-modal.component.ts"
click node_answer_delete "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/delete-answer/delete-answer-modal.component.ts"
click node_question_api "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/services/custom/Question.ts"
click node_sdk_http "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/services/core/base.service.ts"
click node_auth "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/services/core/auth.service.ts"
click node_storage "https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/storage/storage.browser.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_entry,node_module,node_routing,node_root toneBlue
class node_categories,node_category_resolver,node_category_service,node_category_questions,node_category_questions_resolver,node_question_service,node_question_dialogs,node_question_delete,node_answers,node_answers_resolver,node_answer_service,node_answer_dialogs,node_answer_update,node_answer_delete,node_backend toneAmber
class node_question_api,node_sdk_http toneMint
class node_auth,node_storage toneRose
class node_visitor toneIndigo
```

## Components

### Angular application

- [Application entry](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/main.ts): `src/main.ts`
- [App module](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/app.module.ts): `src/app/app.module.ts`
- [App routing](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/app-routing.module.ts): `src/app/app-routing.module.ts`
- [Root component](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/app.component.ts): `src/app/app.component.ts`

### FAQ features

- [Categories](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/categories/categories.component.ts): `src/app/categories/categories.component.ts`
- [Category resolver](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/categories/categories.resolver.ts): `src/app/categories/categories.resolver.ts`
- [Category service](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/services/categories.service.ts): `src/app/services/categories.service.ts`
- [Category questions](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/category-questions/category-questions.component.ts): `src/app/category-questions/category-questions.component.ts`
- [Question resolver](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/category-questions/category-questions.resolver.ts): `src/app/category-questions/category-questions.resolver.ts`
- [Question service](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/services/questions.service.ts): `src/app/services/questions.service.ts`
- [Question dialogs](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/category-questions/new-question/new-question-modal.component.ts): `src/app/category-questions/new-question/new-question-modal.component.ts`
- [Question deletion](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/category-questions/delete-question/delete-question-modal.component.ts): `src/app/category-questions/delete-question/delete-question-modal.component.ts`
- [Question answers](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/question-answers.component.ts): `src/app/question-answers/question-answers.component.ts`
- [Answer resolver](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/question-answers.resolver.ts): `src/app/question-answers/question-answers.resolver.ts`
- [Answer service](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/services/answers.service.ts): `src/app/services/answers.service.ts`
- [Answer dialogs](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/new-answer/new-answer-modal.component.ts): `src/app/question-answers/new-answer/new-answer-modal.component.ts`
- [Answer update](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/update-answer/update-answer-modal.component.ts): `src/app/question-answers/update-answer/update-answer-modal.component.ts`
- [Answer deletion](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/src/app/question-answers/delete-answer/delete-answer-modal.component.ts): `src/app/question-answers/delete-answer/delete-answer-modal.component.ts`

### LoopBack SDK

- [Question API](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/services/custom/Question.ts): `sdk/services/custom/Question.ts`
- [SDK HTTP core](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/services/core/base.service.ts): `sdk/services/core/base.service.ts`

### Client state

- [SDK authentication](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/services/core/auth.service.ts): `sdk/services/core/auth.service.ts`
- [Browser storage](https://github.com/angulartemplates/learn-angular-from-scratch-step-by-step/blob/master/sdk/storage/storage.browser.ts): `sdk/storage/storage.browser.ts`

### Other components

- **Visitor**
- **LoopBack REST API**

## Connections

- Visitor → Root component: uses
- Application entry → App module: bootstraps
- Application entry → LoopBack REST API: configures API URL
- App module → App routing: imports
- App routing → Categories: routes to
- App routing → Category questions: routes to
- App routing → Question answers: routes to
- Question service → Question API: invokes
- Question API → SDK HTTP core: uses
- SDK HTTP core → LoopBack REST API: sends REST requests
- SDK HTTP core → SDK authentication: authenticates requests
- SDK authentication → Browser storage: reads and writes