Angular 2 Development with TypeScript

by Yakov Fain, Anton Moiseev

Overview

Summary

Angular 2 Development with Typescript teaches you what you need to start using Angular, while you also learn TypeScript and how to take advantage of its benefits.

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 web clients or full-featured SPAs, using the Angular 2 web framework is a liberating experience. Its declarative style makes it easy to define and add features without a lot of manually written boilerplate, and the fully integrated TypeScript language gives you the benefits of a statically typed language within the JavaScript ecosystem. Not to mention that adding Angular 2 and TypeScript to your skill set makes you a hot commodity.

About the Book

Angular 2 Development with Typescript introduces Angular 2 to developers comfortable using AngularJS v1 or other web frameworks. You'll start by exploring how Angular 2 works in an online auction application. Along the way, you'll learn to use TypeScript to write type-aware classes, interfaces, and generics. This is a practical book that covers real-world development concerns like data and views, user interaction with forms, and communicating with servers, as well as testing and deploying your Angular 2 applications.

What's Inside

• Design and build modular applications
• Transpile TypeScript into today's JavaScript
• Use modern JavaScript workflow tools like npm, Karma, and Webpack

About the Reader

This book is for intermediate web developers with a working knowledge of JavaScript. No TypeScript or AngularJS experience needed.

About the Author

Yakov Fain and Anton Moiseev are experienced web application developers. Yakov has written several books on software development.

Table of Contents

1. Introducing Angular 2
2. Getting started with Angular
3. Navigation with the Angular router
4. Dependency injection
5. Bindings, observables, and pipes
6. Implementing component communications
7. Working with forms
8. Interacting with servers using HTTP and WebSockets
9. Unit-testing Angular applications
10. Bundling and deploying applications with Webpack

Product Details

ISBN-13:	9781617293122
Publisher:	Manning
Publication date:	12/30/2016
Edition description:	1st Edition
Pages:	456
Product dimensions:	7.30(w) x 9.10(h) x 1.10(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 xiii

Acknowledgments xvi

About this book xvii

About the cover illustration xxi

1 Introducing Angular 2 1

1.1 A sampler of JavaScript frameworks and libraries 2

Feature-complete frameworks 2

Lightweight frameworks 2

Libraries 3

What is Node.js? 4

1.2 High-level overview of AngularJS 5

1.3 High-level overview of Angular 8

Code simplification 8

Performance improvements 14

1.4 An Angular developer's toolbox 15

1.5 How things are done in Angular 18

1.6 Introducing the online auction example 19

1.7 Summary 22

2 Getting started with Angular 23

2.1 A first Angular application 24

Hello World in TypeScript 24

Hello World in ES5 28

Hello World in ES6 29

Launching applications 31

2.2 The building blocks of an Angular application 32

Modules 32

Components 33

Directives 35

A brief introduction to data binding 36

2.3 The SystemJS universal module loader 36

An overview of module loaders 36

Module loaders vs. <script> tags 37

Getting started with SystemJS 38

2.4 Selecting a package manager 43

Comparing npm and jspm 45

Starting an Angular project with npm 46

2.5 Hands-on: getting started with the online auction 52

Initial project setup 53

Developing the home page 54

Launching the online auction application 62

2.6 Summary 63

3 Navigation with the Angular router 64

3.1 Routing basics 65

Location strategies 66

The building blocks of client-side navigation 68

Navigating to routes with navigate() 75

3.2 Passing data to routes 76

Extracting parameters from ActivatedRoute 77

Passing static data to a route 79

3.3 Child routes 80

3.4 Guarding routes 87

3.5 Developing a SPA with multiple router outlets 91

3.6 Splitting an app into modules 95

3.7 Lazy-loading modules 97

3.8 Hands-on: adding navigation to the online auction 99

Creating ProductDetailComponent 100

Creating HomeComponent and code refactoring 101

Simplifying ApplicationComponent 102

Adding a RouterLink to ProductItemComponent 103

Modifying: the root module to add routing 105

Running the auction 106

3.9 Summary 107

4 Dependency injection 108

4.1 The Dependency Injection and Inversion of Control patterns 109

The Dependency Injection pattern 109

The Inversion of Control pattern 110

Benefits of dependency injection 110

4.2 Injectors and providers 112

How to declare a provider 115

4.3 A sample application with Angular DI 116

Injecting a product service 116

Injecting the Http service 119

4.4 Switching injectables made easy 120

Declaring providers with useFactory and useValue 123

Using OpaqueToken 126

4.5 The hierarchy of injectors 127

ViewProviders 129

4.6 Hands-on: using DI in the online auction application 130

Changing the code to pass the product ID as a parameter 133

Modifying ProductDetailComponent 133

4.7 Summary 138

5 Bindings, observables, and pipes 139

5.1 Data binding 140

Binding to events 141

Binding to properties and attributes 142

Binding in templates 146

Two-way data binding 149

5.2 Reactive programming and observables 152

What are observables and observers? 152

Observable event streams 154

Cancelling observables 158

5.3 Pipes 162

Custom pipes 163

5.4 Hands-on: filtering products in the online auction 165

5.5 Summary 168

6 Implementing component communications 170

6.1 Inter-component communication 171

Input and output properties 171

The Mediator pattern 178

Changing templates at runtime with ngContent 182

6.2 Component lifecycle 187

Using ngOnChanges 189

6.3 A high-level overview of change detection 194

6.4 Exposing a child component's API 196

6.5 Hands-on: adding a rating feature to the online auction 198

6.6 Summary 204

7 Working with forms 206

7.1 Overview of HTML forms 207

Standard browser features 207

Angular's Forms API 209

7.2 Template-driven forms 210

Directives overview 211

Enriching the HTML form 213

7.3 Reactive forms 215

Form model 215

Form directives 216

Refactoring the sample form 220

Using FormBuilder 221

7.4 Form validation 222

Validating reactive forms 222

7.5 Hands-on: adding validation to the search form 231

Modifying the root module to add Forms API support 232

Adding a list of categories to SearchComponent 232

Creating a form model 233

Refactoring the template 234

Implementing the onSearch() method 236

Launching the online auction 236

7.6 Summary 236

8 Interacting with servers using HTTP and WebSocets 237

8.1 A brief overview of the Http object's APT 238

8.2 Creating a web server with Node and TypeScript 241

Creating a simple web server 241

Serving JSON 243

Live TypeScript recompilation and code reload 245

Adding the RESTful API for serving products 246

8.3 Bringing Angular and Node together 248

Static resources on the server 248

Making GET requests with the Http object 251

Unwrapping observables in templates with AsyncPipe 252

Injecting HTTP into a service 254

8.4 Client-server communication via WebSockets 257

Pushing data from a Node server 258

Turning a WebSocket into an observable 261

8.5 Hands-on: implementing product search and bid notifications 268

Implementing product search using HTTP 269

Broadcasting auction bids using WebSockets 273

8.6 Summary 276

9 Unit-testing Angular applications 278

9.1 Getting to know Jasmine 279

What to test 282

How to install Jasmine 282

9.2 What comes with Angular's testing library 283

Testing services 285

Testing navigation with the router 285

Testing components 286

9.3 Testing a sample weather application 287

Configuring SystemJS 289

Testing the weather router 289

Testing the weather service 292

Testing the weather component 295

9.4 Running tests with Karma 298

9.5 Hands-on: unit-testing the online auction 301

Testing ApplicationComponent 303

Testing ProductService 304

Testing StarsComponent 305

Running the tests 307

9.6 Summary 309

Bundling and deploying applications with Webpack 310

10.1 Getting to know Webpack 312

Hello World with Webpack 313

How to use loaders 318

How to use plugins 322

10.2 Creating a basic Webpack configuration for Angular 322

Npm mii build 325

Npm start 327

10.3 Creating development and production configurations 327

Development configuration 328

Production configuration 329

A custom type-definition file 332

10.4 What's Angular CLI? 334

Starting a new project with Angular CLI 335

CLI commands 335

10.5 Hands-on: deploying the online auction with Webpack 337

Starting the Node server 338

Starting the auction client 339

Running tests with Karma 342

10.6 Summary 345

Appendix A An overview of ECMAScripl 6 347

Appendix B TypeScript as a language for Angular applications 388

Index 421