Ng Book 2 The Guide To Angular 4

User Manual:

Open the PDF directly: View PDF .
Page Count: 681

Download
Open PDF In Browser	View PDF

ng-book
The Complete Guide to Angular

Written by Nate Murray, Felipe Coury, Ari Lerner, and Carlos Taborda
© 2017 Fullstack.io
All rights reserved. No portion of the book manuscript may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means beyond the number of purchased copies,
except for a single backup or archival copy. The code may be used freely in your projects,
commercial or otherwise.
The authors and publisher have taken care in preparation of this book, but make no expressed
or implied warranty of any kind and assume no responsibility for errors or omissions. No
liability is assumed for incidental or consequential damagers in connection with or arising out
of the use of the information or programs container herein.
Published in San Francisco, California by Fullstack.io.

FULLSTACK .io

We’d like to thank:

• Our technical editors: Frode Fikke, Travas Nolte, Daniel Rauf
• Nic Raboy, and Burke Holland for contributing the NativeScript chapter

Contents
Book Revision . . . . . . . . . .
Bug Reports . . . . . . . . . . .
Chat With The Community! . .
Vote for New Content (new!) . .
Be notified of updates via Twitter
We’d love to hear from you! . . .

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

1
1
1
1
1
1

How to Read This Book . . . . . . . . .
Running Code Examples . . . . . .
Angular CLI . . . . . . . . . . . .
Code Blocks and Context . . . . . .
Code Block Numbering . . . . .
A Word on Versioning . . . . . . . .
Getting Help . . . . . . . . . . . . .
Emailing Us . . . . . . . . . . . . .
Technical Support Response Time
Chapter Overview . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

2
2
3
3
3
4
4
5
5
6

Writing Your First Angular Web Application
Simple Reddit Clone . . . . . . . . . . . . .
Getting started . . . . . . . . . . . . . . . .
Node.js and npm . . . . . . . . . . . . . .
TypeScript . . . . . . . . . . . . . . . . .
Browser . . . . . . . . . . . . . . . . . .
Special instruction for Windows users . . .
Angular CLI . . . . . . . . . . . . . . . .
Example Project . . . . . . . . . . . . .
Writing Application Code . . . . . . . .
Running the application . . . . . . . . . . .
Making a Component . . . . . . . . . . .
Importing Dependencies . . . . . . . . .
Component Decorators . . . . . . . . . .
Adding a template with templateUrl . .
Adding a template . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

1
1
4
4
4
4
5
5
6
10
10
12
13
14
14
15

CONTENTS

Adding CSS Styles with styleUrls . . . . . . .
Loading Our Component . . . . . . . . . . . . .
Adding Data to the Component . . . . . . . . . . .
Working With Arrays . . . . . . . . . . . . . . . .
Using the User Item Component . . . . . . . . . .
Rendering the UserItemComponent . . . . . . .
Accepting Inputs . . . . . . . . . . . . . . . . .
Passing an Input value . . . . . . . . . . . . . .
Bootstrapping Crash Course . . . . . . . . . . . .
declarations . . . . . . . . . . . . . . . . . . .
imports . . . . . . . . . . . . . . . . . . . . . .
providers . . . . . . . . . . . . . . . . . . . . .
bootstrap . . . . . . . . . . . . . . . . . . . . .
Expanding our Application . . . . . . . . . . . . .
Adding CSS . . . . . . . . . . . . . . . . . . . .
The Application Component . . . . . . . . . . .
Adding Interaction . . . . . . . . . . . . . . . .
Adding the Article Component . . . . . . . . .
Rendering Multiple Rows . . . . . . . . . . . . . .
Creating an Article class . . . . . . . . . . . . .
Storing Multiple Articles . . . . . . . . . . . .
Configuring the ArticleComponent with inputs
Rendering a List of Articles . . . . . . . . . . .
Adding New Articles . . . . . . . . . . . . . . . .
Finishing Touches . . . . . . . . . . . . . . . . . .
Displaying the Article Domain . . . . . . . . .
Re-sorting Based on Score . . . . . . . . . . . .
Deployment . . . . . . . . . . . . . . . . . . . . .
Building Our App for Production . . . . . . . .
Uploading to a Server . . . . . . . . . . . . . .
Installing now . . . . . . . . . . . . . . . . . . .
Full Code Listing . . . . . . . . . . . . . . . . . . .
Wrapping Up . . . . . . . . . . . . . . . . . . . . .
Getting Help . . . . . . . . . . . . . . . . . . . . .
TypeScript . . . . . . . . . . . . . .
Angular 4 is built in TypeScript .
What do we get with TypeScript?
Types . . . . . . . . . . . . . . .
Trying it out with a REPL . .
Built-in types . . . . . . . . . . .
Classes . . . . . . . . . . . . . .
Properties . . . . . . . . . . .

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

15
16
17
20
23
24
25
25
27
29
29
29
29
30
31
32
34
38
47
47
52
53
55
57
58
58
59
60
61
62
62
62
63
63

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

64
64
65
66
67
68
70
70

CONTENTS

Methods . . . . . . .
Constructors . . . .
Inheritance . . . . .
Utilities . . . . . . . . .
Fat Arrow Functions
Template Strings . .
Wrapping up . . . . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

71
73
74
76
76
78
79

How Angular Works . . . . . . . . . . . . . . . . . . . . . . . . . .
Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Navigation Component . . . . . . . . . . . . . . . . . . .
The Breadcrumbs Component . . . . . . . . . . . . . . . . . .
The Product List Component . . . . . . . . . . . . . . . . . .
How to Use This Chapter . . . . . . . . . . . . . . . . . . . . . .
Product Model . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Component Decorator . . . . . . . . . . . . . . . . . . . . . . . .
Component selector . . . . . . . . . . . . . . . . . . . . . .
Component template . . . . . . . . . . . . . . . . . . . . . .
Adding A Product . . . . . . . . . . . . . . . . . . . . . . . .
Viewing the Product with Template Binding . . . . . . . . . .
Adding More Products . . . . . . . . . . . . . . . . . . . . . .
Selecting a Product . . . . . . . . . . . . . . . . . . . . . . . .
Listing products using  . . . . . . . . . . . .
The ProductsListComponent . . . . . . . . . . . . . . . . . . . .
Configuring the ProductsListComponent @Component Options
Component inputs . . . . . . . . . . . . . . . . . . . . . . . .
Component outputs . . . . . . . . . . . . . . . . . . . . . . .
Emitting Custom Events . . . . . . . . . . . . . . . . . . . . .
Writing the ProductsListComponent Controller Class . . . . .
Writing the ProductsListComponent View Template . . . . . .
The Full ProductsListComponent Component . . . . . . . . .
The ProductRowComponent Component . . . . . . . . . . . . . . .
ProductRowComponent Configuration . . . . . . . . . . . . . .
ProductRowComponent template . . . . . . . . . . . . . . . . .
The ProductImageComponent Component . . . . . . . . . . . . .
The PriceDisplayComponent Component . . . . . . . . . . . . .
The ProductDepartmentComponent . . . . . . . . . . . . . . . . .
NgModule and Booting the App . . . . . . . . . . . . . . . . . . .
Booting the app . . . . . . . . . . . . . . . . . . . . . . . . . .
The Completed Project . . . . . . . . . . . . . . . . . . . . . . .
Deploying the App . . . . . . . . . . . . . . . . . . . . . . . . . .
A Word on Data Architecture . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

80
80
81
81
82
84
85
86
88
88
88
89
91
92
93
94
97
98
98
100
101
103
104
106
108
109
110
111
111
112
113
115
116
116
117

CONTENTS

Built-in Directives . . .
Introduction . . . .
NgIf . . . . . . . .
NgSwitch . . . . . .
NgStyle . . . . . . .
NgClass . . . . . . .
NgFor . . . . . . . .
Getting an index
NgNonBindable . . .
Conclusion . . . . .

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

119
119
119
120
122
125
128
133
134
135

Forms in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Forms are Crucial, Forms are Complex . . . . . . . . . . . . . . .
FormControls and FormGroups . . . . . . . . . . . . . . . . . . .
FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . .
FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Our First Form . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Loading the FormsModule . . . . . . . . . . . . . . . . . . . .
Simple SKU Form: @Component Decorator . . . . . . . . . .
Simple SKU Form: template . . . . . . . . . . . . . . . . . . .
Simple SKU Form: Component Definition Class . . . . . . . .
Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Using FormBuilder . . . . . . . . . . . . . . . . . . . . . . . . .
Reactive Forms with FormBuilder . . . . . . . . . . . . . . . . .
Using FormBuilder . . . . . . . . . . . . . . . . . . . . . . . .
Using myForm in the view . . . . . . . . . . . . . . . . . . . . .
Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Adding Validations . . . . . . . . . . . . . . . . . . . . . . . . .
Explicitly setting the sku FormControl as an instance variable
Custom Validations . . . . . . . . . . . . . . . . . . . . . . . .
Watching For Changes . . . . . . . . . . . . . . . . . . . . . . . .
ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

136
136
136
136
137
138
139
140
140
144
144
146
147
147
148
149
151
152
158
160
161
163

Dependency Injection . . . . . . . . . . . .
Injections Example: PriceService . . .
Dependency Injection Parts . . . . . . .
Playing with an Injector . . . . . . . . .
Providing Dependencies with NgModule
Providers are the Key . . . . . . . . .
Providers . . . . . . . . . . . . . . . . .
Using a Class . . . . . . . . . . . . .
Using a Factory . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

164
165
169
170
174
176
176
176
181

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

CONTENTS

Dependency Injection in Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
More Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . .
Using @angular/http . . . . . . . . . . . . . . . . . . . . . .
import from @angular/http . . . . . . . . . . . . . . . . .
A Basic Request . . . . . . . . . . . . . . . . . . . . . . . . .
Building the SimpleHttpComponent Component Definition
Building the SimpleHttpComponent template . . . . . . . .
Building the SimpleHttpComponent Controller . . . . . . .
Full SimpleHttpComponent . . . . . . . . . . . . . . . . . .
Writing a YouTubeSearchComponent . . . . . . . . . . . . . .
Writing a SearchResult . . . . . . . . . . . . . . . . . . .
Writing the YouTubeSearchService . . . . . . . . . . . . .
Writing the SearchBoxComponent . . . . . . . . . . . . . .
Writing SearchResultComponent . . . . . . . . . . . . . .
Writing YouTubeSearchComponent . . . . . . . . . . . . . .
@angular/http API . . . . . . . . . . . . . . . . . . . . . . .
Making a POST request . . . . . . . . . . . . . . . . . . . .
PUT / PATCH / DELETE / HEAD . . . . . . . . . . . . . . . . .
RequestOptions . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

186
186
187
187
188
189
189
190
192
192
194
195
200
207
208
212
212
213
214
215

Routing . . . . . . . . . . . . . . . . . . . . . . .
Why Do We Need Routing? . . . . . . . . . .
How client-side routing works . . . . . . . .
The beginning: using anchor tags . . . . .
The evolution: HTML5 client-side routing
Writing our first routes . . . . . . . . . . . .
Components of Angular routing . . . . . . .
Imports . . . . . . . . . . . . . . . . . . .
Routes . . . . . . . . . . . . . . . . . . . .
Installing our Routes . . . . . . . . . . . .
RouterOutlet using  . .
RouterLink using [routerLink] . . . . . .
Putting it all together . . . . . . . . . . . . .
Creating the Components . . . . . . . . .
HomeComponent . . . . . . . . . . . . . . .
AboutComponent . . . . . . . . . . . . . .
ContactComponent . . . . . . . . . . . . .
Application Component . . . . . . . . . .
Configuring the Routes . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

216
216
217
218
218
219
219
219
220
221
222
224
224
226
226
227
227
228
229

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

CONTENTS

Routing Strategies . . . . . . . . . . . . . .
Running the application . . . . . . . . . . .
Route Parameters . . . . . . . . . . . . . .
ActivatedRoute . . . . . . . . . . . . .
Music Search App . . . . . . . . . . . . . .
First Steps . . . . . . . . . . . . . . . . .
The SpotifyService . . . . . . . . . . .
The SearchComponent . . . . . . . . . .
Trying the search . . . . . . . . . . . . .
TrackComponent . . . . . . . . . . . . .
Wrapping up music search . . . . . . . .
Router Hooks . . . . . . . . . . . . . . . . .
AuthService . . . . . . . . . . . . . . .
LoginComponent . . . . . . . . . . . . .
ProtectedComponent and Route Guards .
Nested Routes . . . . . . . . . . . . . . . .
Configuring Routes . . . . . . . . . . . .
ProductsModule . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

231
232
234
235
236
238
239
240
249
251
253
253
254
255
257
264
265
266
270

Data Architecture in Angular 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
An Overview of Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Data Architecture in Angular 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Data Architecture with Observables - Part 1: Services
Observables and RxJS . . . . . . . . . . . . . . . . .
Note: Some RxJS Knowledge Required . . . . . .
Learning Reactive Programming and RxJS . . . .
Chat App Overview . . . . . . . . . . . . . . . . . .
Components . . . . . . . . . . . . . . . . . . . .
Models . . . . . . . . . . . . . . . . . . . . . . .
Services . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . .
Implementing the Models . . . . . . . . . . . . . . .
User . . . . . . . . . . . . . . . . . . . . . . . . .
Thread . . . . . . . . . . . . . . . . . . . . . . . .
Message . . . . . . . . . . . . . . . . . . . . . . .
Implementing UsersService . . . . . . . . . . . . .
currentUser stream . . . . . . . . . . . . . . . .
Setting a new user . . . . . . . . . . . . . . . . .
UsersService.ts . . . . . . . . . . . . . . . . . .
The MessagesService . . . . . . . . . . . . . . . . .
the newMessages stream . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

273
273
273
273
275
276
277
278
278
279
279
279
280
281
282
283
284
285
285

CONTENTS

the messages stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Operation Stream Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sharing the Stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Adding Messages to the messages Stream . . . . . . . . . . . . . . . . . . . . . . .
Our completed MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . .
Trying out MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The ThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A map of the current set of Threads (in threads) . . . . . . . . . . . . . . . . . . .
A chronological list of Threads, newest-first (in orderedthreads) . . . . . . . . . .
The currently selected Thread (in currentThread) . . . . . . . . . . . . . . . . . .
The list of Messages for the currently selected Thread (in currentThreadMessages)
Our Completed ThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Data Model Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

287
287
289
290
293
296
298
298
303
303
305
308
310

Data Architecture with Observables - Part 2: View Components
Building Our Views: The AppComponent Top-Level Component .
The ChatThreadsComponent . . . . . . . . . . . . . . . . . . . .
ChatThreadsComponent template . . . . . . . . . . . . . . .
The Single ChatThreadComponent . . . . . . . . . . . . . . . . .
ChatThreadComponent Controller and ngOnInit . . . . . . .
ChatThreadComponent template . . . . . . . . . . . . . . . .
The ChatWindowComponent . . . . . . . . . . . . . . . . . . . .
The ChatMessageComponent . . . . . . . . . . . . . . . . . . . .
The ChatMessageComponent template . . . . . . . . . . . . .
The ChatNavBarComponent . . . . . . . . . . . . . . . . . . . .
The ChatNavBarComponent @Component . . . . . . . . . . . .
The ChatNavBarComponent template . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

311
311
314
315
315
317
317
318
328
330
331
331
333
334

Introduction to Redux with TypeScript . . . .
Redux . . . . . . . . . . . . . . . . . . . . .
Redux: Key Ideas . . . . . . . . . . . . .
Core Redux Ideas . . . . . . . . . . . . . .
What’s a reducer? . . . . . . . . . . . .
Defining Action and Reducer Interfaces
Creating Our First Reducer . . . . . . .
Running Our First Reducer . . . . . . . .
Adjusting the Counter With actions . . .
Reducer switch . . . . . . . . . . . . . .
Action “Arguments” . . . . . . . . . . .
Storing Our State . . . . . . . . . . . . . .
Using the Store . . . . . . . . . . . . . .
Being Notified with subscribe . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

336
337
337
338
338
339
340
340
341
342
344
345
346
346

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

CONTENTS

The Core of Redux . . . . . .
A Messaging App . . . . . . . .
Messaging App state . . . .
Messaging App actions . . .
Messaging App reducer . . .
Trying Out Our Actions . . .
Action Creators . . . . . . . .
Using Real Redux . . . . . . .
Using Redux in Angular . . . . .
Planning Our App . . . . . . . .
Setting Up Redux . . . . . . . .
Defining the Application State
Defining the Reducers . . . .
Defining Action Creators . .
Creating the Store . . . . . .
Providing the Store . . . . . . .
Bootstrapping the App . . . . . .
The AppComponent . . . . . . . .
imports . . . . . . . . . . . .
The template . . . . . . . . .
The constructor . . . . . . .
Putting It All Together . . . .
What’s Next . . . . . . . . . . .
References . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

350
351
351
352
353
356
357
359
361
362
362
362
362
363
364
366
367
368
368
369
370
372
373
373

Intermediate Redux in Angular . . . . . . . .
Context For This Chapter . . . . . . . . . .
Chat App Overview . . . . . . . . . . . . .
Components . . . . . . . . . . . . . . .
Models . . . . . . . . . . . . . . . . . .
Reducers . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . .
Implementing the Models . . . . . . . . . .
User . . . . . . . . . . . . . . . . . . . .
Thread . . . . . . . . . . . . . . . . . . .
Message . . . . . . . . . . . . . . . . . .
App State . . . . . . . . . . . . . . . . . . .
A Word on Code Layout . . . . . . . . .
The Root Reducer . . . . . . . . . . . . .
The UsersState . . . . . . . . . . . . . .
The ThreadsState . . . . . . . . . . . .
Visualizing Our AppState . . . . . . . .
Building the Reducers (and Action Creators)

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

374
374
375
375
376
377
377
378
378
378
379
380
380
381
381
382
383
384

CONTENTS

Set Current User Action Creators . . . . .
UsersReducer - Set Current User . . . . .
Thread and Messages Overview . . . . . .
Adding a New Thread Action Creators . .
Adding a New Thread Reducer . . . . . .
Adding New Messages Action Creators . .
Adding A New Message Reducer . . . . .
Selecting A Thread Action Creators . . . .
Selecting A Thread Reducer . . . . . . . .
Reducers Summary . . . . . . . . . . . . .
Building the Angular Chat App . . . . . . . .
The top-level AppComponent . . . . . . . .
The ChatPage . . . . . . . . . . . . . . . .
Container vs. Presentational Components .
Building the ChatNavBarComponent . . . . . .
Redux Selectors . . . . . . . . . . . . . . .
Threads Selectors . . . . . . . . . . . . . .
Unread Messages Count Selector . . . . .
Building the ChatThreadsComponent . . . . .
ChatThreadsComponent Controller . . . . .
ChatThreadsComponent template . . . . .
The Single ChatThreadComponent . . . . . . .
ChatThreadComponent template . . . . . .
Building the ChatWindowComponent . . . . . .
The ChatMessageComponent . . . . . . . . . .
Setting incoming . . . . . . . . . . . . . .
The ChatMessageComponent template . . .
Summary . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

384
385
386
386
387
388
389
391
392
393
393
395
397
398
399
401
402
403
404
405
407
408
409
410
417
418
419
420

Advanced Components . . . . . . . . . . . . . . . . . . . . . . .
Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
View (Style) Encapsulation . . . . . . . . . . . . . . . . . .
Shadow DOM Encapsulation . . . . . . . . . . . . . . . .
No Encapsulation . . . . . . . . . . . . . . . . . . . . . . .
Creating a Popup - Referencing and Modifying Host Elements
Popup Structure . . . . . . . . . . . . . . . . . . . . . . . .
Using ElementRef . . . . . . . . . . . . . . . . . . . . . .
Binding to the host . . . . . . . . . . . . . . . . . . . . . .
Adding a Button using exportAs . . . . . . . . . . . . . .
Creating a Message Pane with Content Projection . . . . . . .
Changing the Host’s CSS . . . . . . . . . . . . . . . . . . .
Using ng-content . . . . . . . . . . . . . . . . . . . . . .
Querying Neighbor Directives - Writing Tabs . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

422
422
425
429
431
434
434
436
438
441
443
444
444
446

CONTENTS

ContentTabComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
ContentTabsetComponent Component . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Using the ContentTabsetComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450

Lifecycle Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
OnInit and OnDestroy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
OnChanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
DoCheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
AfterContentInit, AfterViewInit, AfterContentChecked and AfterViewChecked
Advanced Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rewriting ngIf - ngBookIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rewriting ngFor - NgBookFor . . . . . . . . . . . . . . . . . . . . . . . . . . .
Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Customizing Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . .
Zones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Observables and OnPush . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Testing . . . . . . . . . . . . . . . .
Test driven? . . . . . . . . . . .
End-to-end vs. Unit Testing . . .
Testing Tools . . . . . . . . . . .
Jasmine . . . . . . . . . . . .
Karma . . . . . . . . . . . . .
Writing Unit Tests . . . . . . . .
Angular Unit testing framework
Setting Up Testing . . . . . . . .
Testing Services and HTTP . . .
HTTP Considerations . . . .
Stubs . . . . . . . . . . . . .
Mocks . . . . . . . . . . . . .
Http MockBackend . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
TestBed.configureTestingModule and Providers
Testing getTrack . . . . . . . . . . . . . . . . . .
Testing Routing to Components . . . . . . . . . . . .
Creating a Router for Testing . . . . . . . . . . .
Mocking dependencies . . . . . . . . . . . . . . .
Spies . . . . . . . . . . . . . . . . . . . . . . . . .
Back to Testing Code . . . . . . . . . . . . . . . . .
fakeAsync and advance . . . . . . . . . . . . . .
inject . . . . . . . . . . . . . . . . . . . . . . . .
Testing ArtistComponent’s Initialization . . . . .
Testing ArtistComponent Methods . . . . . . . .
Testing ArtistComponent DOM Template Values .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

452
453
457
463
476
483
484
486
492
496
503
504
508

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

509
509
509
510
510
511
511
511
512
514
515
515
516
517
517
518
525
525
528
529
531
534
535
535
536
538

CONTENTS

Testing Forms . . . . . . . . . . .
Creating a ConsoleSpy . . . . .
Installing the ConsoleSpy . . .
Configuring the Testing Module
Testing The Form . . . . . . . .
Refactoring Our Form Test . . .
Testing HTTP requests . . . . . .
Testing a POST . . . . . . . . . .
Testing DELETE . . . . . . . . .
Testing HTTP Headers . . . . .
Testing YouTubeSearchService
Conclusion . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

540
543
544
545
545
547
551
551
553
554
555
562

Converting an AngularJS 1.x App to Angular 4 . . . .
Peripheral Concepts . . . . . . . . . . . . . . . . . .
What We’re Building . . . . . . . . . . . . . . . . .
Mapping AngularJS 1 to Angular 4 . . . . . . . . . .
Requirements for Interoperability . . . . . . . . . . .
The AngularJS 1 App . . . . . . . . . . . . . . . . .
The ng1-app HTML . . . . . . . . . . . . . . . .
Code Overview . . . . . . . . . . . . . . . . . . .
ng1: PinsService . . . . . . . . . . . . . . . . . .
ng1: Configuring Routes . . . . . . . . . . . . . .
ng1: HomeController . . . . . . . . . . . . . . . .
ng1: / HomeController template . . . . . . . . . .
ng1: pin Directive . . . . . . . . . . . . . . . . .
ng1: pin Directive template . . . . . . . . . . . .
ng1: AddController . . . . . . . . . . . . . . . .
ng1: AddController template . . . . . . . . . . .
ng1: Summary . . . . . . . . . . . . . . . . . . .
Building A Hybrid . . . . . . . . . . . . . . . . . . .
Hybrid Project Structure . . . . . . . . . . . . . .
Bootstrapping our Hybrid App . . . . . . . . . . .
What We’ll Upgrade . . . . . . . . . . . . . . . .
A Minor Detour: Typing Files . . . . . . . . . . .
Writing ng2 PinControlsComponent . . . . . . . .
Using ng2 PinControlsComponent . . . . . . . . .
Downgrading ng2 PinControlsComponent to ng1
Adding Pins with ng2 . . . . . . . . . . . . . . .
Upgrading ng1 PinsService and $state to ng2 .
Writing ng2 AddPinComponent . . . . . . . . . . .
Using AddPinComponent . . . . . . . . . . . . . .
Exposing an ng2 service to ng1 . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

563
563
564
565
567
567
569
570
570
572
573
573
574
574
576
578
581
581
582
584
586
589
592
594
595
597
598
599
605
605

CONTENTS

Writing the AnalyticsService . . . . . .
Downgrade ng2 AnalyticsService to ng1
Using AnalyticsService in ng1 . . . . . .
Summary . . . . . . . . . . . . . . . . . . . .
References . . . . . . . . . . . . . . . . . . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

606
606
607
608
609

NativeScript: Mobile Applications for the Angular Developer . . . . . . . .
What is NativeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Where NativeScript Differs from Other Popular Frameworks . . . . . .
What are the System and Development Requirements for NativeScript?
Creating your First Mobile Application with NativeScript and Angular . .
Adding Build Platforms for Cross Platform Deployment . . . . . . . . .
Building and Testing for Android and iOS . . . . . . . . . . . . . . . .
Installing JavaScript, Android, and iOS Plugins and Packages . . . . . .
Understanding the Web to NativeScript UI and UX Differences . . . . . .
Planning the NativeScript Page Layout . . . . . . . . . . . . . . . . . .
Adding UI Components to the Page . . . . . . . . . . . . . . . . . . . .
Styling Components with CSS . . . . . . . . . . . . . . . . . . . . . . .
Developing a Geolocation Based Photo Application . . . . . . . . . . . . .
Creating a Fresh NativeScript Project . . . . . . . . . . . . . . . . . . .
Creating a Multiple Page Master-Detail Interface . . . . . . . . . . . . .
Creating a Flickr Service for Obtaining Photos and Data . . . . . . . . .
Creating a Service for Calculating Device Location and Distance . . . .
Including Mapbox Functionality in the NativeScript Application . . . .
Implementing the First Page of the Geolocation Application . . . . . . .
Implementing the Second Page of the Geolocation Application . . . . .
Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
NativeScript for Angular Developers . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

610
610
611
612
614
614
614
615
616
616
618
619
620
621
622
626
631
635
636
642
643
644

Changelog . . . . . . . . . . . .
Revision 62 - 2017-06-23 .
Revision 61 - 2017-05-24 .
Revision 60 - 2017-04-27 .
Revision 59 - 2017-04-07 .
Revision 58 - 2017-03-24 .
Revision 57 - 2017-03-23 .
Revision 56 - 2017-03-22 .
Revision 55 - 2017-03-17 .
Revision 54 - 2017-03-10 .
Revision 53 - 2017-03-01 .
Revision 52 - 2017-02-22 .
Revision 51 - 2017-02-14 .
Revision 50 - 2017-02-10 .

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

645
645
645
645
646
646
646
646
647
647
647
647
648
648

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

CONTENTS

Revision 49 - 2017-01-18 .
Revision 48 - 2017-01-13 .
Revision 47 - 2017-01-06 .
Revision 46 - 2017-01-03 .
Revision 45 - 2016-12-05 .
Revision 44 - 2016-11-17 .
Revision 43 - 2016-11-08 .
Revision 42 - 2016-10-14 .
Revision 41 - 2016-09-28 .
Revision 40 - 2016-09-20 .
Revision 39 - 2016-09-03 .
Revision 38 - 2016-08-29 .
Revision 37 - 2016-08-02 .
Revision 36 - 2016-07-20 .
Revision 35 - 2016-06-30 .
Revision 34 - 2016-06-15 .
Revision 33 - 2016-05-11 .
Revision 32 - 2016-05-06 .
Revision 31 - 2016-04-28 .
Revision 30 - 2016-04-20 .
Revision 29 - 2016-04-08 .
Revision 28 - 2016-04-01 .
Revision 27 - 2016-03-25 .
Revision 26 - 2016-03-24 .
Revision 25 - 2016-03-21 .
Revision 24 - 2016-03-10 .
Revision 23 - 2016-03-04 .
Revision 22 - 2016-02-24 .
Revision 21 - 2016-02-20 .
Revision 20 - 2016-02-11 .
Revision 19 - 2016-02-04 .
Revision 18 - 2016-01-29 .
Revision 17 - 2016-01-28 .
Revision 16 - 2016-01-14 .
Revision 15 - 2016-01-07 .
Revision 14 - 2015-12-23 .
Revision 13 - 2015-12-17 .
Revision 12 - 2015-11-16 .
Revision 11 - 2015-11-09 .
Revision 10 - 2015-10-30 .
Revision 9 - 2015-10-15 .
Revision 8 - 2015-10-08 .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

648
648
648
648
648
648
649
649
649
650
650
650
650
650
650
650
651
651
651
652
652
652
652
652
652
652
652
653
653
653
654
654
654
654
654
654
655
655
656
656
656
657

CONTENTS

Revision 7 - 2015-09-23
Revision 6 - 2015-08-28
Revision 5 - 2015-08-01
Revision 4 - 2015-07-30
Revision 3 - 2015-07-21
Revision 2 - 2015-07-15
Revision 1 - 2015-07-01

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

657
657
657
657
658
658
658

CONTENTS

1

Book Revision
Revision 62 - Covers up to Angular 4 (4.2.0, 2017-06-23)

Bug Reports
If you’d like to report any bugs, typos, or suggestions just email us at: us@fullstack.io¹.

Chat With The Community!
We’re experimenting with a community chat room for this book using Gitter. If you’d like to hang
out with other people learning Angular, come join us on Gitter²!

Vote for New Content (new!)
We’re constantly updating the book, writing new blog posts, and producing new material. You can
now cast your vote for new content here³.

Be notified of updates via Twitter
If you’d like to be notified of updates to the book on Twitter, follow @fullstackio⁴

We’d love to hear from you!
Did you like the book? Did you find it helpful? We’d love to add your face to our list of testimonials
on the website! Email us at: us@fullstack.io⁵.

¹mailto:us@fullstack.io?Subject=ng-book%202%20feedback
²https://gitter.im/ng-book/ng-book
³https://fullstackio.canny.io/ng-book
⁴https://twitter.com/fullstackio
⁵mailto:us@fullstack.io?Subject=ng-book%202%20testimonial

How to Read This Book
This book aims to be the single most useful resource on learning Angular. By the time you’re done
reading this book, you (and your team) will have everything you need to build reliable, powerful
Angular apps.
Angular is a rich and feature-filled framework, but that also means it can be tricky to understand all
of its parts. In this book, we’ll walk through everything from installing the tools, writing components,
using forms, routing between pages, and calling APIs.
But before we dig in, there are a few guidelines I want to give you in order to get the most out of
this book. Briefly, I want to tell you:
• how to approach the code examples and
• how to get help if something goes wrong

Running Code Examples
This book comes with a library of runnable code examples. The code is available to download from
the same place where you downloaded this book.
We use the program npm⁶ to run every example in this book. This means you can type the following
commands to run any example:
1
2

npm install
npm start

If you’re unfamiliar with npm, we cover how to get it installed in the Getting Started section
in the first chapter.

After running npm start, you will see some output on your screen that will tell you what URL to
open to view your app.
If you’re ever unclear on how to run a particular sample app, check out the README.md in that
project’s directory. Every sample project contains a README.md that will give you the instructions
you need to run each app.
⁶https://www.npmjs.com/

How to Read This Book

3

Angular CLI
With a couple of minor exceptions, every project in this book was built on Angular CLI⁷. Unless
specified otherwise, you can use the ng commands in each project.
For instance, to run an example you can run ng serve (this is, generally, what is run when you type
npm start). For most projects you can compile them to JavaScript with ng build (we’ll talk about
this more in the first chapter). And you can run end-to-end tests with ng e2e, etc.
Without getting too far into the details, Angular CLI is based on Webpack, a tool which helps process
and bundle our various TypeScript, JavaScript, CSS, HTML, and image files. Angular CLI is not a
requirement for using Angular. It’s simply a wrapper around Webpack (and some other tooling)
that makes it easy to get started.

Code Blocks and Context
Nearly every code block in this book is pulled from a runnable code example, which you can find
in the sample code. For example, here is a code block pulled from the first chapter:
code/first-app/angular-hello-world/src/app/app.component.ts

8
9
10

export class AppComponent {
title = 'app works!';
}

Notice that the header of this code block states the path to the file which contains this code:
code/first-app/angular-hello-world/src/app/app.component.ts.
If you ever feel like you’re missing the context for a code example, open up the full code file using
your favorite text editor. This book is written with the expectation that you’ll also be looking
at the example code alongside the manuscript.
For example, we often need to import libraries to get our code to run. In the early chapters of the
book we show these import statements, because it’s not clear where the libraries are coming from
otherwise. However, the later chapters of the book are more advanced and they focus on key concepts
instead of repeating boilerplate code that was covered earlier in the book. If at any point you’re
not clear on the context, open up the code example on disk.

Code Block Numbering
In this book, we sometimes build up a larger example in steps. If you see a file being loaded that has
a numeric suffix, that generally means we’re building up to something bigger.
⁷https://github.com/angular/angular-cli

How to Read This Book

4

For instance, in the Dependency Injection chapter you may see a code block with the filename:
price.service.1.ts. When you see the .N.ts syntax that means we’re building up to the ultimate
file, which will not have a number. So, in this case, the final version would be: price.service.ts.
We do it this way so that a) we can unit test the intermediate code and b) you can see the whole file
in context at a particular stage.

A Word on Versioning
As you may know, the Angular covered in this book is a descendant of an earlier framework called
“AngularJS”. This can sometimes be confusing, particularly when reading supplementary blogs or
documentation.
The official branding guidelines state that “AngularJS” is a term reserved for AngularJS 1.x, that is,
the early versions of “Angular”.
Because the new version of Angular used TypeScript (instead of JavaScript) as the primary language,
the ‘JS’ was dropped, leaving us with just Angular. For a long time the only consistent way to
distinguish the two was folks referred to the new Angular as Angular 2.
However, the Angular team in 2017 switched to semantic versioning with a new major-release
upgrade slated for every 6 months. Instead of calling the next versions Angular 4, Angular 5, and so
on, the number is also dropped and it’s just Angular.
In this book, when we’re referring to Angular we’ll just say Angular or sometimes Angular 4, just
to avoid confusion. When we’re talking about “the old-style JavaScript Angular” we’ll use the term
AngularJS or AngularJS 1.x.

Getting Help
While we’ve made every effort to be clear, precise, and accurate you may find that when you’re
writing your code you run into a problem.
Generally, there are three types of problems:
• A “bug” in the book (e.g. how we describe something is wrong)
• A “bug” in our code
• A “bug” in your code
If you find an inaccuracy in how we describe something, or you feel a concept isn’t clear, email us!
We want to make sure that the book is both accurate and clear.
Similarly, if you’ve found a bug in our code we definitely want to hear about it.
If you’re having trouble getting your own app working (and it isn’t our example code), this case is
a bit harder for us to handle.

How to Read This Book

5

Your first line of defense, when getting help with your custom app, should be our unofficial
community chat room⁸. We (the authors) are there from time-to-time, but there are hundreds of
other readers there who may be able to help you faster than we can.
If you’re still stuck, we’d still love to hear from you, and here are some tips for getting a clear, timely
response.

Emailing Us
If you’re emailing us asking for technical help, here’s what we’d like to know:
•
•
•
•
•
•
•

What revision of the book are you referring to?
What operating system are you on? (e.g. Mac OS X 10.8, Windows 95)
Which chapter and which example project are you on?
What were you trying to accomplish?
What have you tried⁹ already?
What output did you expect?
What actually happened? (Including relevant log output.)

The absolute best way to get technical support is to send us a short, self-contained example of the
problem. Our preferred way to receive this would be for you to send us a Plunkr link by using this
URL¹⁰.
That URL contains a runnable, boilerplate Angular app. If you can copy and paste your code into
that project, reproduce your error, and send it to us you’ll greatly increase the likelihood of a
prompt, helpful response.
When you’ve written down these things, email us at us@fullstack.io¹¹. We look forward to hearing
from you.

Technical Support Response Time
We perform our free, technical support once per week.
If you need a faster response time, and help getting any of your team’s questions answered, then
you may consider our premium support option¹².
⁸https://gitter.im/ng-book/ng-book
⁹http://mattgemmell.com/what-have-you-tried/
¹⁰https://angular.io/resources/live-examples/quickstart/ts/eplnkr.html
¹¹mailto:us@fullstack.io
¹²mailto:us@fullstack.io?Subject=Angular%20Premium%20Support&Body=Hello%21%20I%27m%20interested%20in%20premium%20Angular%

20support%20for%20our%20team

How to Read This Book

6

Chapter Overview
Before we dive in, I want to give you a feel for the rest of the book and what you can expect inside.
The first few chapters provide the foundation you need to get up and running with Angular. You’ll
create your first apps, use the built-in components, and start creating your components.
Next we’ll move into intermediate concepts such as using forms, using APIs, routing to different
pages, and using Dependency Injection to organize our code.
After that, we’ll move into more advanced concepts. We spend a good part of the book talking
about data architectures. Managing state in client/server applications is hard and we dive deep into
two popular approaches: using RxJS Observables and using Redux. In these chapters, we’ll show
how to build the same app, two different ways, so you can compare and contrast and evaluate what’s
best for you and your team.
After that, we’ll discuss how to write complex, advanced components using Angular’s most
powerful features. Then we talk about how to write tests for our app and how we can upgrade
our Angular 1 apps to Angular 4+. Finally, we close with a chapter on writing native mobile apps
with Angular using NativeScript.
By using this book, you’re going to learn how to build real Angular apps faster than spending
hours parsing out-dated blog posts.
So hold on tight - you’re about to become an Angular expert, and have a lot of fun along the way.
Let’s dig in!
• Nate (@eigenjoy¹³)

¹³https://twitter.com/eigenjoy

Writing Your First Angular Web
Application
Simple Reddit Clone
In this chapter we’re going to build an application that allows the user to post an article (with a
title and a URL) and then vote on the posts.
You can think of this app as the beginnings of a site like Reddit¹⁴ or Product Hunt¹⁵.
In this simple app we’re going to cover most of the essentials of Angular including:
•
•
•
•
•

Building custom components
Accepting user input from forms
Rendering lists of objects into views
Intercepting user clicks and acting on them
Deploying our app to a server

By the time you’re finished with this chapter you’ll know how to take an empty folder, build a basic
Angular application, and deploy it to production. After working through this chapter you’ll have a
good grasp on how Angular applications are built and a solid foundation to build your own Angular
app.
Here’s a screenshot of what our app will look like when it’s done:
¹⁴http://reddit.com
¹⁵http://producthunt.com

2

Writing Your First Angular Web Application

Completed application

First, a user will submit a new link and after submitting the users will be able to upvote or downvote
each article. Each link will have a score and we can vote on which links we find useful.

3

Writing Your First Angular Web Application

App with new article

In this project, and throughout the book, we’re going to use TypeScript. TypeScript is a superset of
JavaScript ES6 that adds types. We’re not going to talk about TypeScript in depth in this chapter, but
we’ll go over TypeScript more in depth in the next chapter.
Don’t worry if you’re having trouble with some of the new syntax. If you’re familiar with ES5
(“normal” JavaScript) / ES6 (ES2015) you should be able to follow along and we’ll talk more about
TypeScript in a bit.

Writing Your First Angular Web Application

4

Getting started
Node.js and npm
To get started with Angular, you’ll need to have Node.js installed. There are a couple of different
ways you can install Node.js, so please refer to the Node.js website¹⁶ for detailed information.
Make sure you install Node 6.9.0 or higher.
If you’re on a Mac, your best bet is to install Node.js directly from the Node.js website
instead of through another package manager (like Homebrew). Installing Node.js via
Homebrew is known to cause some issues.

The Node Package Manager (npm for short) is installed as a part of Node.js. To check if npm is available
as a part of our development environment, we can open a terminal window and type:
$ npm -v

If a version number is not printed out and you receive an error, make sure to download a Node.js
installer that includes npm.
Your npm version should be 3.0.0 or higher.

TypeScript
Once you have Node.js setup, the next step is to install TypeScript. Make sure you install at least
version 2.1 or greater. To install it, run the following npm command:
1

$ npm install -g typescript

Do I have to use TypeScript? No, you don’t have to use TypeScript to use Angular, but you
probably should. Angular does have an ES5 API, but Angular is written in TypeScript and
generally that’s what everyone is using. We’re going to use TypeScript in this book because
it’s great and it makes working with Angular easier. That said, it isn’t strictly required.

Browser
We highly recommend using the Google Chrome Web Browser¹⁷ to develop Angular apps. We’ll
use the Chrome developer toolkit throughout this book. To follow along with our development and
debugging we recommend downloading it now.
¹⁶https://nodejs.org/download/
¹⁷https://www.google.com/chrome/

Writing Your First Angular Web Application

5

Special instruction for Windows users
Throughout this book, we will be using Unix/Mac commands in the terminal. Most of these
commands, like ls and cd, are cross-platform. However, sometimes these commands are Unix/Macspecific or contain Unix/Mac-specific flags (like ls -1p).
As a result, be alert that you may have to occasionally determine the equivalent of a Unix/Mac
command for your shell. Fortunately, the amount of work we do in the terminal is minimal and you
will not encounter this issue often.
Windows users should be aware that our terminal examples use Unix/Mac commands.

Angular CLI
Angular provides a utility to allow users to create and manage projects from the command line. It
automates tasks like creating projects, adding new controllers, etc. It’s generally a good idea to use
Angular CLI as it will help create and maintain common patterns across our application.
To install Angular CLI, just run the following command:
1

$ npm install -g @angular/cli@1.0.0

Once it’s installed you’ll be able to run it from the command line using the ng command. When you
do, you’ll see a lot of output, but if you scroll back, you should be able to see the following:
1

$ ng --version

If everything installed correctly, you should see the current version output to your terminal.
Congratulations!
If you’re running OSX or Linux, you might receive this line in the output:
1

Could not start watchman; falling back to NodeWatcher for file system events.

This means that we don’t have a tool called watchman installed. This tool helps Angular
CLI when it needs to monitor files in your filesystem for changes. If you’re running OSX,
it’s recommended to install it using Homebrew with the following command:
1

$ brew install watchman

Writing Your First Angular Web Application

6

If you’re on OSX and got an error when running brew, it means that you probably don’t
have Homebrew installed. Please refer to the page http://brew.sh/ to learn how to install it
and try again.
If you’re on Linux, you may refer to the page https://ember-cli.com/user-guide/#watchman
for more information about how to install watchman.
If you’re on Windows instead, you don’t need to install anything and Angular CLI will use
the native Node.js watcher.

If you’re curious about all of the things that Angular CLI can do, try out this command:
1

$ ng --help

Don’t worry about understanding all of the options - we’ll be covering the important ones in this
chapter.
Now that we have Angular CLI and its dependencies installed, let’s use this tool to create our first
application.

Example Project
Open up the terminal and run the ng new command to create a new project from scratch:
1

$ ng new --ng4 angular-hello-world

If you’re using a version of Angular CLI that is newer than @angular/cli@1.0.0-rc.4,
you may omit the --ng4 option as Angular 4 will be the default.

Once you run it, you’ll see the following output:
1
2
3
4
5
6
7
8
9
10
11

installing ng2
create .editorconfig
create README.md
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/assets/.gitkeep
create src/environments/environment.prod.ts
create src/environments/environment.ts

Writing Your First Angular Web Application

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

7

create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.css
create src/test.ts
create src/tsconfig.json
create .angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.json
create .gitignore
create karma.conf.js
create package.json
create protractor.conf.js
create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.

Note: the exact files that your project generates may vary slightly depending on the version
of @angular/cli that was installed.

This will run for a while while it’s installing npm dependencies. Once it finishes we’ll see a success
message:
1

Project 'angular-hello-world' successfully created.

There are a lot of files generated! Don’t worry about understanding all of them yet. Throughout the
book we’ll walk through what each one means and what it’s used for.
Let’s go inside the angular-hello-world directory, which the ng command created for us and see
what has been created:

Writing Your First Angular Web Application

1
2
3
4
5
6
7
8
9
10
11
12

$ cd angular-hello-world
$ tree -F -L 1
.
├── README.md
├── .angular-cli.json
├── e2e/
├── karma.conf.js
├── node_modules/
├── package.json
├── protractor.conf.js
├── src/
└── tslint.json

//
//
//
//
//
//
//
//
//

8

an useful README
angular-cli configuration file
end to end tests
unit test configuration
installed dependencies
npm configuration
e2e test configuration
application source
linter config file

The tree command is completely optional. But if you’re on OSX it can be installed via
brew install tree

For now, the folder we’re interested in is src, where we’ll put our custom application code. Let’s
take a look at what was created there:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$ cd src
$ tree -F
.
|-- app/
|
|-- app.component.css
|
|-- app.component.html
|
|-- app.component.spec.ts
|
|-- app.component.ts
|
`-- app.module.ts
|-- assets/
|-- environments/
|
|-- environment.prod.ts
|
`-- environment.ts
|-- favicon.ico
|-- index.html
|-- main.ts
|-- polyfills.ts
|-- styles.css
|-- test.ts
`-- tsconfig.json

Using your favorite text editor, let’s open index.html. You should see this code:

Writing Your First Angular Web Application

9

code/first-app/angular-hello-world/src/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14











Loading...



Let’s break it down a bit:
code/first-app/angular-hello-world/src/index.html

1
2
3
4
5
6
7
8
9
10











If you’re familiar with writing HTML files, this first part is straightforward, we’re declaring the core
structure of the HTML document and a few bits of metadata such as page charset, title and base
href.
If we continue to the template body, we see the following:

Writing Your First Angular Web Application

10

code/first-app/angular-hello-world/src/index.html

11
12
13
14


Loading...



The app-root tag is where our application will be rendered. The text Loading... is a placeholder
that will be displayed before our app code loads. For instance, we could put a loading “spinner” img
tag here and the user would see this as our JavaScript and Angular app is loading.
But what is the app-root tag and where does it come from? app-root is a component that is defined
by our Angular application. In Angular we can define our own HTML tags and give them custom
functionality. The app-root tag will be the “entry point” for our application on the page.
Let’s try running this app as-is and then we’ll dig in to see how this component is defined.

Writing Application Code

Running the application
Before making any changes, let’s load our app from the generated application into the browser.
Angular CLI has a built in HTTP server that we can use to run our app.
To use it, head back to the terminal, and change directories into the root of our application.
1
2
3
4
5
6
7

$ cd angular-hello-world
$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
// ...
// a bunch of other messages
// ...
Compiled successfully.

Our application is now running on localhost port 4200. Let’s open the browser and visit:
http://localhost:4200¹⁸
¹⁸http://localhost:4200

11

Writing Your First Angular Web Application

Note that if you get the message:
1

Port 4200 is already in use. Use '--port' to specify a different port

This means that you already have another service running on port 4200. If this is the case
you can either 1. shut down the other service or 2. use the --port flag when running ng
serve like this:
1

ng serve --port 9001

The above command would change the URL you open in your browser to something like:
http://localhost:9001

Another thing to notice is that, on some machines, the domain localhost may not work.
You may see a set of numbers such as 127.0.0.1. When you run ng serve it should show
you what URL the server is running on, so be sure to read the messages on your machine
to find your exact development URL.

Running application

Now that we have the application setup, and we know how to run it, it’s time to start writing some
code.

Writing Your First Angular Web Application

12

Making a Component
One of the big ideas behind Angular is the idea of components.
In our Angular apps, we write HTML markup that becomes our interactive application, but the
browser only understands a limited set of markup tags; Built-ins like  or 
 or