Ng-Book The Complete Guide to Angular 9 ( etc.) (Z-Library)

📄 File Format: PDF

💾 File Size: 19.9 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

ng-book The Complete Guide to Angular Written by Nate Murray, Felipe Coury, Ari Lerner, and Carlos Taborda © 2020 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

📄 Page 3

We’d like to thank our contributors to this book including: • Frode Fikke for technical edits • Nic Raboy, and Burke Holland for their contribution to the NativeScript chapter • Travas Nolte for his work on many chapters • Daniel Rauf for his edits on RxJS, Redux, and Routing

📄 Page 4

Contents Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Join our Discord Chat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Vote for New Content (new!) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Be notified of updates via Twitter . . . . . . . . . . . . . . . . . . . . . . . . . 1 Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Become A Technical Contributor - Free Updates for Life . . . . . . . . . . . 2 Special Thanks to Our Technical Contributors . . . . . . . . . . . . . . . . . 2 How to Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Running Code Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Code Blocks and Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Code Block Numbering . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 A Word on Versioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Emailing Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Chapter Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Writing Your First Angular Web Application . . . . . . . . . . . . . . . . . . . 1 Simple Reddit Clone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Node.js and npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Special instruction for Windows users . . . . . . . . . . . . . . . . . . . . . . 5 Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Example Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

📄 Page 5

CONTENTS Running the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Making a Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Importing Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Component Decorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Adding a template with templateUrl . . . . . . . . . . . . . . . . . . . . 17 Adding a template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Adding CSS Styles with styleUrls . . . . . . . . . . . . . . . . . . . . . 18 Loading Our Component . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Adding Data to the Component . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Working With Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Using the User Item Component . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Rendering the UserItemComponent . . . . . . . . . . . . . . . . . . . . . . 29 Accepting Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Passing an Input value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Bootstrapping Crash Course . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Expanding our Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Adding CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 The Application Component . . . . . . . . . . . . . . . . . . . . . . . . . 39 Adding Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Adding the Article Component . . . . . . . . . . . . . . . . . . . . . . . 46 Rendering Multiple Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Creating an Article class . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Storing Multiple Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Configuring the ArticleComponent with inputs . . . . . . . . . . . . . 63 Rendering a List of Articles . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Adding New Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Finishing Touches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Displaying the Article Domain . . . . . . . . . . . . . . . . . . . . . . . . 68 Re-sorting Based on Score . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Building Our App for Production . . . . . . . . . . . . . . . . . . . . . . 71 Uploading to a Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

📄 Page 6

CONTENTS Installing now . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Full Code Listing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Angular is built in TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 What do we get with TypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . 76 Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Trying it out with a REPL . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Built-in types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Fat Arrow Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Template Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 How Angular Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 The Navigation Component . . . . . . . . . . . . . . . . . . . . . . . . . 95 The Breadcrumbs Component . . . . . . . . . . . . . . . . . . . . . . . . 95 The Product List Component . . . . . . . . . . . . . . . . . . . . . . . . . 95 How to Use This Chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Product Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Component Decorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Component selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Component template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Adding A Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Viewing the Product with Template Binding . . . . . . . . . . . . . . . 107 Adding More Products . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Selecting a Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

📄 Page 7

CONTENTS Listing products using <products-list> . . . . . . . . . . . . . . . . . . 109 The ProductsListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Configuring the ProductsListComponent @Component Options . . . . . 113 Component inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Component outputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Emitting Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Writing the ProductsListComponent Controller Class . . . . . . . . . . 120 Writing the ProductsListComponent View Template . . . . . . . . . . . 121 The Full ProductsListComponent Component . . . . . . . . . . . . . . . 123 The ProductRowComponent Component . . . . . . . . . . . . . . . . . . . . . . 125 ProductRowComponent Configuration . . . . . . . . . . . . . . . . . . . . 126 ProductRowComponent template . . . . . . . . . . . . . . . . . . . . . . . 127 The ProductImageComponent Component . . . . . . . . . . . . . . . . . . . . 128 The PriceDisplayComponent Component . . . . . . . . . . . . . . . . . . . . 128 The ProductDepartmentComponent . . . . . . . . . . . . . . . . . . . . . . . . 129 NgModule and Booting the App . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Booting the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 The Completed Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Deploying the App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 A Word on Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Built-in Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 NgIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 NgSwitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 NgStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 NgClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 NgFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Getting an index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 NgNonBindable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Forms in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Forms are Crucial, Forms are Complex . . . . . . . . . . . . . . . . . . . . . . 155 FormControls and FormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

📄 Page 8

CONTENTS FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Our First Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Loading the FormsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Reactive- vs. template-driven Forms . . . . . . . . . . . . . . . . . . . . 160 Simple SKU Form: @Component Decorator . . . . . . . . . . . . . . . . 160 Simple SKU Form: template . . . . . . . . . . . . . . . . . . . . . . . . . 161 Simple SKU Form: Component Definition Class . . . . . . . . . . . . . 165 Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Using FormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Reactive Forms with FormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . 168 Using FormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Using myForm in the view . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Adding Validations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Explicitly setting the sku FormControl as an instance variable . . . . . 174 Custom Validations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Watching For Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Dependency Injection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Injections Example: PriceService . . . . . . . . . . . . . . . . . . . . . . . . 187 Dependency Injection Parts . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Playing with an Injector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Providing Dependencies with NgModule . . . . . . . . . . . . . . . . . . . . . 196 Providers are the Key . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Using a Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Using a Factory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Dependency Injection in Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 More Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Using @angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 import from @angular/common/http . . . . . . . . . . . . . . . . . . . . 209

📄 Page 9

CONTENTS A Basic Request . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Building the SimpleHttpComponent Component Definition . . . . . . . 212 Building the SimpleHttpComponent template . . . . . . . . . . . . . . . 212 Building the SimpleHttpComponent Controller . . . . . . . . . . . . . . 213 Full SimpleHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Writing a YouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . 215 Writing a SearchResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Writing the YouTubeSearchService . . . . . . . . . . . . . . . . . . . . . 218 Writing the SearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . 224 Writing SearchResultComponent . . . . . . . . . . . . . . . . . . . . . . . 232 Writing YouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . 233 @angular/common/http API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Making a POST request . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 PUT / PATCH / DELETE / HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Custom HTTP Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Why Do We Need Routing? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 How client-side routing works . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 The beginning: using anchor tags . . . . . . . . . . . . . . . . . . . . . . 243 The evolution: HTML5 client-side routing . . . . . . . . . . . . . . . . . 244 Writing our first routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Components of Angular routing . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Installing our Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 RouterOutlet using <router-outlet> . . . . . . . . . . . . . . . . . . . 248 RouterLink using [routerLink] . . . . . . . . . . . . . . . . . . . . . . . 250 Putting it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Creating the Components . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 HomeComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 AboutComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 ContactComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Application Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Configuring the Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

📄 Page 10

CONTENTS Routing Strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Running the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Route Parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 ActivatedRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Music Search App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 First Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 The SpotifyService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 The SearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Trying the search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 TrackComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Wrapping up music search . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Router Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 AuthService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 LoginComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 ProtectedComponent and Route Guards . . . . . . . . . . . . . . . . . . 290 Nested Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Configuring Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 ProductsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Data Architecture in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 An Overview of Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . 305 Data Architecture in Angular . . . . . . . . . . . . . . . . . . . . . . . . 306 Data Architecture with Observables - Part 1: Services . . . . . . . . . . . . . 308 Observables and RxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Note: Some RxJS Knowledge Required . . . . . . . . . . . . . . . . . . . 308 Learning Reactive Programming and RxJS . . . . . . . . . . . . . . . . . 309 Chat App Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Implementing the Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

📄 Page 11

CONTENTS Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Implementing UsersService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 currentUser stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Setting a new user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 UsersService.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 The MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 the newMessages stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 the messages stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 The Operation Stream Pattern . . . . . . . . . . . . . . . . . . . . . . . . 324 Sharing the Stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 Adding Messages to the messages Stream . . . . . . . . . . . . . . . . . 327 Our completed MessagesService . . . . . . . . . . . . . . . . . . . . . . 332 Trying out MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . 335 The ThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 A map of the current set of Threads (in threads) . . . . . . . . . . . . . 337 A chronological list of Threads, newest-first (in orderedthreads) . . . 342 The currently selected Thread (in currentThread) . . . . . . . . . . . . 343 The list of Messages for the currently selected Thread (in current- ThreadMessages) . . . . . . . . . . . . . . . . . . . . . . . . . . 345 Our Completed ThreadsService . . . . . . . . . . . . . . . . . . . . . . . 348 Data Model Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 Data Architecture with Observables - Part 2: View Components . . . . . . 351 Building Our Views: The AppComponent Top-Level Component . . . . . . . 351 The ChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 ChatThreadsComponent template . . . . . . . . . . . . . . . . . . . . . . 355 The Single ChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . 356 ChatThreadComponent Controller and ngOnInit . . . . . . . . . . . . . . 357 ChatThreadComponent template . . . . . . . . . . . . . . . . . . . . . . . 358 The ChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 The ChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 The ChatMessageComponent template . . . . . . . . . . . . . . . . . . . . 372 The ChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 The ChatNavBarComponent @Component . . . . . . . . . . . . . . . . . . . 373 The ChatNavBarComponent template . . . . . . . . . . . . . . . . . . . . 375 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376

📄 Page 12

CONTENTS Introduction to Redux with TypeScript . . . . . . . . . . . . . . . . . . . . . . . 378 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 Redux: Key Ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 Core Redux Ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381 What’s a reducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381 Defining Action and Reducer Interfaces . . . . . . . . . . . . . . . . . . 382 Creating Our First Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . 383 Running Our First Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Adjusting the Counter With actions . . . . . . . . . . . . . . . . . . . . 385 Reducer switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 Action “Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Storing Our State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Using the Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 Being Notified with subscribe . . . . . . . . . . . . . . . . . . . . . . . . 391 The Core of Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396 A Messaging App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Messaging App state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Messaging App actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Messaging App reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Trying Out Our Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Action Creators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404 Using Real Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 Using Redux in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 Planning Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 Setting Up Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Defining the Application State . . . . . . . . . . . . . . . . . . . . . . . . 409 Defining the Reducers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Defining Action Creators . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 Creating the Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 Providing the Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 Bootstrapping the App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 The AppComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 The template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 The constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

📄 Page 13

CONTENTS What’s Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Intermediate Redux in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Context For This Chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 Chat App Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Reducers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Implementing the Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426 User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426 Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 App State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 A Word on Code Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 The Root Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 The UsersState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 The ThreadsState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Visualizing Our AppState . . . . . . . . . . . . . . . . . . . . . . . . . . . 431 Building the Reducers (and Action Creators) . . . . . . . . . . . . . . . . . . 433 Set Current User Action Creators . . . . . . . . . . . . . . . . . . . . . . 433 UsersReducer - Set Current User . . . . . . . . . . . . . . . . . . . . . . . 434 Thread and Messages Overview . . . . . . . . . . . . . . . . . . . . . . . 435 Adding a New Thread Action Creators . . . . . . . . . . . . . . . . . . . 436 Adding a New Thread Reducer . . . . . . . . . . . . . . . . . . . . . . . . 436 Adding New Messages Action Creators . . . . . . . . . . . . . . . . . . 438 Adding A New Message Reducer . . . . . . . . . . . . . . . . . . . . . . 439 Selecting A Thread Action Creators . . . . . . . . . . . . . . . . . . . . . 441 Selecting A Thread Reducer . . . . . . . . . . . . . . . . . . . . . . . . . 442 Reducers Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Building the Angular Chat App . . . . . . . . . . . . . . . . . . . . . . . . . . 444 The top-level AppComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 445 The ChatPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447 Container vs. Presentational Components . . . . . . . . . . . . . . . . . 448 Building the ChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . 449

📄 Page 14

CONTENTS Redux Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 Threads Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 Unread Messages Count Selector . . . . . . . . . . . . . . . . . . . . . . 454 Building the ChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . 455 ChatThreadsComponent Controller . . . . . . . . . . . . . . . . . . . . . . 456 ChatThreadsComponent template . . . . . . . . . . . . . . . . . . . . . . . 457 The Single ChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . 458 ChatThreadComponent template . . . . . . . . . . . . . . . . . . . . . . . 460 Building the ChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . 461 The ChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469 Setting incoming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 The ChatMessageComponent template . . . . . . . . . . . . . . . . . . . . 470 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Advanced Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474 View (Style) Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Shadow DOM Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . 481 No Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482 Creating a Popup - Referencing and Modifying Host Elements . . . . . . . 485 Popup Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 Using ElementRef . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488 Binding to the host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490 Adding a Button using exportAs . . . . . . . . . . . . . . . . . . . . . . . 493 Creating a Message Pane with Content Projection . . . . . . . . . . . . . . . 495 Changing the Host’s CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 497 Using ng-content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497 Querying Neighbor Directives - Writing Tabs . . . . . . . . . . . . . . . . . 499 ContentTabComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 ContentTabsetComponent Component . . . . . . . . . . . . . . . . . . . 501 Using the ContentTabsetComponent . . . . . . . . . . . . . . . . . . . . . 504 Lifecycle Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 OnInit and OnDestroy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506 OnChanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511 DoCheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517

📄 Page 15

CONTENTS AfterContentInit, AfterViewInit, AfterContentChecked and After- ViewChecked . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531 Advanced Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538 Rewriting ngIf - ngBookIf . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Rewriting ngFor - NgBookFor . . . . . . . . . . . . . . . . . . . . . . . . . 542 Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 Customizing Change Detection . . . . . . . . . . . . . . . . . . . . . . . 553 Zones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561 Observables and OnPush . . . . . . . . . . . . . . . . . . . . . . . . . . . 562 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568 Test driven? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568 End-to-end vs. Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Testing Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Jasmine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Karma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570 Writing Unit Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571 Angular Unit testing framework . . . . . . . . . . . . . . . . . . . . . . . . . . 571 Setting Up Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 Testing Services and HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 HTTP Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574 Stubs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 Mocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 HttpClient HttpTestingController . . . . . . . . . . . . . . . . . . . . 577 TestBed.configureTestingModule and Providers . . . . . . . . . . . . 578 Testing getTrack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 Testing Routing to Components . . . . . . . . . . . . . . . . . . . . . . . . . . 585 Creating a Router for Testing . . . . . . . . . . . . . . . . . . . . . . . . . 586 Mocking dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589 Spies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590 Back to Testing Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594 fakeAsync and advance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596 inject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597 Testing ArtistComponent’s Initialization . . . . . . . . . . . . . . . . . . 598 Testing ArtistComponent Methods . . . . . . . . . . . . . . . . . . . . . 599

📄 Page 16

CONTENTS Testing ArtistComponent DOM Template Values . . . . . . . . . . . . . 600 Testing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 Creating a ConsoleSpy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606 Installing the ConsoleSpy . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 Configuring the Testing Module . . . . . . . . . . . . . . . . . . . . . . . 608 Testing The Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609 Refactoring Our Form Test . . . . . . . . . . . . . . . . . . . . . . . . . . 611 Testing HTTP requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615 Testing a POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615 Testing DELETE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618 Testing HTTP Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619 Testing YouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . 621 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 628 Converting an AngularJS 1.x App to Angular . . . . . . . . . . . . . . . . . . . 629 Peripheral Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629 What We’re Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 Mapping AngularJS 1 to Angular . . . . . . . . . . . . . . . . . . . . . . . . . 632 Requirements for Interoperability . . . . . . . . . . . . . . . . . . . . . . . . . 634 The AngularJS 1 App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635 The ng1-app HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636 Code Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638 ng1: PinsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638 ng1: Configuring Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 640 ng1: HomeController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641 ng1: / HomeController template . . . . . . . . . . . . . . . . . . . . . . . 641 ng1: pin Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642 ng1: pin Directive template . . . . . . . . . . . . . . . . . . . . . . . . . . 643 ng1: AddController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644 ng1: AddController template . . . . . . . . . . . . . . . . . . . . . . . . . 647 ng1: Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 Building A Hybrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 Hybrid Project Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650 Bootstrapping our Hybrid App . . . . . . . . . . . . . . . . . . . . . . . . 653 What We’ll Upgrade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655 A Minor Detour: Typing Files . . . . . . . . . . . . . . . . . . . . . . . . 658

📄 Page 17

CONTENTS Writing ng2 PinControlsComponent . . . . . . . . . . . . . . . . . . . . . 662 Using ng2 PinControlsComponent . . . . . . . . . . . . . . . . . . . . . . 664 Downgrading ng2 PinControlsComponent to ng1 . . . . . . . . . . . . . 665 Adding Pins with ng2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668 Upgrading ng1 PinsService and $state to ng2 . . . . . . . . . . . . . . 669 Writing ng2 AddPinComponent . . . . . . . . . . . . . . . . . . . . . . . . 670 Using AddPinComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677 Exposing an ng2 service to ng1 . . . . . . . . . . . . . . . . . . . . . . . . 678 Writing the AnalyticsService . . . . . . . . . . . . . . . . . . . . . . . . 678 Downgrade ng2 AnalyticsService to ng1 . . . . . . . . . . . . . . . . . 679 Using AnalyticsService in ng1 . . . . . . . . . . . . . . . . . . . . . . . 680 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681 References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682 NativeScript: Mobile Applications for the Angular Developer . . . . . . . . 683 What is NativeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683 Where NativeScript Differs from Other Popular Frameworks . . . . . 684 What are the System and Development Requirements for NativeScript? 685 Creating your First Mobile Application with NativeScript and Angular . . 688 Adding Build Platforms for Cross Platform Deployment . . . . . . . . 688 Building and Testing for Android and iOS . . . . . . . . . . . . . . . . . 689 Installing JavaScript, Android, and iOS Plugins and Packages . . . . . 690 Understanding the Web to NativeScript UI and UX Differences . . . . . . . 690 Planning the NativeScript Page Layout . . . . . . . . . . . . . . . . . . . 691 Adding UI Components to the Page . . . . . . . . . . . . . . . . . . . . . 692 Styling Components with CSS . . . . . . . . . . . . . . . . . . . . . . . . 694 Developing a Geolocation Based Photo Application . . . . . . . . . . . . . . 696 Creating a Fresh NativeScript Project . . . . . . . . . . . . . . . . . . . . 697 Creating a Multiple Page Master-Detail Interface . . . . . . . . . . . . 697 Creating a Flickr Service for Obtaining Photos and Data . . . . . . . . 701 Creating a Service for Calculating Device Location and Distance . . . 707 Including Mapbox Functionality in the NativeScript Application . . . 710 Implementing the First Page of the Geolocation Application . . . . . . 712 Implementing the Second Page of the Geolocation Application . . . . 718 Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719 NativeScript for Angular Developers . . . . . . . . . . . . . . . . . . . . . . . 720

📄 Page 18

CONTENTS Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 Revision 76 - 2020-02-12 . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 Revision 75 - 2019-12-13 . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 Revision 74 - 2019-05-30 . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 Revision 73 - 2019-01-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 Revision 72 - 2018-12-12 . . . . . . . . . . . . . . . . . . . . . . . . . . . 722 Revision 71 - 2018-10-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . 722 Revision 70 - 2018-09-13 . . . . . . . . . . . . . . . . . . . . . . . . . . . 722 Revision 69 - 2018-09-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . 722 Revision 68 - 2018-05-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . 723 Revision 67 - 2018-01-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . 723 Revision 66 - 2017-11-14 . . . . . . . . . . . . . . . . . . . . . . . . . . . 723 Revision 65 - 2017-11-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . 723 Revision 64 - 2017-09-15 . . . . . . . . . . . . . . . . . . . . . . . . . . . 723 Revision 63 - 2017-08-02 . . . . . . . . . . . . . . . . . . . . . . . . . . . 723 Revision 62 - 2017-06-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . 723 Revision 61 - 2017-05-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . 724 Revision 60 - 2017-04-27 . . . . . . . . . . . . . . . . . . . . . . . . . . . 724 Revision 59 - 2017-04-07 . . . . . . . . . . . . . . . . . . . . . . . . . . . 724 Revision 58 - 2017-03-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 Revision 57 - 2017-03-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 Revision 56 - 2017-03-22 . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 Revision 55 - 2017-03-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 Revision 54 - 2017-03-10 . . . . . . . . . . . . . . . . . . . . . . . . . . . 726 Revision 53 - 2017-03-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . 726 Revision 52 - 2017-02-22 . . . . . . . . . . . . . . . . . . . . . . . . . . . 726 Revision 51 - 2017-02-14 . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Revision 50 - 2017-02-10 . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Revision 49 - 2017-01-18 . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Revision 48 - 2017-01-13 . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Revision 47 - 2017-01-06 . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Revision 46 - 2017-01-03 . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Revision 45 - 2016-12-05 . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Revision 44 - 2016-11-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . 728 Revision 43 - 2016-11-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . 728 Revision 42 - 2016-10-14 . . . . . . . . . . . . . . . . . . . . . . . . . . . 728

📄 Page 19

CONTENTS Revision 41 - 2016-09-28 . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 Revision 40 - 2016-09-20 . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 Revision 39 - 2016-09-03 . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 Revision 38 - 2016-08-29 . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 Revision 37 - 2016-08-02 . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 Revision 36 - 2016-07-20 . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Revision 35 - 2016-06-30 . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Revision 34 - 2016-06-15 . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Revision 33 - 2016-05-11 . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Revision 32 - 2016-05-06 . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Revision 31 - 2016-04-28 . . . . . . . . . . . . . . . . . . . . . . . . . . . 731 Revision 30 - 2016-04-20 . . . . . . . . . . . . . . . . . . . . . . . . . . . 731 Revision 29 - 2016-04-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Revision 28 - 2016-04-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Revision 27 - 2016-03-25 . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Revision 26 - 2016-03-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Revision 25 - 2016-03-21 . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Revision 24 - 2016-03-10 . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Revision 23 - 2016-03-04 . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Revision 22 - 2016-02-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . 733 Revision 21 - 2016-02-20 . . . . . . . . . . . . . . . . . . . . . . . . . . . 733 Revision 20 - 2016-02-11 . . . . . . . . . . . . . . . . . . . . . . . . . . . 734 Revision 19 - 2016-02-04 . . . . . . . . . . . . . . . . . . . . . . . . . . . 734 Revision 18 - 2016-01-29 . . . . . . . . . . . . . . . . . . . . . . . . . . . 734 Revision 17 - 2016-01-28 . . . . . . . . . . . . . . . . . . . . . . . . . . . 734 Revision 16 - 2016-01-14 . . . . . . . . . . . . . . . . . . . . . . . . . . . 734 Revision 15 - 2016-01-07 . . . . . . . . . . . . . . . . . . . . . . . . . . . 735 Revision 14 - 2015-12-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . 735 Revision 13 - 2015-12-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . 735 Revision 12 - 2015-11-16 . . . . . . . . . . . . . . . . . . . . . . . . . . . 736 Revision 11 - 2015-11-09 . . . . . . . . . . . . . . . . . . . . . . . . . . . 736 Revision 10 - 2015-10-30 . . . . . . . . . . . . . . . . . . . . . . . . . . . 737 Revision 9 - 2015-10-15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737 Revision 8 - 2015-10-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738 Revision 7 - 2015-09-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738 Revision 6 - 2015-08-28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738

📄 Page 20

CONTENTS Revision 5 - 2015-08-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738 Revision 4 - 2015-07-30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738 Revision 3 - 2015-07-21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739 Revision 2 - 2015-07-15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739 Revision 1 - 2015-07-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739