Angular Development with TypeScript

Angular Development with TypeScript, 2E
brief contents
contents
preface
acknowledgments
about this book
	Who should read this book
	Where to get the source code
	How this book is organized
	Book forum
about the authors
about the cover illustration
1 Introducing Angular
	1.1 Why select Angular for web development?
	1.2 Why develop in TypeScript and not in JavaScript?
	1.3 Overview of Angular
	1.4 Introducing Angular CLI
		1.4.1 Generating a new Angular project
		1.4.2 Development and production builds
	1.5 JIT vs. AOT compilation
		1.5.1 Creating bundles with the --prod option
		1.5.2 Generating bundles on the disk
	1.6 Introducing the sample ngAuction app
	Summary
2 The main artifacts of an Angular app
	2.1 Components
	2.2 Services
	2.3 Directives
	2.4 Pipes
	2.5 Modules
		2.5.1 Feature modules
	2.6 Understanding data binding
		2.6.1 Binding properties and events
		2.6.2 One- and two-way data binding in action
	2.7 Hands-on: Getting started with ngAuction
		2.7.1 The initial project setup for ngAuction
		2.7.2 Generating components for ngAuction
		2.7.3 The application component
		2.7.4 The navbar component
		2.7.5 The search component
		2.7.6 The footer component
		2.7.7 The carousel component
		2.7.8 The home component
	Summary
3 Router basics
	3.1 Routing basics
	3.2 Location strategies
		3.2.1 Hash-based navigation
		3.2.2 History API-based navigation
	3.3 The building blocks of client-side navigation
	3.4 Navigating to routes with navigate()
	3.5 Passing data to routes
		3.5.1 Extracting parameters from ActivatedRoute
		3.5.2 Passing query parameters to a route
	3.6 Child routes
	3.7 Hands-on: Adding navigation to the online auction
		3.7.1 ProductService
		3.7.2 ProductItemComponent
		3.7.3 HomeComponent
		3.7.4 StarsComponent
		3.7.5 ProductDetailComponent
	Summary
4 Router advanced
	4.1 Guarding routes
		4.1.1 Implementing the CanActivate guard
		4.1.2 Implementing the CanDeactivate guard
		4.1.3 Implementing the Resolve guard
	4.2 Developing an SPA with multiple router outlets
		4.2.1 Lazy-loading modules
		4.2.2 Preloaders
	Summary
5 Dependency injection in Angular
	5.1 The dependency injection pattern
	5.2 Benefits of DI in Angular apps
		5.2.1 Loose coupling and reusability
		5.2.2 Testability
	5.3 Injectors and providers
	5.4 A simple app with Angular DI
		5.4.1 Injecting a product service
		5.4.2 Injecting the HttpClient service
	5.5 Switching injectables made easy
	5.6 Declaring providers with useFactory and useValue
		5.6.1 Using InjectionToken
		5.6.2 Dependency injection in a modularized app
	5.7 Providers in lazy-loaded modules
	5.8 Providers in eagerly loaded modules
	5.9 Hands-on: Using Angular Material components in ngAuction
		5.9.1 A brief overview of the Angular Material library
		5.9.2 Adding the AM library to the project
		5.9.3 Adding a feature module with AM components
		5.9.4 Modifying the appearance of NavbarComponent
		5.9.5 Modifying the SearchComponent UI
		5.9.6 Replacing the carousel with an image
		5.9.7 More fixes with spacing
		5.9.8 Using mat-card in ProductItemComponent
		5.9.9 Adding styles to HomeComponent
	Summary
6 Reactive programming in Angular
	6.1 Handling events without observables
	6.2 Turning DOM events into observables
	6.3 Handling observable events with the Forms API
	6.4 Discarding results of unwanted HTTP requests with switchMap
	6.5 Using AsyncPipe
	6.6 Observables and the router
	Summary
7 Laying out pages with Flex Layout
	7.1 Flex Layout and ObservableMedia
		7.1.1 Using Flex Layout directives
		7.1.2 ObservableMedia service
	7.2 Hands-on: Rewriting ngAuction
		7.2.1 Why rewrite the ngAuction app from scratch?
		7.2.2 Generating a new ngAuction app
		7.2.3 Creating a custom Angular Material theme with Sass
		7.2.4 Adding a toolbar to the top-level component
		7.2.5 Creating the product service
		7.2.6 Creating the home module
		7.2.7 Configuring routes
		7.2.8 Running ngAuction
	Summary
8 Implementing component communications
	8.1 Intercomponent communication
	8.2 Input and output properties
		8.2.1 Input properties
		8.2.2 Output properties and custom events
	8.3 Implementing the Mediator design pattern
		8.3.1 Using a common parent as a mediator
		8.3.2 Using an injectable service as a mediator
	8.4 Exposing a child component’s API
	8.5 Projecting templates at runtime with ngContent
		8.5.1 View encapsulation modes
		8.5.2 Projecting onto multiple areas
	Summary
9 Change detection and component lifecycle
	9.1 A high-level overview of change detection
		9.1.1 Change detection strategies
		9.1.2 Profiling change detection
	9.2 Component lifecycle
		9.2.1 Catching changes in the ngOnChanges hook
		9.2.2 Catching changes in the ngDoCheck hook
	9.3 Hands-on: Adding the product view to ngAuction
		9.3.1 Creating product components and the module
		9.3.2 Implementing the product component
		9.3.3 Implementing the product-detail component
		9.3.4 Implementing the product-suggestion component
	Summary
10 Introducing the Forms API
	10.1 Two Forms APIs
	10.2 Template-driven forms
		10.2.1 Forms directives
		10.2.2 Applying the template-driven API to HTML forms
	10.3 Reactive forms
		10.3.1 Form model
		10.3.2 Reactive directives
		10.3.3 Applying the reactive API to HTML forms
		10.3.4 Dynamically adding controls to a form
	10.4 Forms API directives summary
	10.5 Updating form data
	10.6 Using FormBuilder
	Summary
11 Validating forms
	11.1 Using built-in validators
	11.2 Controlling when validation starts
	11.3 Custom validators in reactive forms
	11.4 Validating a group of controls
	11.5 Checking a form control’s status and validity
		11.5.1 touched and untouched form controls
		11.5.2 pristine and dirty fields
		11.5.3 Pending fields
	11.6 Changing validators dynamically in reactive forms
	11.7 Asynchronous validators
	11.8 Custom validators in template-driven forms
	11.9 Adding a search form to ngAuction
		11.9.1 The search-form component
		11.9.2 The search-results component
		11.9.3 Other code refactoring
	Summary
12 Interacting with servers using HTTP
	12.1 Overview of the HttpClient service
	12.2 Reading a JSON file with HttpClient
	12.3 Creating a web server with Node, Express, and TypeScript
		12.3.1 Creating a simple web server
		12.3.2 Serving JSON
	12.4 Bringing Angular and Node together
		12.4.1 Static assets on the server
		12.4.2 Consuming JSON in Angular apps
		12.4.3 Configuring the client proxy
		12.4.4 Subscribing to observables with the async pipe
		12.4.5 Injecting HttpClient into a service
		12.4.6 Deploying Angular apps on the server with npm scripts
	12.5 Posting data to the server
		12.5.1 Creating a server for handling post requests
		12.5.2 Creating a client for making post requests
	12.6 HTTP interceptors
	12.7 Progress events
	Summary
13 Interacting with servers using the WebSocket protocol
	13.1 Comparing HTTP and WebSockets
	13.2 Pushing data from a Node server to a plain client
	13.3 Using WebSockets in Angular clients
		13.3.1 Wrapping an observable stream into a service
		13.3.2 Angular talking to a WebSocket server
	13.4 Hands-on: Node server with WebSockets support
		13.4.1 Running ngAuction in dev mode
		13.4.2 Reviewing the ngAuction server code
		13.4.3 What changed in the ngAuction client code
	Summary
14 Testing Angular applications
	14.1 Unit testing
		14.1.1 Getting to know Jasmine
		14.1.2 Writing test scripts for a class
	14.2 Running Jasmine scripts with Karma
		14.2.1 Karma configuration file
		14.2.2 Testing in multiple browsers
	14.3 Using the Angular testing library
		14.3.1 Testing components
		14.3.2 Testing services
		14.3.3 Testing components that use routing
	14.4 End-to-end testing with Protractor
		14.4.1 Protractor basics
		14.4.2 Angular CLI–generated tests
		14.4.3 Testing a login page
	14.5 Hands-on: Adding an E2E test to ngAuction
		14.5.1 E2E testing of the product-search workflow
	Summary
15 Maintaining app state with ngrx
	15.1 From a convenience store to Redux architecture
		15.1.1 What’s Redux?
		15.1.2 Why storing app state in a single place is important
	15.2 Introducing ngrx
		15.2.1 Getting familiar with a store, actions, and reducers
		15.2.2 Getting familiar with effects and selectors
		15.2.3 Refactoring the mediator app with ngrx
		15.2.4 Monitoring state with ngrx store DevTools
		15.2.5 Monitoring the router state
	15.3 To ngrx or not to ngrx
		15.3.1 Comparing ngrx with Angular services
		15.3.2 State mutation problems
		15.3.3 ngrx code is more difficult to read
		15.3.4 The learning curve
		15.3.5 Conclusion
	15.4 Hands-on: Using ngrx in ngAuction
		15.4.1 Adding the router state support to app module
		15.4.2 Managing state in the home module
		15.4.3 Unit-testing ngrx reducers
	Summary
	Angular 6, 7, and beyond
appendix A An overview of ECMAScript
	A.1 How to run the code samples
	A.2 Scope of variables and this
		A.2.1 Hoisting of variable declarations
		A.2.2 Block scoping with let and const
	A.3 Template literals
		A.3.1 Multiline strings
	A.4 Optional parameters and default values
	A.5 Arrow function expressions, this, and that
	A.6 The rest operator
	A.7 The spread operator
	A.8 Generator functions
	A.9 Destructuring
		A.9.1 Destructuring objects
		A.9.2 Destructuring arrays
	A.10 Iterating with forEach(), for-in, and for-of
		A.10.1 Using the forEach() method
		A.10.2 Using the for-in loop
		A.10.3 Using for-of
	A.11 Classes and inheritance
		A.11.1 Constructors
		A.11.2 The super keyword and the super function
		A.11.3 Static variables
		A.11.4 Getters, setters, and method definitions
	A.12 Asynchronous processing
		A.12.1 A callback hell
		A.12.2 ES6 promises
		A.12.3 Resolving several promises at once
		A.12.4 async and await
	A.13 ES6 modules
		A.13.1 import and export
appendix B TypeScript essentials
	B.1 The role of transpilers
	B.2 Getting started with TypeScript
		B.2.1 Installing and using the TypeScript compiler
		B.2.2 TypeScript as a superset of JavaScript
	B.3 How to run the code samples
	B.4 Optional types
	B.5 Functions
		B.5.1 Default parameters
		B.5.2 Optional parameters
	B.6 Classes
		B.6.1 Access modifiers
		B.6.2 Methods
		B.6.3 Inheritance
	B.7 Interfaces
		B.7.1 Declaring custom types with interfaces
		B.7.2 Using the implements keyword
	B.8 Generics
	B.9 The readonly modifier
	B.10 Decorators
	B.11 The union type
	B.12 Using type definition files
	B.13 Controlling code style with TSLint
appendix C Using the npm package manager
	C.1 Specifying project dependencies in package.json
	C.2 Semantic versioning
	C.3 Yarn as an alternative to npm
appendix D RxJS essentials
	D.1 Getting familiar with RxJS terminology
	D.2 Observable, observer, and subscriber
	D.3 Creating observables
	D.4 Getting familiar with RxJS operators
		D.4.1 Pipeable operators
	D.5 Using an observer API
	D.6 Using RxJS Subject
	D.7 The flatMap operator
	D.8 The switchMap operator
	D.9 Error handling with catchError
index
	Numerics
	A
	B
	C
	D
	E
	F
	G
	H
	I
	J
	K
	L
	M
	N
	O
	P
	Q
	R
	S
	T
	U
	V
	W
	Y