Table of Contents
Introduction ix
1 Introducing Angular 1
Why Angular 2
What This Book Will Not Cover 2
Getting Started with Your Development Environment 3
Node.js 3
TypeScript 4
Angular CLI 4
Getting the Codebase 5
Conclusion 5
2 Hello Angular 7
Starting Your First Angular Project 7
Understanding the Angular CLI 8
Running the Application 9
Basics of an Angular Application 11
Root HTML-index.html 12
The Entry Point-main.ts 12
Main Module-app.module.ts 13
Root Component-AppComponent 14
Creating a Component 16
Steps in Creating New Components 16
Using Our New Component 18
Understanding Data Binding 19
Understanding Property Binding 22
Understanding Event Binding 25
Using Models for Cleaner Code 30
Conclusion 32
Exercise 33
3 Useful Built-In Angular Directives 35
Directives and Components 35
Built-In Attribute Directives 36
NgClass 36
NgStyle 40
Alternative Class and Style Binding Syntax 41
Built-In Structural Directives 42
Nglf 44
NgFor 45
NgSwitch 50
Multiple Sibling Structural Directives 51
Conclusion 51
Exercise 52
4 Understanding and Using Angular Components 53
Components-A Recap 53
Defining a Component 54
Selector 54
Template 55
Styles 56
Style Encapsulation 58
Others 59
Components and Modules 61
Input and Output 62
Input 62
Output 64
Change Detection 67
Component Lifecycle 71
Interfaces and Functions 72
View Projection 77
Conclusion 79
Exercise 79
5 Testing Angular Components 81
Why Unit Test? 81
Testing and Angular 82
The Test Setup 83
Karma Config 84
Test.ts 85
Writing Unit Tests 85
An Isolated Unit Test 85
Running the Tests 87
Writing an Angular-Aware Unit Test 89
Testing Component Interactions 92
Debugging 95
Conclusion 96
Exercise 96
6 Working with Template-Driven Forms 97
Template-Driven Forms 97
Setting Up Forms 98
Alternative to ngModel-Event and Property Binding 99
ngModel 102
A Complete Form 104
Control State 108
Control Validity 112
Working with FormGroups 118
Conclusion 121
Exercise 121
7 Working with Reactive Forms 123
Reactive Forms 123
Understanding the Differences 124
Using Reactive Forms 124
Form Controls 124
Form Groups 128
Form Builders 131
Form Data 132
Control State, Validity, and Error Messages 133
Form and Data Model 135
FormArrays 139
Conclusion 145
Exercise 145
8 Angular Services 147
What Are Angular Services? 147
Creating Our Own Angular Service 148
Digging into the Example 148
An Introduction to Dependency Injection 158
Angular and Dependency Injection 160
RxJS and Observables: Moving to Asynchronous Operations 167
Conclusion 173
Exercise 173
9 Making HTTP Calls in Angular 175
Introducing HttpClient 175
Server Setup 176
Using HttpClientModule 176
Making HTTP GET/POST Calls 177
Advanced HTTP 183
Options-Headers/Params 184
Options-Observe/Response Type 186
Interceptors 191
Advanced Observables 199
Conclusion 206
Exercise 207
10 Unit Testing Services 209
How to Unit Test Services 209
Testing Components with a Service Dependency 213
Testing Components with a Real Service 213
Testing Components with a Mock Service 214
Testing Components with a Fake Service 216
Unit Testing Async 219
Unit Testing HTTP 222
Conclusion 227
Exercise 228
11 Routing in Angular 229
Setting Up Angular Routing 229
Server Setup 229
Starting Codebase 230
Importing the Router Module 230
Displaying the Route Contents 233
Navigating Within the Application 234
Wildcards and Defaults 236
Common Routing Requirements 238
Required Route Params 238
Navigating in Your Application 240
Optional Route Params 244
Route Guards 247
Authenticated-Only Routes 248
Preventing Unload 251
Preloading Data Using Resolve 253
Conclusion 256
Exercise 256
12 Productionizing an Angular App 259
Building for Production 259
Production Build 260
Ahead-of-Time (AOT) Compilation and Build Optimizer 261
Base Href 262
Deploying an Angular Application 262
Other Concerns 263
Caching 263
API/Server Calls and CORS 265
Different Environments 266
Handling Deep-Linking 266
Lazy Loading 267
Server-Side Rendering and Handling SEO 274
Conclusion 283
Index 285
