How angulartemplates/learn-angular-from-scratch-step-by-step works
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: app-routing.module.ts App routing · base.service.ts SDK HTTP core · main.ts Application entry · app.module.ts App module
Components 24
Angular application
- Application entry
src/main.ts - App module
src/app/app.module.ts - App routing
src/app/app-routing.module.ts - Root component
src/app/app.component.ts
FAQ features
- Categories
src/app/categories/categories.component.ts - Category resolver
src/app/categories/categories.resolver.ts - Category service
src/app/services/categories.service.ts - Category questions
src/app/category-questions/category-questions.component.ts - Question resolver
src/app/category-questions/category-questions.resolver.ts - Question service
src/app/services/questions.service.ts - Question dialogs
src/app/category-questions/new-question/new-question-modal.component.ts - Question deletion
src/app/category-questions/delete-question/delete-question-modal.component.ts - Question answers
src/app/question-answers/question-answers.component.ts - Answer resolver
src/app/question-answers/question-answers.resolver.ts - Answer service
src/app/services/answers.service.ts - Answer dialogs
src/app/question-answers/new-answer/new-answer-modal.component.ts - Answer update
src/app/question-answers/update-answer/update-answer-modal.component.ts - Answer deletion
src/app/question-answers/delete-answer/delete-answer-modal.component.ts
LoopBack SDK
- Question API
sdk/services/custom/Question.ts - SDK HTTP core
sdk/services/core/base.service.ts
Client state
- SDK authentication
sdk/services/core/auth.service.ts - Browser storage
sdk/storage/storage.browser.ts
Other components
- Visitor
- LoopBack REST API
Connections 12
- 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