Angular for Enterprise Applications: Build scalable Angular apps, 3rd Edition

✍ Scribed by Doguhan Uluca

• Publisher: Packt Publishing
• Year: 2024
• Tongue: English
• Leaves: 593
• Edition: 3
• Category: Library

✦ Synopsis

If you're looking to upskill and build sophisticated, minimalist web applications suited for enterprise use, Angular for Enterprise Applications is your guide to the next level of engineering mastery.

In its third edition, this Angular book distils hard-earned lessons into a lucid roadmap for success. Adopting a pragmatic approach founded on a robust technical base, you'll utilize both JavaScript and TypeScript fundamentals. You'll also embrace agile engineering coding principles and learn to architect optimally sized enterprise solutions employing the freshest concepts in Angular.

You'll gradually build upon this foundation through insightful recipes, sample apps, and crystal-clear explanations. You'll master authentication and authorization and achieve optimal performance through reactive programming and lazy loading, build complex yet flexible UIs with Router-first principles, and then integrate with backend systems using REST and GraphQL APIs.

You'll cover modern tools like RxAngular, Qwik, and Signals. You'll construct master/detail views using data tables and NgRx for state management. You'll explore DevOps using Docker and build CI/CD pipelines necessary for high-performance teams.

By the end of this book, you'll be proficient in leveraging Angular in enterprise and design robust systems that scale effortlessly.

✦ Table of Contents

Cover
Copyright
Contributors
Table of Contents
Preface
Chapter 1: Angular’s Architecture and Concepts
Two Angulars
A brief history of web frameworks
The jQuery era
The server-side MVC era
Rich client era
Angular and the philosophies behind it
Deterministic releases
First-class upgrades
Maintainability
Angular Evergreen
TypeScript
Component architecture
Reactive programming
RxJS
Reactive data streams
Modular architecture
Standalone architecture
Angular Router
Lazy loading
State management
The Flux pattern
NgRx
NgRx component store
React.js architecture
Future of Angular
Summary
Further reading
Questions
Chapter 2: Forms, Observables, Signals, and Subjects
Technical requirements
Great UX should drive implementation
Reactive versus template-driven forms
Adding Angular reactive forms
Adding and verifying components
Adding a search option to the weather service
Implementing a search
Limiting user inputs with throttle/debounce
Input validation and error messages
Template-driven forms with two-way binding
Component interaction with BehaviorSubject
Global events
Child-parent relationships with event emitters
Parent-child relationships with input binding
Sibling interactions with subjects
Managing subscriptions
Lifecycle of services
Exposé of a memory leak
Unsubscribing from a subscription
Subscribe with first or takeUntilDestroyed
Coding in the reactive paradigm
Binding to an observable with an async pipe
Tapping into an observable stream
Chaining API calls
Implementing a postal code service
Observable sequencing with switchMap
Using Angular Signals
Implementing dark mode
Replacing BehaviorSubject with signals
Generating apps with ChatGPT
Summary
Exercises
Questions
Chapter 3: Architecting an Enterprise App
Succeeding as a technical lead or architect
Understand the business impact
Set parameters of success
Elastic leadership
Ingredients of a successful project
Agile software development
Agile engineering best practices
Engineering excellence and craftsmanship
Angular in an enterprise
Diverse coding paradigm support
Community support
Tools and techniques for high-performance apps
Runtime performance
Root cause of performance bottlenecks
Minimalist JavaScript solutions
ArrowJS
Qwik.js
Angular performance solutions
Server-side rendering and hydration
App shell
Service workers
RxAngular
Angular Signals
Build performance
Nx
esbuild
Test automation
Planning using Kanban and GitHub projects
Setting up a GitHub project
Customizing the Kanban board
Creating a prioritized backlog for your app
The 80-20 solution
Understanding line-of-business apps
Disciplined and balanced approach
Router-first architecture
Feature modules
Developing a roadmap and scope
Designing with lazy loading in mind
Implementing a walking skeleton
Achieve a stateless, data-driven design
Enforce a decoupled component architecture
Differentiate between user controls and components
Maximize code reuse with TypeScript and ES
Summary
Further reading
Questions
Chapter 4: Creating a Router-First Line-of-Business App
Technical requirements
Creating LemonMart
Creating a router-first app
Configuring Angular and VS Code
Configuring Angular Material and styles
Designing LemonMart
Identifying user roles
Identifying high-level modules with a site map
Generating router-enabled modules
Designing the home route
Setting up default routes
RouterLink
Router outlet
Branding, customization, and Material icons
Branding
Color palette
Implementing a browser manifest and icons
Custom themes
Custom icons
Material icons
Feature modules with lazy loading
Configuring feature modules with components and routes
Lazy loading
Creating the walking skeleton
The manager module
User module
POS and inventory modules
PosModule
InventoryModule
Common testing module
Designing around major data entities
Defining entities
High-level UX design
Creating an artifacts wiki
Leveraging mock-ups in your app
Summary
Exercise
Further reading
Questions
Leave a review!
Chapter 5: Designing Authentication and Authorization
Technical requirements
Designing an auth workflow
JWT life cycle
TypeScript operators for safe data handling
Null and undefined checking
The conditional or ternary operator
The null coalescing operator
The nullish coalescing operator
Optional chaining
Implementing data entities and interfaces
Classes, Interfaces, and Enums
Reusable services leveraging OOP concepts
Creating an auth service
Implement an abstract auth service
Abstract functions
A cache service using localStorage
Caching the JWT
An in-memory auth service
Simple login
Logout
Resuming a JWT session
An HTTP interceptor
Summary
Further reading
Questions
Chapter 6: Implementing Role-Based Navigation
Technical requirements
Dynamic UI components and navigation
Implementing the login component
Conditional navigation
Common validations for forms
UI service using environment provider
Side navigation
Role-based routing using guards
Route guards
Auth guards
Auth service fake and common testing providers
A Firebase authentication recipe
Create a Firebase application
Configuring Firebase authentication
Adding a Firebase auth provider to Angular
Providing a service using a factory
Summary
Further reading
Questions
Leave a review!
Chapter 7: Working with REST and GraphQL APIs
Technical requirements
Full-stack architecture
Minimal MEAN
NestJS
Working with monorepos
Nx monorepo
Git submodules
CircleCI config
Designing APIs
REST APIs
OpenAPI Spec
OpenAPI spec with Express
GraphQL APIs
GraphQL schema
Apollo with Express
Implementing APIs with Express.js
Bootstrapping the server
REST routes and versioning
GraphQL resolvers
Services
MongoDB ODM with DocumentTS
Implementing JWT auth
Authenticating middleware
Custom server auth provider
Summary
Exercise
Further reading
Questions
Chapter 8: Recipes – Reusability, Forms, and Caching
Technical requirements
Implementing CRUD services with caching
Updating the cache
Multi-step responsive forms
Form controls and form groups
Stepper and responsive layout
Reusing repeating template behavior with directives
Attribute directives
Field error attribute directive
Calculated properties and DatePicker
Typeahead support
Dynamic form arrays
Creating shared components
Reviewing and saving form data
Scalable form architecture with reusable parts
Abstract form component
Implementing a reusable form part
Input masking
Custom controls with ControlValueAccessor
Implementing a custom rating control
Using custom controls in forms
Layouts using a grid list
Restoring cached data
Exercise
Summary
Further reading
Questions
Chapter 9: Recipes – Master/Detail, Data Tables, and NgRx
Technical requirements
Loading data with resolve guard
Reusing components with binding and route data
Master/detail view using auxiliary routes
Data tables with pagination
NgRx store and effects
Implementing NgRx for LocalCast Weather
Comparing BehaviorSubject and NgRx
Setting up NgRx
Defining NgRx actions
Implementing NgRx effects
Impact of RxJS operators on actions
Implementing reducers
Registering with Store using selector
Dispatching store actions
Unit testing reducers and selectors
Unit testing components with MockStore
NgRx ecosystem
NgRx/Data
NgRx/ComponentStore
NgRx/Signals
Akita
Elf
Configuring server proxies with the Angular CLI
Implementing a global spinner with NgRx/SignalState
NgRx/SignalState
Pre-loading screens with HTML and CSS
Rewriting Angular apps with NgRx/SignalStore
RxJS and signal helpers
NgRx/SignalStore
Refactoring RxJS and NgRx code
NgRx Store to SignalStore
Services from Observables to Signals
Components from Observables to Signals
Summary
Exercises
Further reading
Questions
Chapter 10: Releasing to Production with CI/CD
Technical requirements
Automated testing
Unit testing
Cypress e2e tests
Continuous integration
CircleCI
GitHub flow
Deploying to the cloud
Vercel
Deploying static files
Firebase
ng deploy
DevOps
Containerizing web apps using Docker
Anatomy of a Dockerfile
Installing Docker
Setting up npm scripts for Docker
Building and publishing an image to Docker Hub
npm scripts in VS Code
Docker extensions in VS Code
Working with containers in the cloud
Continuous deployment
Deploying to Vercel using CircleCI
Gated CI workflows
Code coverage reports
Code coverage in CI
Summary
Exercises
Further reading
Questions
Leave a review!
Appendix A
Setting Up Your Development Environment
Recommended web development tools
CLI package managers
Installing Chocolatey for Windows
Installing Homebrew for macOS
Install automation for Windows and macOS
PowerShell script
Bash script
Project setup with the Angular CLI
Setting up your development directory
Generating your Angular application
Installing the Angular CLI
Initializing your Angular app
Optimizing VS Code for Angular
Configuring your project automatically
Summary
Further reading
Questions
Packt Page
Other Books You May Enjoy
Index