How naru32/angular-fundalmentals works
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: app.routes.ts Route table · app.config.ts App providers · app.ts App shell · second-component.ts Second component
Components 26
App navigation
- App shell
src/app/app.ts - Route table
src/app/app.routes.ts - App providers
src/app/app.config.ts
Angular feature demos
- First component
src/app/first-component/first-component.ts - Second component
src/app/second-component/second-component.ts - Data binding
src/components/data-binding/data-binding.ts - Signals
src/components/signals/signals.ts - Directives
src/Directives - Forms
src/Forms - Pipes
src/Pipes/pipes/pipes.ts - Lifecycle
src/components/lifecycle/lifecycle.ts - Template demo
src/components/template/template/template.ts - Select form
src/components/select-form/select-form.ts - User view
src/components/user/user.ts - Login view
src/components/login/login.ts
Reactive data and state
- RxJS examples
src/RxJS - Student service
src/app/service/students.ts - Counter reducer
src/app/store/counter.reducer.ts - Counter actions
src/app/store/counter.action.ts
HTTP and shared UI
- GET example
src/api-integration/get-api/get-api.ts - POST example
src/api-integration/post-api/post-api.ts - Reusable button
src/Reusable/button/button.ts - Reusable card
src/Reusable/card/card.ts - Auth interceptor
src/interceptor/auth-interceptor.ts
Other components
- App visitor
- Remote APIs
Connections 27
- App visitor → App shell: opens
- App shell → Route table: hosts outlet
src/app/app.ts - Route table → Login view: routes to
src/app/app.routes.ts - Route table → First component: routes to
src/app/app.routes.ts - Route table → Second component: routes to
src/app/app.routes.ts - Route table → Data binding: routes to
src/app/app.routes.ts - Route table → Signals: routes to
src/app/app.routes.ts - Route table → Forms: routes to
src/app/app.routes.ts - Route table → Select form: routes to
src/app/app.routes.ts - Route table → User view: routes to
src/app/app.routes.ts - Route table → GET example: routes to
src/app/app.routes.ts - Route table → POST example: routes to
src/app/app.routes.ts - Route table → Lifecycle: routes to
src/app/app.routes.ts - Route table → Template demo: routes to
src/app/app.routes.ts - Route table → RxJS examples: routes to
src/app/app.routes.ts - Route table → Pipes: routes to
src/app/app.routes.ts - App providers → Route table: provides router
src/app/app.config.ts - App providers → Counter reducer: registers reducer
src/app/app.config.ts - App providers → Auth interceptor: registers interceptor
src/app/app.config.ts - First component → Counter reducer: uses state
src/app/first-component/first-component.ts - Counter reducer → Counter actions: handles actions
src/app/store/counter.reducer.ts - App shell → Student service: publishes roles
src/app/app.ts - Pipes → Student service: subscribes to roles
src/Pipes/pipes/pipes.ts - Second component → Student service: subscribes to roles
src/app/second-component/second-component.ts - Pipes → Reusable button: uses
src/Pipes/pipes/pipes.ts - Second component → Reusable card: uses
src/app/second-component/second-component.ts - RxJS examples → Remote APIs: sends HTTP requests
src/RxJS/combine-observable/combine-observable.ts