Ng-Book The Complete Guide to Angular 11 (Felipe Coury, Ari Lerner, Nate Murray 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 Newline Pro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Become A Technical Contributor - Free Updates for Life . . . . . . . . . . . 3 Special Thanks to Our Technical Contributors . . . . . . . . . . . . . . . . . 3 How to Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Running Code Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Code Blocks and Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Code Block Numbering . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 A Word on Versioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Emailing Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Chapter Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 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

📄 Page 5

CONTENTS Example Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 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

📄 Page 6

CONTENTS Uploading to a Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 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

📄 Page 7

CONTENTS Selecting a Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 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

📄 Page 8

CONTENTS FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 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 . . . . . . . . . . . . . 164 Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 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

📄 Page 9

CONTENTS import from @angular/common/http . . . . . . . . . . . . . . . . . . . . 209 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

📄 Page 10

CONTENTS Configuring the Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 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

📄 Page 11

CONTENTS Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 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

📄 Page 12

CONTENTS Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 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

📄 Page 13

CONTENTS The constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 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

📄 Page 14

CONTENTS Container vs. Presentational Components . . . . . . . . . . . . . . . . . 448 Building the ChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . 449 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 . . . . . . . . . . . . . . . . . . . . 471 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Advanced Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474 Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 View (Style) Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . 477 Shadow DOM Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . 482 No Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Creating a Popup - Referencing and Modifying Host Elements . . . . . . . 486 Popup Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487 Using ElementRef . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489 Binding to the host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Adding a Button using exportAs . . . . . . . . . . . . . . . . . . . . . . . 494 Creating a Message Pane with Content Projection . . . . . . . . . . . . . . . 496 Changing the Host’s CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 498 Using ng-content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498 Querying Neighbor Directives - Writing Tabs . . . . . . . . . . . . . . . . . 500 ContentTabComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501 ContentTabsetComponent Component . . . . . . . . . . . . . . . . . . . 502 Using the ContentTabsetComponent . . . . . . . . . . . . . . . . . . . . . 505 Lifecycle Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506 OnInit and OnDestroy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507 OnChanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512

📄 Page 15

CONTENTS DoCheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518 AfterContentInit, AfterViewInit, AfterContentChecked and After- ViewChecked . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532 Advanced Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Rewriting ngIf - ngBookIf . . . . . . . . . . . . . . . . . . . . . . . . . . 540 Rewriting ngFor - NgBookFor . . . . . . . . . . . . . . . . . . . . . . . . . 543 Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549 Customizing Change Detection . . . . . . . . . . . . . . . . . . . . . . . 554 Zones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562 Observables and OnPush . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568 Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Test driven? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 End-to-end vs. Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570 Testing Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570 Jasmine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570 Karma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571 Writing Unit Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 Angular Unit testing framework . . . . . . . . . . . . . . . . . . . . . . . . . . 572 Setting Up Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 Testing Services and HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574 HTTP Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 Stubs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 Mocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577 HttpClient HttpTestingController . . . . . . . . . . . . . . . . . . . . 578 TestBed.configureTestingModule and Providers . . . . . . . . . . . . 579 Testing getTrack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 Testing Routing to Components . . . . . . . . . . . . . . . . . . . . . . . . . . 586 Creating a Router for Testing . . . . . . . . . . . . . . . . . . . . . . . . . 587 Mocking dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590 Spies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591 Back to Testing Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 fakeAsync and advance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597 inject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598 Testing ArtistComponent’s Initialization . . . . . . . . . . . . . . . . . . 599

📄 Page 16

CONTENTS Testing ArtistComponent Methods . . . . . . . . . . . . . . . . . . . . . 600 Testing ArtistComponent DOM Template Values . . . . . . . . . . . . . 601 Testing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 Creating a ConsoleSpy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 Installing the ConsoleSpy . . . . . . . . . . . . . . . . . . . . . . . . . . . 608 Configuring the Testing Module . . . . . . . . . . . . . . . . . . . . . . . 609 Testing The Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610 Refactoring Our Form Test . . . . . . . . . . . . . . . . . . . . . . . . . . 612 Testing HTTP requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616 Testing a POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616 Testing DELETE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619 Testing HTTP Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620 Testing YouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . 622 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629 Converting an AngularJS 1.x App to Angular . . . . . . . . . . . . . . . . . . . 630 Peripheral Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 What We’re Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631 Mapping AngularJS 1 to Angular . . . . . . . . . . . . . . . . . . . . . . . . . 633 Requirements for Interoperability . . . . . . . . . . . . . . . . . . . . . . . . . 635 The AngularJS 1 App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636 The ng1-app HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637 Code Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639 ng1: PinsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639 ng1: Configuring Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641 ng1: HomeController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642 ng1: / HomeController template . . . . . . . . . . . . . . . . . . . . . . . 642 ng1: pin Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643 ng1: pin Directive template . . . . . . . . . . . . . . . . . . . . . . . . . . 644 ng1: AddController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 ng1: AddController template . . . . . . . . . . . . . . . . . . . . . . . . . 648 ng1: Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650 Building A Hybrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650 Hybrid Project Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651 Bootstrapping our Hybrid App . . . . . . . . . . . . . . . . . . . . . . . . 654 What We’ll Upgrade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656

📄 Page 17

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

📄 Page 18

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

📄 Page 19

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

📄 Page 20

CONTENTS Revision 8 - 2015-10-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739 Revision 7 - 2015-09-23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739 Revision 6 - 2015-08-28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739 Revision 5 - 2015-08-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739 Revision 4 - 2015-07-30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739 Revision 3 - 2015-07-21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740 Revision 2 - 2015-07-15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740 Revision 1 - 2015-07-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740