Angular for Enterprise-Ready Web Applications

Cover
Copyright
Packt Page
Contributors
Table of Contents
Preface
Chapter 1: Introduction to Angular and Its Concepts
	A brief history of web frameworks
	Introduction to Angular
		Angular\'s philosophy
		Angular Evergreen
		TypeScript
		Basic Angular architecture
	The reactive development paradigm
		RxJS
		Reactive data streams
	Advanced Angular architecture
		The Angular Router
		Lazy loading
		State management
			The Flux pattern
			NgRx
		React.js architecture
	Notable Angular features
		Angular 6
		Angular 8
		Angular 9
	Summary
		Further reading
		Questions
Chapter 2: Setting up Your Development Environment
	CLI package managers
		Installing Chocolatey for Windows
		Installing Homebrew for macOS
	Installing development tools
		Git and GitHub Desktop
			Why use GitHub?
			Why use GitHub Desktop?
			Installing Git and GitHub Desktop
			Using your GitHub credentials in Git
		Node.js
		Existing Node.js installation
		Installing Node.js
			Global npm packages
		Visual Studio Code
			Installing Visual Studio Code
		Docker
			Installing Docker
		Cloud services
			Vercel Now
			Google Firebase
			Google Cloud
			Amazon Web Services
	Setup automation for Windows and macOS
		Powershell script
		Bash script
	The Angular CLI
		Setting up your development directory
		Generating your Angular application
			Installing the Angular CLI
			Initializing your Angular app
			Publishing a Git repository using GitHub Desktop
			Inspecting and updating package.json
			Committing code using VS Code
		Running your Angular app
		Verifying your code
	Optimizing VS Code for Angular
		Configuring your project automatically
			VS Code auto save
			IDE settings
			IDE extensions
		Scripting code styling and linting
			Configuring tooling
			Implementing a style checker and fixer
			Implementing a lint checker and fixer
		Configuring Angular CLI autocomplete
		VS Code Auto Fixer
	Summary
		Further reading
		Questions
Chapter 3: Creating a Basic Angular App
	Planning using Kanban and GitHub projects
		Setting up a GitHub project
		Configuring a Kanban board
		Creating a backlog for the Local Weather app
		Wireframe design
		High-level architecture
	Crafting UI elements using components and interfaces
		Adding an Angular component
		Demystifying Angular components
		Defining your model using interfaces
	Using Angular Services and HttpClient to retrieve data
		Creating a new Angular service
		Injecting dependencies
		Discovering OpenWeatherMap APIs
		Storing environment variables
		Implementing an HTTP GET operation
		Retrieving service data from a component
	Transforming data using RxJS
		Implementing Reactive transformations
	Null guarding in Angular
		Property initialization
		The safe navigation operator
		Null guarding with *ngIf
	Summary
	Further reading
	Questions
Chapter 4: Automated Testing, CI, and Release to Production
	Unit testing
	Angular unit tests
		Jasmine
			Fixtures
			Matchers
		Anatomy of auto-generated unit tests
		Unit test execution
			Compilation errors
			Test results
		Configuring TestBed
			Declarations
			Providers
			Imports
		Test doubles
			Fakes
			Mocks, stubs, and spies
	Angular e2e tests
		e2e test execution
		The e2e page object and spec
	Production readiness
		Building for production
		Setting environment variables
	Continuous Integration
		CircleCI
		GitHub flow
	Deploying to the Cloud
		Vercel Now
		Deploying static files
	Summary
	Further reading
	Questions
Chapter 5: Delivering High-Quality UX with Material
	Angular Material
	Angular Material setup and performance
		Installing Angular Material
			Automatically
			Manually
		Understanding Material\'s components
		Manually configuring Angular Material
			Importing modules
			Importing themes
			Adding the Material Icon font
	Angular Flex Layout
		Responsive layouts
		Installing Angular Flex Layout
		Layout basics
			Flex Layout APIs for DOM containers
			Flex Layout APIs for DOM elements
			Flex Layout APIs for any element
	Using Material components
		Angular Material schematics
		Modifying the landing page with Material Toolbar
		Material cards
			Card header and content
		Material typography
			Applying typography
		Flex Layout Align
		Flex Layout
			Implementing layout scaffolding
		Aligning elements with CSS
			Individually styling elements
			Fine-tuning styles
			Tweaking to match design
		Custom themes
		Unit testing with Material
	Accessibility
		Configuring automated pa11y testing
	Building an interactive prototype
		MockFlow WireframePro
		Building a mock-up
			Home screen
			Search results
			Settings pane
		Adding interactivity
			Exporting the functional prototype
	Summary
	Further reading
	Exercises
	Questions
Chapter 6: Forms, Observables, and Subjects
	Reactive forms 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
		Exposé of a memory leak
		Unsubscribing from a subscription
		Unsubscribing using SubSink
	Implementing the reactive style
		Binding to an observable with an async pipe
		Tapping into an observable stream
	Multiple API calls
		Implementing a postal code service
		Chaining API calls
	Summary
	Exercises
	Questions
Chapter 7: Creating a Router-First Line-of-Business 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
	Creating LemonMart
		Creating a router-first app
		Configuring Angular and VS Code
		Configuring 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 browser manifest and icons
		Custom themes
		Custom icons
		Material icons
	Feature modules with lazy loading
		Configuring feature modules with components and routes
		Eager loading
		Lazy loading
	Completing the walking skeleton
		The manager module
		User module
		POS and inventory modules
			POS module
			Inventory module
		Inspect the router tree
	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
	Further reading
	Questions
Chapter 8: Designing Authentication and Authorization
	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
	Reusable services leveraging OOP concepts
		JavaScript classes
		Abstraction and inheritance
			Create the auth service
			Implement an abstract auth service
			Abstract functions
			Abstract caching service using localStorage
			Caching the JWT
		Implement an in-memory auth service
			Simple login
			Logout
		Resuming a JWT session
		HTTP interceptor
	Dynamic UI components and navigation
		Implementing the login component
		Conditional navigation
		Common validations for forms
		UI service
		Side navigation
	Role-based routing using guards
		Router guards
		Auth guards
		Auth service fake and common testing providers
	Firebase authentication recipe
		Add an application
		Configure authentication
		Implement Firebase authentication
	Providing a service using a factory
	Summary
	Further reading
	Questions
Chapter 9: DevOps Using Docker
	DevOps
	Containerizing web apps using Docker
		Anatomy of a Dockerfile
		Installing Docker
		Setting up npm scripts for Docker
		Build and publish an image to Docker Hub
		NPM scripts in VS Code
		Docker extensions in VS Code
	Deploying a Dockerfile to the cloud
		Google Cloud Run
		Configuring Docker with Cloud Run
		Troubleshooting Cloud Run
	Continuous deployment
		Deploying to Vercel Now using CircleCI
		Deploying to GCloud using orbs
		Gated CI workflows
	Advanced continuous integration
		Containerizing build environments
		Multi-stage Dockerfiles
			Builder
			Tester
			Web server
		CircleCI container-in-container
	Code coverage reports
		Code coverage in CI
	Summary
	Exercise
	Further reading
	Questions
Chapter 10: RESTful APIs and Full-Stack Implementation
	Full-stack architecture
		Minimal MEAN
			Angular
			Express
			Node
			Mongo
			Tooling
		Configuring a monorepo
			Monorepo structure
			Git submodules
			Configuring a Node project with TypeScript
			CircleCI config
		Docker Compose
			Using Nginx as the web server
			Containerizing the server
			Configuring environment variables with DotEnv
			Define Docker-Compose YAML
			Orchestrating the Compose launch
			Compose on CircleCI
	RESTful APIs
		API design with Swagger
			Defining a Swagger YAML file
			Preview Swagger file
		Implementing APIs with Express.js
			Bootstrapping the server
			Routes and versioning
			Services
		Configuring Swagger with Express
	MongoDB ODM with DocumentTS
		About DocumentTS
		Connecting to the database
		Models with IDocument
	Implementing JWT auth
		Login API
		Authenticating middleware
		Custom server auth provider
		GET User by ID
	Generating users with Postman
		Configuring Postman for authenticated calls
		Postman automation
		Put User
		Pagination and filtering with DocumentTS
	Summary
	Exercise
	Further reading
	Questions
Chapter 11: Recipes – Reusability, Routing, and Caching
	Implementing a user service with GET
		Implementing PUT with caching
	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
	Scaling architecture with reusable form parts
		Base form component as an abstract class
		Implementing a reusable form part
	Input masking
	Custom controls with ControlValueAccessor
		Implementing a custom rating control
		Using custom controls in forms
	Layouts using grid list
	Restoring cached data
	Exercise
	Summary
	Further reading
	Questions
Chapter 12: Recipes – Master/Detail, Data Tables, and NgRx
	Editing existing users
		Loading data with resolve guard
		Reusing components with binding and route data
	Master/detail view auxiliary routes
	Data table with pagination
		Updating unit tests
	NgRx Store and Effects
		Implementing NgRx for LocalCast Weather
		Comparing BehaviorSubject and NgRx
		Setting up NgRx
		Defining NgRx actions
		Implementing NgRx Effects
		Implementing reducers
		Registering with Store using selector
		Dispatching store actions
		Unit testing reducers and selectors
		Unit testing components with MockStore
	NgRx Data
		Implementing NgRx/Data in LemonMart
		Configuring proxy in Angular CLI
		Using Entity Service
		Customizing Entity Service
	Summary
	Further reading
	Questions
Chapter 13: Highly Available Cloud Infrastructure on AWS
	Creating a secure AWS account
		Securing secrets
	Right-sizing infrastructure
		Optimizing instances
		Simple load testing
	Deploying to AWS ECS Fargate
		Configuring ECS Fargate
			Creating a Fargate cluster
			Creating a container repository
			Creating a task definition
			Creating an elastic load balancer
			Creating a cluster service
			Configuring the DNS
		Adding npm scripts for AWS
		Publish
		Deploying to AWS using CircleCI
	AWS billing
	Summary
	Exercise
	Further reading
	Questions
Chapter 14: Google Analytics and Advanced Cloud Ops
	Collecting analytics
		Adding Google Tag Manager to your Angular app
			Setting up Google Tag Manager
			Setting up Google Analytics
	Budgeting and scaling
		Calculating the per-user cost
	Advanced load testing
	Reliable cloud scaling
		Cost per user in a scalable environment
			Calculating target server utilization
			Revising estimates with metrics
	Measuring actual use
		Creating a custom event
		Adding custom events in Angular
		Advanced analytics events
	Summary
	Further reading
	Questions
Appendix A
Appendix B
Another Book You May Enjoy
Index