Angular in Action

by Jeremy Wilken

Overview

Summary

Angular in Action teaches you everything you need to build production-ready Angular applications.Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them.

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

About the Technology

Angular makes it easy to deliver amazing web apps. This powerful JavaScript platform provides the tooling to man- age your project, libraries to help handle most common tasks, and a rich ecosystem full of third-party capabilities to add as needed. Built with developer productivity in mind, Angular boosts your efficiency with a modern component architecture, well-constructed APIs, and a rich community.

About the Book

Angular in Action teaches you everything you need to build production-ready Angular applications. You'll start coding immediately, as you move from the basics to advanced techniques like testing, dependency injection, and performance tuning. Along the way, you'll take advantage of TypeScript and ES2015 features to write clear, well-architected code. Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them.

What's Inside

• Spinning up your first Angular application
• A complete tour of Angular's features
• Comprehensive example projects
• Testing and debugging
• Managing large applications

About the Reader

Written for web developers comfortable with JavaScript, HTML, and CSS.

About the Author

Jeremy Wilken is a Google Developer Expert in Angular, Web Technologies, and Google Assistant. He has many years of experience building web applications and libraries for eBay, Teradata, and VMware.

Table of Contents

1. Angular: a modern web platform
2. Building your first Angular app
3. App essentials
4. Component basics
5. Advanced components
6. Services
7. Routing
8. Building custom directives and pipes
9. Forms
10. Testing your application
11. Angular in production

Product Details

ISBN-13:	9781617293313
Publisher:	Manning
Publication date:	04/02/2018
Edition description:	1st Edition
Pages:	320
Product dimensions:	7.30(w) x 17.20(h) x 0.90(d)

About the Author

Jeremy Wilken is a Google Developer Expert in Angular, Web Technologies, and Google Assistant. He has many years of experience building web applications and libraries for eBay, Teradata, and VMware.

Table of Contents

Preface x

Acknowledgments xii

About this book xii

About the author xvii

About the cover illustration xviii

1 Angular: a modem web platform 1

1.1 Why choose Angular? 2

1.2 What you'll learn 3

1.3 The journey from Angular JS to Angular 4

1.4 Angular: a platform, not a framework 5

Angular CLI 6

Server rendering and the compiler 7

Mobile and desktop capabilities 8

UI libraries 9

1.5 Component architecture 11

Components'key characteristics 13

Shadow DOM 15

Templates 17

JavaScript modules 17

1.6 Modem JavaScript and Angular 20

Observables 21

1.7 TypeScript and Angular 23

2 Building your first Angular app 25

2.1 Previewing the chapter project 26

2.2 Setting up the project 28

2.3 The basic app scaffolding 29

2.4 How Angular renders the base application 31

App component 31

App module 32

Bootstrapping the app 33

2.5 Building services 36

2.6 Creating your first component 38

2.7 Components that use components and services 44

2.8 Components with forms and events 47

2.9 Application routing 50

3 App essentials 54

3.1 Entities in Angular 55

Modules 57

Components 58

Directives 60

Pipes 62

Services 63

3.2 How Angular begins to render an app 64

3.3 Types of compilers 65

3.4 Dependency injection 66

3.5 Change detection 67

3.6 Template expressions and bindings 68

Interpolation 69

Property bindings 70

Special property bindings 71

Attribute bindings 72

Event bindings 73

4 Component basics 76

4.1 Setting up the chapter example 77

Getting the code 79

4.2 Composition and lifecycle of a component 79

Component lifecycle 81

Lifecycle hooks 83

Nesting components 84

4.3 Types of components 85

4.4 Creating a Data component 89

4.5 Using inputs with components 91

Input basics 92

Intercepting inputs 95

4.6 Content projection 97

5 Advanced components 104

5.1 Change detection and optimizations 105

5.2 Communicating between components 108

Output events and template variables 110

View Child to reference components 112

5.3 Styling components and encapsulation modes 113

Adding styles to a component 114

Encapsulation modes 116

5.4 Dynamically rendering components 119

Using the ng-bootstrap modal for dynamic components 120

Dynamically creating a component and rendering it 123

6 Services 128

6.1 Setting up the chapter example 129

Getting the chapter files 131

Sample data 131

6.2 Creating Angular services 132

6.3 Dependency injection and injector trees 137

6.4 Services without dependency injection 141

6.5 Using the Http Client service 142

Httplnterceptor 146

6.6 Helper services 149

6.7 Services for sharing 153

6.8 Additional services 157

7 Routing 159

7.1 Setting up the chapter example 160

7.2 Route definitions and router setup 162

7.3 Feature modules and routing 165

7.4 Route parameters 167

Creating links in templates with router Link 167

Accessing the route parameters in a component 168

7.5 Child routes 170

7.6 Secondary routes 173

Defining a secondary route 174

Navigating between secondary routes 175

Closing a secondary route and programmatic routing 176

7.7 Route guards to limit access 177

7.8 Lazy loading 182

7.9 Routing best practices 185

8 Building custom directives and pipes 188

8.1 Setting up the chapter example 189

8.2 Crafting custom directives 190

Creating an attribute directive 192

Modifying a component with a directive with events 194

Creating a structural directive 197

8.3 Crafting custom pipes 199

Creating a pure pipe 201

Creating an impure pipe 203

9 Forms 208

9.1 Setting up the chapter example 209

Review the app before starting 211

9.2 Template-driven forms 212

Binding model data to inputs with NgModel 212

Validating form controls with NgModel 214

Custom validation with directives 217

Handling submit or cancel events 219

9.3 Reactive forms 221

Defining your form 222

Implementing the template 224

Watching changes 226

Custom validators with reactive forms 227

Handling submit or cancel events 230

Which form approach is bettert 234

9.4 Custom form controls 235

10 Testing your application 242

10.1 Testing tools and setting up the chapter example 243

Testing tools 244

10.2 Unit testing 244

Anatomy of unit tests 245

Testing pipes 246

Testing services, stubs, and mocking HTTP requests 247

Testing components and using testing modules 253

Testing directives 261

10.3 e2e testing 265

10.4 Additional testing strategies 270

How much testing is enough ? 271

When do I write tests? 271

What do I write, e2e or unit tests? 272

What if I don't have time to write tests ? 272

What about other types of testing? 273

11 Angular in production 275

11.1 Building Angular for production 276

Production build 276

Optimizing for target browsers 277

Progressive Web Apps 277

Internationalization (i18n) 278

Using alternative build tooling 278

Server-side rendering or pre-rendering 279

Build pipelines 280

11.2 Angular architecture choices 280

Lazy routes 280

Reduce external dependencies 281

Stay up-to-date 284

11.3 Deployment 284

Appendix Upgrading from AngularJS to Angular 287

Index 293