How packtpublishing/angular-projects-4e works
1. Overall shape
- This repository is a collection of chapter-sized Angular projects, not one single app.
- Each chapter folder (ch01 … ch10) is its own self-contained example with its own package.json, angular.json, TypeScript config, source tree, and tests.
- The top-level repo is therefore a teaching/workbook container; the real architecture lives inside each chapter.
2. Common Angular app structure
- Most chapters use the same Angular runtime pattern: src/main.ts boots the app, src/app/app.config.ts wires providers, and src/app/app.routes.ts defines route entry points.
- src/app/app.ts, app.html, and app.scss form the shell/layout layer around the feature modules/components.
- The apps are organized around standalone components and route-driven features, rather than large NgModule-based application layers.
3. Shared UI concern across chapters
- Many chapters include chapter-title.component.ts and chapter-title.service.ts.
- This is a small shared presentation/service boundary used to keep chapter pages visually consistent and to centralize page-title behavior.
- In architecture terms, it sits at the “app shell / shared UI” layer, above individual feature domains.
4. Feature-by-feature organization
- Each chapter introduces one or more feature folders under src/app/ that model the book’s domain example.
- Examples include issue-list, issue-reporter, order, product-list, product-detail, cart, booking, employee-builder, shifts, and pages/*.
- These feature folders typically contain a component class, template, stylesheet, and spec, making each feature a clean UI boundary for its domain.
5. Data and domain models
- The apps use small TypeScript model files such as issue.ts, product.ts, item.ts, ticket.ts, employee.ts, and reservation.entity.ts to define the shape of domain data.
- Several chapters also include service/data helper files like issues.ts, products.ts, data.ts, parking.ts, and menu.ts.
- This indicates a layered flow of model → service/data source → feature component → template.
6. Mock and local data sources
- Some chapters use local mock data in public/ or repo-local JSON files such as ch07/db.json.
- ch02/public/mock-issues.ts, for example, provides a fixture-like data source for the issue workflow.
- These local data artifacts act as the boundary between UI logic and backend-like input without requiring a real remote service.
7. Route-centric chapter examples
- Later chapters emphasize routing more explicitly, including nested routes under src/app/pages/* in ch05.
- This suggests a UI architecture where the route tree is the primary composition mechanism, and each route maps to a feature page.
- The chapter apps are structured to demonstrate navigation boundaries, lazy-ish page grouping, and page-level composition.
8. Chapter 6: split client/server architecture
- ch06 is the clearest full-stack split: it contains a client Angular app and a server NestJS app.
- The client lives under ch06/client, while the server lives under ch06/server.
- The server includes reservations with controller/service/module/dto/entity layers, plus an ai subservice, so it acts as the backend domain and API boundary for the client.
9. Chapter 6 backend boundary
- The NestJS server is organized in a classic service-controller-module layout:
- reservations.controller.ts handles HTTP/API entry points,
- reservations.service.ts contains business logic,
- DTO and entity files define transport and persistence shapes,
- ai.service.ts is a specialized backend dependency.
- This is the main non-UI subsystem in the repo and the only explicit API server with clear internal layering.
10. Chapter 7: server-side rendering variant
- ch07 introduces Angular SSR-style entry points such as main.server.ts, server.ts, app.config.server.ts, and app.routes.server.ts.
- This means the app has both client and server execution paths, with the server rendering layer wrapping the same app features.
- From an architecture standpoint, it is still one Angular app, but with an extra server rendering/runtime boundary.
11. Deployment/infrastructure hints
- ch03/firebase.json suggests Firebase deployment or hosting is part of that chapter’s example.
- ch07/db.json suggests local JSON-backed data serving or mock API usage in the SSR chapter.
- These files are not core to every chapter, but they matter when diagramming runtime/environment boundaries.
12. Testing and quality gates
- Each project includes co-located spec files next to components/services and root-level app.spec.ts or feature specs.
- The server side in ch06/server also has test/ and e2e Jest configuration, indicating separate unit and integration test layers.
- This repo is strongly test-oriented at the feature boundary level rather than via one centralized test harness.
13. What to draw as the main architecture
- For most chapters: draw a single Angular frontend with an app shell feeding route-based feature components, backed by local data/services.
- For ch06: draw a client–server split, where the Angular client talks to a NestJS reservation API, which internally uses a service/module/DTO structure and an AI helper.
- For ch07: draw an Angular app with both browser and server rendering entry points.
14. Repository-level takeaway
- This repo is best understood as a progressive set of reference architectures rather than one evolving product.
- The core recurring pattern is: Angular shell + routed feature pages + small domain models/services, with later chapters adding backend, SSR, and deployment variations.
Main entry points: reservations.module.ts Reservations API · src/main.ts Ch 04 · src/main.ts Ch 06 client · src/main.ts Ch 02
Components 19
Angular chapters
Self-contained chapter projects, each with its own Angular app and local feature set.
- Chapter shell · Repeated app-shell layer: chapter title plus app config/routes/layout.
- Local data · Repo-local fixtures, JSON, and in-app data modules used as backend substitutes.
- Routed pages · Standalone components organized as route entry points and page-level features.
- Ch 01 · Small standalone Angular chapter app.
ch01/src/main.ts - Ch 02 · Issue workflow app with list and reporter features.
ch02/src/main.ts - Ch 03 · Order/table workflow app.
ch03/src/main.ts - Ch 04 · Product browsing and picking chapter app.
ch04/src/main.ts - Ch 05 · Route-centered chapter with nested pages.
ch05/src/main.ts - Ch 08 · Employee builder and shifts chapter app.
ch08/src/main.ts - Ch 09 · Cart and data-driven chapter app.
ch09/src/main.ts - Ch 10 · Small Angular chapter focused on button components.
ch10/src/main.ts
Chapter 6 backend
Client/server split with a NestJS API behind the Angular client.
- Ch 06 client · Booking UI that consumes a backend reservation API.
ch06/client/src/main.ts - Reservations API · Backend boundary exposing reservation endpoints.
ch06/server/src/reservations/reservations.module.ts - Controller · HTTP/API entry point for reservation operations.
ch06/server/src/reservations/reservations.controller.ts - Service · Business logic and orchestration for reservations.
ch06/server/src/reservations/reservations.service.ts - AI helper · Specialized backend dependency used by the reservation workflow.
ch06/server/src/reservations/ai/ai.service.ts
Chapter 7 SSR
Angular app with browser and server rendering entry points.
- Ch 07 · Angular app with browser and server rendering paths.
ch07/src/main.ts - SSR runtime · Server-side rendering entry points wrapping the Angular app.
ch07/src/main.server.ts
Other components
- Workbook · Repository-level teaching workbook containing chapter-sized projects.
Connections 32
- Workbook → Chapter shell: repeats · Common shell pattern reused across chapters.
- Workbook → Local data: uses · Many chapters rely on local fixtures or in-app data modules.
- Workbook → Routed pages: organizes around · Most chapter apps are composed from route-driven feature pages.
- Workbook → Ch 01: contains · Chapter 1 app.
- Workbook → Ch 02: contains · Chapter 2 app.
- Workbook → Ch 03: contains · Chapter 3 app.
- Workbook → Ch 04: contains · Chapter 4 app.
- Workbook → Ch 05: contains · Chapter 5 app.
- Workbook → Ch 06 client: contains · Chapter 6 Angular client.
- Workbook → Reservations API: contains · Chapter 6 NestJS server.
- Workbook → Ch 07: contains · Chapter 7 app.
- Workbook → SSR runtime: contains · Chapter 7 server rendering entry point.
- Workbook → Ch 08: contains · Chapter 8 app.
- Workbook → Ch 09: contains · Chapter 9 app.
- Workbook → Ch 10: contains · Chapter 10 app.
- Ch 02 → Chapter shell: uses · Issue chapters use the chapter-title shell.
- Ch 02 → Local data: feeds · Issue workflow is backed by mock issue data.
- Ch 03 → Chapter shell: uses · Order chapter uses the common shell.
- Ch 03 → Local data: feeds · Order data is modeled locally.
- Ch 04 → Chapter shell: uses · Product chapter uses the common shell.
- Ch 04 → Routed pages: splits into · Product list/detail/picking are routed features.
- Ch 04 → Local data: feeds · Products and resolver data are local to the chapter.
- Ch 05 → Routed pages: splits into · Nested page routes are the primary composition mechanism.
- Ch 06 client → Chapter shell: uses · Client uses the chapter shell pattern.
- Ch 06 client → Local data: feeds · Client data module supplies booking state.
- Ch 06 client → Reservations API: calls · Booking UI depends on the reservation backend.
- Reservations API → Controller: exposes · HTTP controller forms the API boundary.
- Reservations API → Service: contains · Service holds reservation business logic.
- Service → AI helper: depends on · Domain logic uses the AI helper.
- Reservations API → SSR runtime: parallel runtime · Both chapter 6 and 7 introduce non-browser runtime boundaries.
- Ch 07 → Chapter shell: uses · SSR chapter still uses the Angular shell layer.
- Ch 07 → SSR runtime: paired with · Browser app is wrapped by server rendering entry points.