Angular Development with TypeScript

by Yakov Fain, Anton Moiseev

Overview

Summary

Angular Development with TypeScript, Second Edition is an intermediate-level tutorial that introduces Angular and TypeScript to developers comfortable with building web applications using other frameworks and tools.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology

Whether you're building lightweight web clients or full-featured SPAs, Angular is a clear choice. The Angular framework is fast, efficient, and widely adopted. Add the benefits of developing in the statically typed, fully integrated TypeScript language, and you get a programming experience other JavaScript frameworks just can't match.

About the Book

Angular Development with TypeScript, Second Edition teaches you how to build web applications with Angular and TypeScript. Written in an accessible, lively style, this illuminating guide covers core concerns like state management, data, forms, and server communication as you build a full-featured online auction app. You'll get the skills you need to write type-aware classes, interfaces, and generics with TypeScript, and discover time-saving best practices to use in your own work.

What's inside

• Code samples for Angular 5, 6, and 7
• Dependency injection
• Reactive programming
• The Angular Forms API

About the Reader

Written for intermediate web developers familiar with HTML, CSS, and JavaScript.

About the Author

Yakov Fain and Anton Moiseev are experienced trainers and web application developers. They have coauthored several books on software development.

Table of Contents

1. Introducing Angular
2. The main artifacts of an Angular app
3. Router basics
4. Router advanced
5. Dependency injection in Angular
6. Reactive programming in Angular
7. Laying out pages with Flex Layout
8. Implementing component communications
9. Change detection and component lifecycle
10. Introducing the Forms API
11. Validating forms
12. Interacting with servers using HTTP
13. Interacting with servers using the WebSocket protocol
14. Testing Angular applications
15. Maintaining app state with ngrx

Product Details

ISBN-13:	9781617295348
Publisher:	Manning
Publication date:	12/17/2018
Edition description:	2nd Edition
Pages:	560
Product dimensions:	7.30(w) x 9.10(h) x 1.20(d)

About the Author

Yakov Fain has been a developer for more than 25 years and has written multiple books on software development.

Anton Moiseev has 8 years of software development experience, specializing in enterprise web applications.

Table of Contents

Preface xv

Acknowledgments xviii

About this book xix

About the authors xxiii

About the cover illustration xxiv

1 Introducing Angular 1

1.1 Why select Angular for web development? 2

1.2 Why develop in TypeScript and not in JavaScript? 3

1.3 Overview of Angular 4

1.4 Introducing Angular CLI 8

Generating a new Angular project 9

Development and production builds 12

1.5 JIT vs. AOT compilation 13

Creating bundles with the -prod option 14

Generating bundles on the disk 15

1.6 Introducing the sample ngAuction app 15

1.7 Summary 18

2 The main artifacts of an Angular app 19

2.1 Components 20

2.2 Services 23

2.3 Directives 24

2.4 Pipes 25

2.5 Modules 26

Feature, modules 27

2.6 Understanding data binding 30

Binding properties and events 30

One- and two-way data binding in action 32

2.7 Hands-on: Getting started with ngAuction 35

The initial project setup for ngAuction 36

Generating components for ngAuction 37

The application component 38

The navbar component 39

The search component 41

The footer component 42

The carousel component 42

The home component 45

2.8 Summary 46

3 Router basics 47

3.1 Routing basics 48

3.2 Location strategies 49

Hash-based navigation 50

History API-based navigation 50

3.3 The building blocks of client-side navigation 51

3.4 Navigating to routes with navigate () 56

3.5 Passing data to routes 57

Extracting parameters from ActivatedRoute 58

Passing query parameters to a route 61

3.6 Child routes 62

3.7 Hands-on: Adding navigation to the online auction 67

ProductService 68

ProductItemComponent 69

HomeComponent 70

Stars Component 73

ProductDetailComponent 75

3.8 Summary 78

4 Router advanced 79

4.1 Guarding routes 79

Implementing the CanActivate guard 80

Implementing the CanDeactivate guard 83

Implementing the Resolve guard 85

4.2 Developing an SPA with multiple router outlets 89

Lazy-loading modules 91

Preloaders 95

4.3 Summary 96

5 Dependency injection in Angular 97

5.1 The dependency injection pattern 98

5.2 Benefits of DI in Angular apps 99

Loose coupling and reusability 99

Testability 101

5.3 Injectors and providers 102

5.4 A simple app with Angular DI 104

Injecting a product service 104

Injecting the HttpClient service 107

5.5 Switching injectables made easy 109

5.6 Declaring providers with useFactory and useValue 113

Using Injection Token 116

Dependency injection in a modularized app 117

5.7 Providers in lazy-loaded modules 117

5.8 Providers in eagerly loaded modules 119

5.9 Hands-on: Using Angular Material components in ngAuction 121

A brief overview of the Angular Material library 122

Adding the AM library to the project 124

Adding a feature module with AM components 125

Modifying the appearance of NavbarComponent 126

Modifying the SearchComponent UI 128

Replacing the carousel with an image 131

More fixes with spacing 131

Using mat-card in ProductItemComponent 131

Adding styles to HomeComponent 132

5.10 Summary 132

6 Reactive programming in Angular 133

6.1 Handling events without observables 134

6.2 Turning DOM events into observables 136

6.3 Handling observable events with the Forms API 138

6.4 Discarding results of unwanted HTTP requests with switchMap 140

6.5 Using AsyncPipe 144

6.6 Observables and the router 147

6.7 Summary 150

7 Laying out pages with Flex Layout 151

7.1 Flex Layout and ObservableMedia 152

Using Flex Layout directives 153

ObservableMedia service 157

7.2 Hands-on: Rewriting ngAuction 159

Why rewrite the ngAuction app from scratch? 159

Generating a new ngAuction app 162

Creating a custom Angular Material theme with Sass 162

Adding a toolbar to the top-level component 165

Creating the product service 168

Creating the home module 170

Configuring routes 175

Running ngAuction 176

7.3 Summary 177

8 Implementing component communications 178

8.1 Intercomponent communication 179

8.2 Input and output properties 179

Input properties 180

Output properties and custom events 182

8.3 Implementing the Mediator design pattern 186

Using a common parent as a mediator 186

Using an injectable service as a mediator 191

8.4 Exposing a child component's API 196

8.5 Projecting templates at runtime with ngContent 199

View encapsulation modes 201

Projecting onto multiple areas 203

8.6 Summary 206

9 Change detection and component lifecycle 207

9.1 A high-level overview of change detection 208

Change detection strategies 209

Profiling change detection 211

9.2 Component lifecycle 212

Catching changes in the ngOnChanges hook 214

Catching changes in the ngDoCheck hook 217

9.3 Hands-on: Adding the product view to ngAuction 220

Creating product components and the module 221

Implementing the product component 222

Implementing the product-detail component 225

Implementing the product-suggestion component 226

9.4 Summary 228

10 Introducing the Forms API 229

10.1 Two Forms APIs 230

10.2 Template-driven forms 230

Forms directives 230

Applying the template-driven API to HTML forms 233

10.3 Reactive forms 236

Form model 236

Reactive directives 238

Applying the reactive API to HTML forms 241

Dynamically adding controls to a form 242

10.4 Forms API directives summary 245

10.5 Updating form data 246

10.6 Using FormBuilder 248

10.7 Summary 249

11 Validating forms 250

11.1 Using built-in validators 251

11.2 Controlling when validation starts 254

11.3 Custom validators in reactive forms 255

11.4 Validating a group of controls 259

11.5 Checking a form control's status and validity 261

Touched and untouched form controls 261

Pristine and dim fields 262

Pending fields 262

11.6 Changing validators dynamically in reactive forms 262

11.7 Asynchronous validators 264

118 Custom validators in template-driven forms 266

11.9 Adding a search form to ngAuction 267

The search-form component 268

The search-results component 272

Other code refactoring 273

11.10 Summary 276

12 Interacting with servers using HTTP 277

12.1 Overview of the HttpClient service 278

12.2 Reading a JSON file with HttpClient 279

12.3 Creating a web server with Node, Express, and TypeScript 282

Creating a simple web server 283

ServingJSON 285

12.4 Bringing Angular and Node together 287

Static assets on the server 287

ConsumingJSON in Angular apps 289

Configuring the client proxy 291

Subscribing to observables with the async pipe 293

Injecting HttpClient into a service 294

Deploying Angular apps on the server with npm scripts 296

12.5 Posting data to the server 299

Creating a server for handling post requests 299

Creating a client for making post requests 301

12.6 HTTP interceptors 302

12.7 Progress events 307

12.8 Summary 309

13 Interacting with servers using the WebSocket protocol 310

13.1 Comparing HTTP and WebSockets 311

13.2 Pushing data from a Node server to a plain client 313

13.3 Using WebSockets in Angular clients 316

Wrapping an observable stream into a service 317

Angular talking to a WebSocket server 319

13.4 Hands-on: Node server with WebSockets support 324

Running ngAuction in dev mode 326

Reviewing the ngAuction server code 327

What changed in the ngAuction client code 334

13.5 Summary 339

14 Testing Angular applications 340

14.1 Unit testing 341

Getting to know Jasmine 342

Writing test scripts for a class 344

14.2 Running Jasmine scripts with Karma 346

Karma configuration file 350

Testing in multiple browsers 351

14.3 Using the Angular testing library 352

Testing components 353

Testing services 356

Testing components that me routing 360

14.4 End-to-end testing with Protractor 363

Protractor basics 363

Angular CLI-generated tests 366

Testing a login page 367

14.5 Hands-on: Adding an E2E test to ngAuction 372

E2E testing of the product-search workflow 373

14.6 Summary 379

15 Maintaining app state with ngrx 380

15.1 From a convenience store to Redux architecture 381

What's Redux? 381

Why storing app state in a single place is important 383

15.2 Introducing ngrx 384

Getting familiar with a store, actions, and reducers 385

Getting familiar with effects and selectors 390

Refactoring the mediator app with ngrx 393

Monitoring state with ngrx store DevTools 401

Monitoring the router state 405

15.3 To ngrx or not to ngrx 408

Comparing ngrx with Angular services 409

State mutation problems 410

ngrx code is more difficult to read 410

The learning curve 411

Conclusion 411

15.4 Hands-on: Using ngrx in ngAuction 411

Adding the router state support to app module 414

Managing state in the home module 415

Unit-testing ngrx reducers 423

15.5 Summary 425

15.6 Angular 6, 7, and beyond 425

Appendix A An overview of ECMA Script 428

Appendix B TypeScript essentials 463

Appendix C Using the npm package manager 491

Appendix D RxJS essentials 498

Index 521