Angular Development with TypeScript [2 ed.] 1617295345, 9781617295348
Summary Angular Development with TypeScript, Second Edition is an intermediate-level tutorial that introduces Angular a
3,148 719 31MB
English Pages 560 [554] Year 2018
![Angular Development with TypeScript [2 ed.]
1617295345, 9781617295348](https://dokumen.pub/img/200x200/angular-development-with-typescript-2nbsped-1617295345-9781617295348.jpg)
Table of contents :
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
![Angular Development with Typescript [2nd ed.]](https://dokumen.pub/img/200x200/angular-development-with-typescript-2ndnbsped.jpg)
![Learning Angular: A no-nonsense beginner's guide to building web applications with Angular 10 and TypeScript [3rd Revised]
1839210664, 9781839210662](https://dokumen.pub/img/200x200/learning-angular-a-no-nonsense-beginners-guide-to-building-web-applications-with-angular-10-and-typescript-3rd-revised-1839210664-9781839210662.jpg)
