Nate Murray, Ari Lerner, Felipe Coury, Carlos Taborda - Ng-Book: The Complete Guide to Angular [2016, PDF, ENG]

Примеры страниц

Оглавление

Contents
Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chat With The Community! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Vote for New Content (new!) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Be notified of updates Via Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
How to Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Running Code Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Code Blocks and Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Code Block Numbering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
A Word on Versioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Emailing Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Technical Support Response Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Chapter Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Writing Your First Angular Web Application . . . . . . . . . . . . . . . . . . . . . . . . . 1
Simple Reddit Clone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Node.js and npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Special instruction for Windows users . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Example Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Writing Application Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Running the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Making a Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Importing Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Component Decorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Adding a template with temp1ateUr1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Addingatemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Adding CSS Styles With sty1eUr1s . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Loading Our Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Adding Data to the Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Working With Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Using the User Item Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Rendering the UserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Accepting Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Passing an Input Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Bootstrapping Crash Course . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Expanding our Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Adding CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
The Application Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Adding Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Adding the Article Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Rendering Multiple Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Creating an Article class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Storing Multiple Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Configuring the Artic1eComponent With inputs . . . . . . . . . . . . . . . . . . . . . 53
Rendering a List of Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Adding New Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Finishing Touches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Displaying the Article Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Re-sorting Based on Score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Building Our App for Production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Uploading to a Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Installing now . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Full Code Listing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Angular is built in TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
What do We get with TypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Trying it out With a REPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Built-in types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 0
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 4
Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Fat Arrow Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Template Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
How Angular Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
The Navigation Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
The Breadcrumbs Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
The Product List Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
How to Use This Chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Product Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Component Decorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Component selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Component template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Adding A Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Viewing the Product with Template Binding . . . . . . . . . . . . . . . . . . . . . . . 91
Adding More Products . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Selecting a Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Listing products using . . . . . . . . . . . . . . . . . . . . . . . . . 94
The ProductsListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Configuring the ProductsListComponent @Component Options . . . . . . . . . . . . . 98
Component inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Component outputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Emitting Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Writing the ProductsListComponent Controller Class . . . . . . . . . . . . . . . . . . 103
Writing the ProductsListComponent View Template . . . . . . . . . . . . . . . . . . . 104
The Full ProductsListComponent Component . . . . . . . . . . . . . . . . . . . . . . 106
The ProductRowComponent Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
ProductRowComponent Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
ProductRowComponent template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
The ProductImageComponent Component . . . . . . . . . . . . . . . . . . . . . . . . . . 111
The PriceDisp1ayComponent Component . . . . . . . . . . . . . . . . . . . . . . . . . . 111
The ProductDepartmentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
NgModu1e and Booting the App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Booting the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
The Completed Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Deploying the App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
A Word on Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Built-in Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Nglf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
NgSwitCh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
NgSty1e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
NgC1ass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
NgFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Getting an index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
NgNonBindab1e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Forms in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Forms are Crucial, Forms are Complex . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
FormContro1s2uHiFormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 136
FormContro1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Our First Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
LoadhugtheFormsModu1e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 139
Simple SKU Form: @Component Decorator . . . . . . . . . . . . . . . . . . . . . . . 140
Simple SKU Form: template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Simple SKU Form: Component Definition Class . . . . . . . . . . . . . . . . . . . . . 144
Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Using FormBui1der . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Reactive Forms with FormBui1der . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Using FormBui1der . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Using myForm in the View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Adding Validations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Explicitly setting the sku Formcontrol as an instance variable . . . . . . . . . . . . . 152
Custom Validations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Watching For Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Dependency Injection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Injections Example: Priceservice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Dependency Injection Parts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Playing with an Injector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Providing Dependencies With NgModu1e . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Providers are the Key . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 6
Using a Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 6
Using a Factory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Dependency Injection in Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
More Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
PTTTT) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
lJsuug@angu1ar/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
importfronl@angu1ar/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
A Basic Request . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Building the Simp1eHttpComponent Component Definition . . . . . . . . . . . . . . . 189
Building the Simp1eHttpComponent template . . . . . . . . . . . . . . . . . . . . . . . 189
Building the Simp1eHttpComponent Controller . . . . . . . . . . . . . . . . . . . . . . 190
IufllSimp1eHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Writing a YouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Writing a SearchResu1t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Writing the YouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Writing the SearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Writing SearchResu1tComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Writing YouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
@angu1ar/common/httpiAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 212
Making a POST request . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
PUT / PATCH / DELETE / HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Custom HTTP Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Why Do We Need Routing? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
How client-side routing Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
The beginning: using anchor tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
The evolution: HTML5 client-side routing . . . . . . . . . . . . . . . . . . . . . . . . 217
Writing our first routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Components of Angular routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Installing our Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
RouterOut1etJusHu; . . . . . . . . . . . . . . . . . . . . . . . . . . 221
RouterLink usHug[routerLink] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Putting it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Creating the Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
HomeComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
AboutComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
ContactComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Application Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Configuring the Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Routing Strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Running the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Route Parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
ActivatedRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Music Search App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
First Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
TTK3SpotifyService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
TTK3SearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Trying the search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
TrackComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Wrapping up music search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Router Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Authservice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
LoginComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
ProtectedComponent and Route Guards . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Nested Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Configuring Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
ProductsModu1e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Data Architecture in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
An Overview of Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Data Architecture in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Data Architecture with Observables - Part 1: Services . . . . . . . . . . . . . . . . . . . . 272
Observables and RXJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Note: Some RXJS Knowledge Required . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Learning Reactive Programming and RXJS . . . . . . . . . . . . . . . . . . . . . . . . 272
Chat App Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 6
Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 7
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 7
Implementing the Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Implementing Usersservice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
currentUser:fiIean1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Setting a new user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
UsersService.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
TTK3MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
the newMessages stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
the messages stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
The Operation Stream Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Sharing the Stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Adding Messages to the messages Stream . . . . . . . . . . . . . . . . . . . . . . . . . 289
Our completed MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Trying out MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
The ThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
A map of the current set of Threads (in threads) . . . . . . . . . . . . . . . . . . . . . 297
A chronological list of Threads, newest-first (in orderedthreads) . . . . . . . . . . . . 302
The currently selected Thread (in currentThread) . . . . . . . . . . . . . . . . . . . . 302
The list of Messages for the currently selected Thread (in currentThreadMessages) . . 304
Our Completed ThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Data Model Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Data Architecture with Observables - Part 2: View Components . . . . . . . . . . . . . . 310
Building Our Views: The Appcompoheht Top-Level Component . . . . . . . . . . . . . . . 310
The ChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
ChatThreadsComponent template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
The Single ChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
ChatThreadComponent Controller and ngOnlnit . . . . . . . . . . . . . . . . . . . . . 316
ChatThreadComponent template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
The ChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
The ChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
The ChatMessageComponent template . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
The ChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
The ChatNavBarComponent @Component . . . . . . . . . . . . . . . . . . . . . . . . . . 330
The ChatNavBarComponent template . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Introduction to Redux with TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Redux: Key Ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Core Redux Ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
What’s a reducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Defining Action and Reducer Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . 338
Creating Our First Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Running Our First Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Adjusting the Counter With actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Reducer switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Action “Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Storing Our State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Using the Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Being Notified With subscribe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
The Core of Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
A Messaging App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Messaging App state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Messaging App actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Messaging App reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Trying Out Our Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Action Creators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Using Real Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Using Redux in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Planning Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Setting Up Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Defining the Application State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Defining the Reducers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Defining Action Creators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Creating the Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Providing the Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Bootstrapping the App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
TTK3AppComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
The template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Tlkeconstructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
What’s Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Intermediate Redux in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Context For This Chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Chat App Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 5
Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Reducers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 7
Implementing the Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
App State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
A Word on Code Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
The Root Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
TTK3UsersState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
TTK3ThreadsState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Visualizing Our AppState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Building the Reducers (and Action Creators) . . . . . . . . . . . . . . . . . . . . . . . . . 384
CONTENTS
Set Current User Action Creators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
UsersReducer - Set Current User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Thread and Messages Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Adding a New Thread Action Creators . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Adding a New Thread Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Adding New Messages Action Creators . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Adding A New Message Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Selecting A Thread Action Creators . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Selecting A Thread Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Reducers Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Building the Angular Chat App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
The top-level AppComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
The ChatPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Container vs. Presentational Components . . . . . . . . . . . . . . . . . . . . . . . . . 398
Building the ChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Redux Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Threads Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Unread Messages Count Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Building the ChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
ChatThreadsComponent Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
ChatThreadsComponent template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
The Single ChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
ChatThreadComponent template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Building the ChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
The ChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Setting incoming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
The ChatMessageComponent template . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Advanced Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
View (Style) Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Shadow DOM Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
No Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
Creating a Popup - Referencing and Modifying Host Elements . . . . . . . . . . . . . . . 434
Popup Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434
Using E1ementRef . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Binding to the host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Adding a Button using exportAs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Creating a Message Pane with Content Projection . . . . . . . . . . . . . . . . . . . . . . 443
Changing the Host’s CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
Using ng—content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
Querying Neighbor Directives - Writing Tabs . . . . . . . . . . . . . . . . . . . . . . . . 446
CONTENTS
ContentTabComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
ContentTabsetComponent Component . . . . . . . . . . . . . . . . . . . . . . . . . . 448
[hungtimeContentTabsetComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Lifecycle Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
OnInit2uMiOnDestroy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
OnChanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
DoCheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
AfterContentlnit, AfterViewlnit, AfterContentChecked and AfterViewChecked . . . . 476
Advanced Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Rewriting nglf -ngBookIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Rewriting ngFor -NgBookFo1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486
Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492
Customizing Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Zones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Observables and OnPush . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
Test driven? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
End-to-end vs. Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
Testing Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Jasmine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Karma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511
Writing Unit Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511
Angular Unit testing framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511
Setting Up Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512
Testing Services and HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
HTTP Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
Stubs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
Adocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516
lHfim>MockBackend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
TestBed.configureTestingModu1e2uuiFTovkhfls . . . . . . . . . . . . . . . . . . .. 517
Testing getTrack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518
Testing Routing to Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
CreatingaRouter for Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
Mocking dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Spies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529
Back to Testing Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531
fakeAsync2uHiadvance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
inject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535
Testing A1tistComponent’s Initialization . . . . . . . . . . . . . . . . . . . . . . . . . 535
Testing ArtistComponent Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
Testing ArtistComponent DOM Template Values . . . . . . . . . . . . . . . . . . . . . 538
Testing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540
Creating aConso1eSpy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Installing the Conso1eSpy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544
Configuring the Testing Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
Testing The Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
Refactoring Our Form Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547
Testing HTTP requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Testing aPOST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Testing DELETE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Testing HTTP Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
TesfirggYouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564
Converting an AngularJS 1.x App to Angular . . . . . . . . . . . . . . . . . . . . . . . . . 565
Peripheral Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
What We’re Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
Mapping Angular]S 1 to Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567
Requirements for Interoperability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
The Angular]S 1 App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
The ng1-app HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Code Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572
ng1:PinsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572
ng1: Configuring Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574
ng1:HomeContro11er . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
ng1: / HomeContro11er template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
ng1: pin Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
ng1: pin Directive template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
ng1:AddContro11er . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578
ng1:AddContro11er template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580
ng1: Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Building A Hybrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Hybrid Project Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584
Bootstrapping our Hybrid App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586
What We’ll Upgrade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588
A Minor Detour: Typing Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
Writing ng2 PinContro1sComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Using ng2 PinContro1sComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596
Downgrading ng2 PinContro1sComponent to ng1 . . . . . . . . . . . . . . . . . . . . 597
Adding Pins With ng2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599
Upgrading ng1 Pinsservice and $state to ng2 . . . . . . . . . . . . . . . . . . . . . 600
Writing ng2 AddPinComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601
lJsuugAddPinComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607
Exposing an ng2 service to ng1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607
Writing the Analyticsservice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Downgrade ng2 Ana1yticsService to ng1 . . . . . . . . . . . . . . . . . . . . . . . . 608
Using Analyticsservice in ng1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
NativeScript: Mobile Applications for the Angular Developer . . . . . . . . . . . . . . . . 612
What is N ativeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612
Where N ativeScript Differs from Other Popular Frameworks . . . . . . . . . . . . . . 613
What are the System and Development Requirements for N ativeScript? . . . . . . . . 614
Creating your First Mobile Application with N ativeScript and Angular . . . . . . . . . . 616
Adding Build Platforms for Cross Platform Deployment . . . . . . . . . . . . . . . . . 616
Building and Testing for Android and iOS . . . . . . . . . . . . . . . . . . . . . . . . 616
Installing ]avaScript, Android, and iOS Plugins and Packages . . . . . . . . . . . . . . 617
Understanding the Web to N ativeScript UI and UX Differences . . . . . . . . . . . . . . 618
Planning the N ativeScript Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . 618
Adding UI Components to the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620
Styling Components with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621
Developing a Geolocation Based Photo Application . . . . . . . . . . . . . . . . . . . . . 622
Creating a Fresh N ativeScript Project . . . . . . . . . . . . . . . . . . . . . . . . . . . 623
Creating a Multiple Page Master-Detail Interface . . . . . . . . . . . . . . . . . . . . . 624
Creating a Flickr Service for Obtaining Photos and Data . . . . . . . . . . . . . . . . . 628
Creating a Service for Calculating Device Location and Distance . . . . . . . . . . . . 633
Including Mapbox Functionality in the N ativeScript Application . . . . . . . . . . . . 637
Implementing the First Page of the Geolocation Application . . . . . . . . . . . . . . . 638
Implementing the Second Page of the Geolocation Application . . . . . . . . . . . . . 644
Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645
N ativeScript for Angular Developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646
Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Revision 67 - 2018-01 -17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Revision 66 - 2017-11 -14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Revision 65 - 2017-11 -01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Revision 64 - 2017-09-15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Revision 63 - 2017-08-02 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Revision 62 - 2017-06-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Revision 61 - 2017-05-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648
Revision 60 - 2017-04-27 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648
Revision 59 - 2017-04-07 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648
Revision 58 - 2017-03-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648
Revision 57 - 2017-03-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
Revision 56 - 2017-03-22 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
Revision 55 - 2017-03-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
Revision 54 - 2®17-G3-4_® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
Revision 53 - 2®17-®3-G1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Revision 52 - 2®17-Q2-22 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Revision 51 - 2®17-G2-14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Revision 50 - 2®4_7-G2-4_® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Revision 49 - 2®17-G1 -18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Revision 48 - 2®17-G1 -13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Revision 47 - 2®17-G1 -®6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Revision 46 - 2®17-G1 -®3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Revision 45 - 2®4_6-12-G5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651
Revision 44-2®16-11-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651
Revision 43 - 2®16-11 -®8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651
Revision 42 - 2®16-16-14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651
Revision 41 - 2®16-G9-28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652
Revision 40 - 2®4_6-G9-2® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652
Revision 39 - 2®4_6-G9-G3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652
Revision 38 - 2®4_6-G8-29 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652
Revision 37 - 2®4_6-G8-G2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652
Revision 36 - 2®4_6-G7-2® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652
Revision 35 - 2®4_6-G6-3® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653
Revision 34 - 2®4_6-G6-15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653
Revision 33 - 2®16-®5-11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653
Revision 32 - 2®4_6-G5-G6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653
Revision 31 - 2®4_6-G4-28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Revision 30 - 2®4_6-G4-2® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Revision 29 - 2®4_6-G4-G8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Revision 28 - 2®16-®4-G1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Revision 27 - 2®4_6-G3-25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Revision 26 - 2®4_6-G3-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Revision 25 - 2®16-®3-21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Revision 24 - 2®16-G3-4_® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Revision 23 - 2®4_6-G3-G4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Revision 22 - 2®16-G2-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Revision 21 - 2®16-G2-2® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Revision 20 - 2®16-®2-11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656
Revision 19 - 2®4_6-G2-G4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656
Revision 18 - 2®16-G1 -29 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656
Revision 17 - 2®16-G1 -28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656
Revision 16 - 2®16-G1 -14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656
Revision 15 - 2®16-G1 -®7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657
Revision 14 - 2®15-12-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657
Revision 13 - 2®15-12-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657
Revision 12 - 2®15—14_—4_6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658
Revision 11 - 2®15—4_4_—®9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658
Revision 10 - 2®4_5—4_®—3® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Revision 9 - 2®4_5—4_®—4_5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Revision 8 - 2®4_5—4_®—®8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Revision 7 - 2®4_5—®9—23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Revision 6 - 2®4_5—®8—28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660
Revision 5 - 2®15—®8—®4_ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660
Revision 4 - 2®4_5—®7—3® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660
Revision 3 - 2®15—®7—24_ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660
Revision 2 - 2®15—®7—4_5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660
Revision 1 - 2®15—®7—®4_ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660