Đăng ký Đăng nhập

Tài liệu Ng book2 angular 5 r67

.PDF
683
583
126

Mô tả:

Angular 5
ng-book The Complete Guide to Angular Written by Nate Murray, Felipe Coury, Ari Lerner, and Carlos Taborda © 2018 Fullstack.io All rights reserved. No portion of the book manuscript may be reproduced, stored in a retrieval system, or transmitted in any form or by any means beyond the number of purchased copies, except for a single backup or archival copy. The code may be used freely in your projects, commercial or otherwise. The authors and publisher have taken care in preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damagers in connection with or arising out of the use of the information or programs container herein. Published in San Francisco, California by Fullstack.io. 
 FULLSTACK .io We’d like to thank: • Our technical editors: Frode Fikke, Travas Nolte, Daniel Rauf • Nic Raboy, and Burke Holland for contributing the NativeScript chapter 
 Contents Book Revision . . . . . . . . . . Bug Reports . . . . . . . . . . . Chat With The Community! . . Vote for New Content (new!) . . Be notified of updates via Twitter We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 1 1 1 1 How to Read This Book . . . . . . . . . Running Code Examples . . . . . . Angular CLI . . . . . . . . . . . . Code Blocks and Context . . . . . . Code Block Numbering . . . . . A Word on Versioning . . . . . . . . Getting Help . . . . . . . . . . . . . Emailing Us . . . . . . . . . . . . . Technical Support Response Time Chapter Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 3 3 3 4 4 5 5 6 Writing Your First Angular Web Application Simple Reddit Clone . . . . . . . . . . . . . Getting started . . . . . . . . . . . . . . . . Node.js and npm . . . . . . . . . . . . . . TypeScript . . . . . . . . . . . . . . . . . Browser . . . . . . . . . . . . . . . . . . Special instruction for Windows users . . . Angular CLI . . . . . . . . . . . . . . . . Example Project . . . . . . . . . . . . . Writing Application Code . . . . . . . . Running the application . . . . . . . . . . . Making a Component . . . . . . . . . . . Importing Dependencies . . . . . . . . . Component Decorators . . . . . . . . . . Adding a template with templateUrl . . Adding a template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 4 4 4 5 5 5 6 10 10 12 13 14 14 15 CONTENTS Adding CSS Styles with styleUrls . . . . . . . Loading Our Component . . . . . . . . . . . . . Adding Data to the Component . . . . . . . . . . . Working With Arrays . . . . . . . . . . . . . . . . Using the User Item Component . . . . . . . . . . Rendering the UserItemComponent . . . . . . . Accepting Inputs . . . . . . . . . . . . . . . . . Passing an Input value . . . . . . . . . . . . . . Bootstrapping Crash Course . . . . . . . . . . . . declarations . . . . . . . . . . . . . . . . . . . imports . . . . . . . . . . . . . . . . . . . . . . providers . . . . . . . . . . . . . . . . . . . . . bootstrap . . . . . . . . . . . . . . . . . . . . . Expanding our Application . . . . . . . . . . . . . Adding CSS . . . . . . . . . . . . . . . . . . . . The Application Component . . . . . . . . . . . Adding Interaction . . . . . . . . . . . . . . . . Adding the Article Component . . . . . . . . . Rendering Multiple Rows . . . . . . . . . . . . . . Creating an Article class . . . . . . . . . . . . . Storing Multiple Articles . . . . . . . . . . . . Configuring the ArticleComponent with inputs Rendering a List of Articles . . . . . . . . . . . Adding New Articles . . . . . . . . . . . . . . . . Finishing Touches . . . . . . . . . . . . . . . . . . Displaying the Article Domain . . . . . . . . . Re-sorting Based on Score . . . . . . . . . . . . Deployment . . . . . . . . . . . . . . . . . . . . . Building Our App for Production . . . . . . . . Uploading to a Server . . . . . . . . . . . . . . Installing now . . . . . . . . . . . . . . . . . . . Full Code Listing . . . . . . . . . . . . . . . . . . . Wrapping Up . . . . . . . . . . . . . . . . . . . . . Getting Help . . . . . . . . . . . . . . . . . . . . . TypeScript . . . . . . . . . . . . . . Angular is built in TypeScript . . What do we get with TypeScript? Types . . . . . . . . . . . . . . . Trying it out with a REPL . . Built-in types . . . . . . . . . . . Classes . . . . . . . . . . . . . . Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 16 17 20 23 24 25 25 27 29 29 29 29 30 31 32 34 38 47 47 52 53 55 57 58 58 59 60 61 62 62 62 63 63 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 64 65 66 67 68 70 70 CONTENTS Methods . . . . . . . Constructors . . . . Inheritance . . . . . Utilities . . . . . . . . . Fat Arrow Functions Template Strings . . Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 73 74 76 76 78 79 How Angular Works . . . . . . . . . . . . . . . . . . . . . . . . . . Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Navigation Component . . . . . . . . . . . . . . . . . . . The Breadcrumbs Component . . . . . . . . . . . . . . . . . . The Product List Component . . . . . . . . . . . . . . . . . . How to Use This Chapter . . . . . . . . . . . . . . . . . . . . . . Product Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Component Decorator . . . . . . . . . . . . . . . . . . . . . . . . Component selector . . . . . . . . . . . . . . . . . . . . . . Component template . . . . . . . . . . . . . . . . . . . . . . Adding A Product . . . . . . . . . . . . . . . . . . . . . . . . Viewing the Product with Template Binding . . . . . . . . . . Adding More Products . . . . . . . . . . . . . . . . . . . . . . Selecting a Product . . . . . . . . . . . . . . . . . . . . . . . . Listing products using . . . . . . . . . . . . The ProductsListComponent . . . . . . . . . . . . . . . . . . . . Configuring the ProductsListComponent @Component Options Component inputs . . . . . . . . . . . . . . . . . . . . . . . . Component outputs . . . . . . . . . . . . . . . . . . . . . . . Emitting Custom Events . . . . . . . . . . . . . . . . . . . . . Writing the ProductsListComponent Controller Class . . . . . Writing the ProductsListComponent View Template . . . . . . The Full ProductsListComponent Component . . . . . . . . . The ProductRowComponent Component . . . . . . . . . . . . . . . ProductRowComponent Configuration . . . . . . . . . . . . . . ProductRowComponent template . . . . . . . . . . . . . . . . . The ProductImageComponent Component . . . . . . . . . . . . . The PriceDisplayComponent Component . . . . . . . . . . . . . The ProductDepartmentComponent . . . . . . . . . . . . . . . . . NgModule and Booting the App . . . . . . . . . . . . . . . . . . . Booting the app . . . . . . . . . . . . . . . . . . . . . . . . . . The Completed Project . . . . . . . . . . . . . . . . . . . . . . . Deploying the App . . . . . . . . . . . . . . . . . . . . . . . . . . A Word on Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 80 81 81 82 84 85 86 88 88 88 89 91 92 93 94 97 98 98 100 101 103 104 106 108 109 110 111 111 112 113 115 116 116 117 CONTENTS Built-in Directives . . . Introduction . . . . NgIf . . . . . . . . NgSwitch . . . . . . NgStyle . . . . . . . NgClass . . . . . . . NgFor . . . . . . . . Getting an index NgNonBindable . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 119 119 120 122 125 128 133 134 135 Forms in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . Forms are Crucial, Forms are Complex . . . . . . . . . . . . . . . FormControls and FormGroups . . . . . . . . . . . . . . . . . . . FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Our First Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . Loading the FormsModule . . . . . . . . . . . . . . . . . . . . Simple SKU Form: @Component Decorator . . . . . . . . . . Simple SKU Form: template . . . . . . . . . . . . . . . . . . . Simple SKU Form: Component Definition Class . . . . . . . . Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using FormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . Reactive Forms with FormBuilder . . . . . . . . . . . . . . . . . Using FormBuilder . . . . . . . . . . . . . . . . . . . . . . . . Using myForm in the view . . . . . . . . . . . . . . . . . . . . . Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Adding Validations . . . . . . . . . . . . . . . . . . . . . . . . . Explicitly setting the sku FormControl as an instance variable Custom Validations . . . . . . . . . . . . . . . . . . . . . . . . Watching For Changes . . . . . . . . . . . . . . . . . . . . . . . . ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 136 136 136 137 138 139 140 140 144 144 146 147 147 148 149 151 152 158 160 161 163 Dependency Injection . . . . . . . . . . . . Injections Example: PriceService . . . Dependency Injection Parts . . . . . . . Playing with an Injector . . . . . . . . . Providing Dependencies with NgModule Providers are the Key . . . . . . . . . Providers . . . . . . . . . . . . . . . . . Using a Class . . . . . . . . . . . . . Using a Factory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 165 169 170 174 176 176 176 181 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CONTENTS Dependency Injection in Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 More Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . Using @angular/common/http . . . . . . . . . . . . . . . . . . import from @angular/common/http . . . . . . . . . . . . A Basic Request . . . . . . . . . . . . . . . . . . . . . . . . . Building the SimpleHttpComponent Component Definition Building the SimpleHttpComponent template . . . . . . . . Building the SimpleHttpComponent Controller . . . . . . . Full SimpleHttpComponent . . . . . . . . . . . . . . . . . . Writing a YouTubeSearchComponent . . . . . . . . . . . . . . Writing a SearchResult . . . . . . . . . . . . . . . . . . . Writing the YouTubeSearchService . . . . . . . . . . . . . Writing the SearchBoxComponent . . . . . . . . . . . . . . Writing SearchResultComponent . . . . . . . . . . . . . . Writing YouTubeSearchComponent . . . . . . . . . . . . . . @angular/common/http API . . . . . . . . . . . . . . . . . . . Making a POST request . . . . . . . . . . . . . . . . . . . . PUT / PATCH / DELETE / HEAD . . . . . . . . . . . . . . . . . Custom HTTP Headers . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 186 187 187 188 189 189 190 192 193 194 195 200 207 208 212 212 213 214 214 Routing . . . . . . . . . . . . . . . . . . . . . . . Why Do We Need Routing? . . . . . . . . . . How client-side routing works . . . . . . . . The beginning: using anchor tags . . . . . The evolution: HTML5 client-side routing Writing our first routes . . . . . . . . . . . . Components of Angular routing . . . . . . . Imports . . . . . . . . . . . . . . . . . . . Routes . . . . . . . . . . . . . . . . . . . . Installing our Routes . . . . . . . . . . . . RouterOutlet using . . RouterLink using [routerLink] . . . . . . Putting it all together . . . . . . . . . . . . . Creating the Components . . . . . . . . . HomeComponent . . . . . . . . . . . . . . . AboutComponent . . . . . . . . . . . . . . ContactComponent . . . . . . . . . . . . . Application Component . . . . . . . . . . Configuring the Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 215 216 217 217 218 218 218 219 220 221 223 223 225 225 226 226 227 228 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CONTENTS Routing Strategies . . . . . . . . . . . . . . Running the application . . . . . . . . . . . Route Parameters . . . . . . . . . . . . . . ActivatedRoute . . . . . . . . . . . . . Music Search App . . . . . . . . . . . . . . First Steps . . . . . . . . . . . . . . . . . The SpotifyService . . . . . . . . . . . The SearchComponent . . . . . . . . . . Trying the search . . . . . . . . . . . . . TrackComponent . . . . . . . . . . . . . Wrapping up music search . . . . . . . . Router Hooks . . . . . . . . . . . . . . . . . AuthService . . . . . . . . . . . . . . . LoginComponent . . . . . . . . . . . . . ProtectedComponent and Route Guards . Nested Routes . . . . . . . . . . . . . . . . Configuring Routes . . . . . . . . . . . . ProductsModule . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 231 233 234 235 237 238 239 248 250 252 252 253 255 256 263 264 265 269 Data Architecture in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 An Overview of Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Data Architecture in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Data Architecture with Observables - Part 1: Services Observables and RxJS . . . . . . . . . . . . . . . . . Note: Some RxJS Knowledge Required . . . . . . Learning Reactive Programming and RxJS . . . . Chat App Overview . . . . . . . . . . . . . . . . . . Components . . . . . . . . . . . . . . . . . . . . Models . . . . . . . . . . . . . . . . . . . . . . . Services . . . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . Implementing the Models . . . . . . . . . . . . . . . User . . . . . . . . . . . . . . . . . . . . . . . . . Thread . . . . . . . . . . . . . . . . . . . . . . . . Message . . . . . . . . . . . . . . . . . . . . . . . Implementing UsersService . . . . . . . . . . . . . currentUser stream . . . . . . . . . . . . . . . . Setting a new user . . . . . . . . . . . . . . . . . UsersService.ts . . . . . . . . . . . . . . . . . . The MessagesService . . . . . . . . . . . . . . . . . the newMessages stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 272 272 272 274 275 276 277 277 278 278 278 279 280 281 282 283 284 284 CONTENTS the messages stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Operation Stream Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sharing the Stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Adding Messages to the messages Stream . . . . . . . . . . . . . . . . . . . . . . . Our completed MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . Trying out MessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The ThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A map of the current set of Threads (in threads) . . . . . . . . . . . . . . . . . . . A chronological list of Threads, newest-first (in orderedthreads) . . . . . . . . . . The currently selected Thread (in currentThread) . . . . . . . . . . . . . . . . . . The list of Messages for the currently selected Thread (in currentThreadMessages) Our Completed ThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . Data Model Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 286 288 289 292 295 297 297 302 302 304 307 309 Data Architecture with Observables - Part 2: View Components Building Our Views: The AppComponent Top-Level Component . The ChatThreadsComponent . . . . . . . . . . . . . . . . . . . . ChatThreadsComponent template . . . . . . . . . . . . . . . The Single ChatThreadComponent . . . . . . . . . . . . . . . . . ChatThreadComponent Controller and ngOnInit . . . . . . . ChatThreadComponent template . . . . . . . . . . . . . . . . The ChatWindowComponent . . . . . . . . . . . . . . . . . . . . The ChatMessageComponent . . . . . . . . . . . . . . . . . . . . The ChatMessageComponent template . . . . . . . . . . . . . The ChatNavBarComponent . . . . . . . . . . . . . . . . . . . . The ChatNavBarComponent @Component . . . . . . . . . . . . The ChatNavBarComponent template . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 310 313 314 314 316 316 317 327 329 330 330 332 333 Introduction to Redux with TypeScript . . . . Redux . . . . . . . . . . . . . . . . . . . . . Redux: Key Ideas . . . . . . . . . . . . . Core Redux Ideas . . . . . . . . . . . . . . What’s a reducer? . . . . . . . . . . . . Defining Action and Reducer Interfaces Creating Our First Reducer . . . . . . . Running Our First Reducer . . . . . . . . Adjusting the Counter With actions . . . Reducer switch . . . . . . . . . . . . . . Action “Arguments” . . . . . . . . . . . Storing Our State . . . . . . . . . . . . . . Using the Store . . . . . . . . . . . . . . Being Notified with subscribe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 336 336 337 337 338 338 339 340 341 343 344 345 345 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CONTENTS The Core of Redux . . . . . . A Messaging App . . . . . . . . Messaging App state . . . . Messaging App actions . . . Messaging App reducer . . . Trying Out Our Actions . . . Action Creators . . . . . . . . Using Real Redux . . . . . . . Using Redux in Angular . . . . . Planning Our App . . . . . . . . Setting Up Redux . . . . . . . . Defining the Application State Defining the Reducers . . . . Defining Action Creators . . Creating the Store . . . . . . Providing the Store . . . . . . . Bootstrapping the App . . . . . . The AppComponent . . . . . . . . imports . . . . . . . . . . . . The template . . . . . . . . . The constructor . . . . . . . Putting It All Together . . . . What’s Next . . . . . . . . . . . References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 350 350 351 352 355 356 358 360 361 361 361 362 363 363 365 366 367 367 368 369 371 372 372 Intermediate Redux in Angular . . . . . . . . Context For This Chapter . . . . . . . . . . Chat App Overview . . . . . . . . . . . . . Components . . . . . . . . . . . . . . . Models . . . . . . . . . . . . . . . . . . Reducers . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . Implementing the Models . . . . . . . . . . User . . . . . . . . . . . . . . . . . . . . Thread . . . . . . . . . . . . . . . . . . . Message . . . . . . . . . . . . . . . . . . App State . . . . . . . . . . . . . . . . . . . A Word on Code Layout . . . . . . . . . The Root Reducer . . . . . . . . . . . . . The UsersState . . . . . . . . . . . . . . The ThreadsState . . . . . . . . . . . . Visualizing Our AppState . . . . . . . . Building the Reducers (and Action Creators) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 374 375 375 376 377 377 378 378 378 379 380 380 381 381 382 383 384 CONTENTS Set Current User Action Creators . . . . . UsersReducer - Set Current User . . . . . Thread and Messages Overview . . . . . . Adding a New Thread Action Creators . . Adding a New Thread Reducer . . . . . . Adding New Messages Action Creators . . Adding A New Message Reducer . . . . . Selecting A Thread Action Creators . . . . Selecting A Thread Reducer . . . . . . . . Reducers Summary . . . . . . . . . . . . . Building the Angular Chat App . . . . . . . . The top-level AppComponent . . . . . . . . The ChatPage . . . . . . . . . . . . . . . . Container vs. Presentational Components . Building the ChatNavBarComponent . . . . . . Redux Selectors . . . . . . . . . . . . . . . Threads Selectors . . . . . . . . . . . . . . Unread Messages Count Selector . . . . . Building the ChatThreadsComponent . . . . . ChatThreadsComponent Controller . . . . . ChatThreadsComponent template . . . . . The Single ChatThreadComponent . . . . . . . ChatThreadComponent template . . . . . . Building the ChatWindowComponent . . . . . . The ChatMessageComponent . . . . . . . . . . Setting incoming . . . . . . . . . . . . . . The ChatMessageComponent template . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 385 386 386 387 388 389 391 392 393 393 395 397 398 399 401 402 403 404 405 407 408 409 410 417 418 419 420 Advanced Components . . . . . . . . . . . . . . . . . . . . . . . Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . View (Style) Encapsulation . . . . . . . . . . . . . . . . . . Shadow DOM Encapsulation . . . . . . . . . . . . . . . . No Encapsulation . . . . . . . . . . . . . . . . . . . . . . . Creating a Popup - Referencing and Modifying Host Elements Popup Structure . . . . . . . . . . . . . . . . . . . . . . . . Using ElementRef . . . . . . . . . . . . . . . . . . . . . . Binding to the host . . . . . . . . . . . . . . . . . . . . . . Adding a Button using exportAs . . . . . . . . . . . . . . Creating a Message Pane with Content Projection . . . . . . . Changing the Host’s CSS . . . . . . . . . . . . . . . . . . . Using ng-content . . . . . . . . . . . . . . . . . . . . . . Querying Neighbor Directives - Writing Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 422 425 429 431 434 434 436 438 441 443 444 444 446 CONTENTS ContentTabComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447 ContentTabsetComponent Component . . . . . . . . . . . . . . . . . . . . . . . . . . 448 Using the ContentTabsetComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 Lifecycle Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . OnInit and OnDestroy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . OnChanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . DoCheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . AfterContentInit, AfterViewInit, AfterContentChecked and AfterViewChecked Advanced Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rewriting ngIf - ngBookIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rewriting ngFor - NgBookFor . . . . . . . . . . . . . . . . . . . . . . . . . . . Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Customizing Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . . Zones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Observables and OnPush . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Testing . . . . . . . . . . . . . . . . Test driven? . . . . . . . . . . . End-to-end vs. Unit Testing . . . Testing Tools . . . . . . . . . . . Jasmine . . . . . . . . . . . . Karma . . . . . . . . . . . . . Writing Unit Tests . . . . . . . . Angular Unit testing framework Setting Up Testing . . . . . . . . Testing Services and HTTP . . . HTTP Considerations . . . . Stubs . . . . . . . . . . . . . Mocks . . . . . . . . . . . . . Http MockBackend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . TestBed.configureTestingModule and Providers Testing getTrack . . . . . . . . . . . . . . . . . . Testing Routing to Components . . . . . . . . . . . . Creating a Router for Testing . . . . . . . . . . . Mocking dependencies . . . . . . . . . . . . . . . Spies . . . . . . . . . . . . . . . . . . . . . . . . . Back to Testing Code . . . . . . . . . . . . . . . . . fakeAsync and advance . . . . . . . . . . . . . . inject . . . . . . . . . . . . . . . . . . . . . . . . Testing ArtistComponent’s Initialization . . . . . Testing ArtistComponent Methods . . . . . . . . Testing ArtistComponent DOM Template Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 453 457 463 476 483 484 486 492 496 503 504 508 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509 509 509 510 510 511 511 511 512 514 515 515 516 517 517 518 525 525 528 529 531 534 535 535 536 538 CONTENTS Testing Forms . . . . . . . . . . . Creating a ConsoleSpy . . . . . Installing the ConsoleSpy . . . Configuring the Testing Module Testing The Form . . . . . . . . Refactoring Our Form Test . . . Testing HTTP requests . . . . . . Testing a POST . . . . . . . . . . Testing DELETE . . . . . . . . . Testing HTTP Headers . . . . . Testing YouTubeSearchService Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540 543 544 545 545 547 551 551 554 555 557 564 Converting an AngularJS 1.x App to Angular . . . . . Peripheral Concepts . . . . . . . . . . . . . . . . . . What We’re Building . . . . . . . . . . . . . . . . . Mapping AngularJS 1 to Angular . . . . . . . . . . . Requirements for Interoperability . . . . . . . . . . . The AngularJS 1 App . . . . . . . . . . . . . . . . . The ng1-app HTML . . . . . . . . . . . . . . . . Code Overview . . . . . . . . . . . . . . . . . . . ng1: PinsService . . . . . . . . . . . . . . . . . . ng1: Configuring Routes . . . . . . . . . . . . . . ng1: HomeController . . . . . . . . . . . . . . . . ng1: / HomeController template . . . . . . . . . . ng1: pin Directive . . . . . . . . . . . . . . . . . ng1: pin Directive template . . . . . . . . . . . . ng1: AddController . . . . . . . . . . . . . . . . ng1: AddController template . . . . . . . . . . . ng1: Summary . . . . . . . . . . . . . . . . . . . Building A Hybrid . . . . . . . . . . . . . . . . . . . Hybrid Project Structure . . . . . . . . . . . . . . Bootstrapping our Hybrid App . . . . . . . . . . . What We’ll Upgrade . . . . . . . . . . . . . . . . A Minor Detour: Typing Files . . . . . . . . . . . Writing ng2 PinControlsComponent . . . . . . . . Using ng2 PinControlsComponent . . . . . . . . . Downgrading ng2 PinControlsComponent to ng1 Adding Pins with ng2 . . . . . . . . . . . . . . . Upgrading ng1 PinsService and $state to ng2 . Writing ng2 AddPinComponent . . . . . . . . . . . Using AddPinComponent . . . . . . . . . . . . . . Exposing an ng2 service to ng1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565 565 566 567 569 569 571 572 572 574 575 575 576 576 578 580 583 583 584 586 588 591 594 596 597 599 600 601 607 607 CONTENTS Writing the AnalyticsService . . . . . . Downgrade ng2 AnalyticsService to ng1 Using AnalyticsService in ng1 . . . . . . Summary . . . . . . . . . . . . . . . . . . . . References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608 608 609 610 611 NativeScript: Mobile Applications for the Angular Developer . . . . . . . . What is NativeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Where NativeScript Differs from Other Popular Frameworks . . . . . . What are the System and Development Requirements for NativeScript? Creating your First Mobile Application with NativeScript and Angular . . Adding Build Platforms for Cross Platform Deployment . . . . . . . . . Building and Testing for Android and iOS . . . . . . . . . . . . . . . . Installing JavaScript, Android, and iOS Plugins and Packages . . . . . . Understanding the Web to NativeScript UI and UX Differences . . . . . . Planning the NativeScript Page Layout . . . . . . . . . . . . . . . . . . Adding UI Components to the Page . . . . . . . . . . . . . . . . . . . . Styling Components with CSS . . . . . . . . . . . . . . . . . . . . . . . Developing a Geolocation Based Photo Application . . . . . . . . . . . . . Creating a Fresh NativeScript Project . . . . . . . . . . . . . . . . . . . Creating a Multiple Page Master-Detail Interface . . . . . . . . . . . . . Creating a Flickr Service for Obtaining Photos and Data . . . . . . . . . Creating a Service for Calculating Device Location and Distance . . . . Including Mapbox Functionality in the NativeScript Application . . . . Implementing the First Page of the Geolocation Application . . . . . . . Implementing the Second Page of the Geolocation Application . . . . . Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . NativeScript for Angular Developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612 612 613 614 616 616 616 617 618 618 620 621 622 623 624 628 633 637 638 644 645 646 Changelog . . . . . . . . . . . . Revision 67 - 2018-01-17 . Revision 66 - 2017-11-14 . Revision 65 - 2017-11-01 . Revision 64 - 2017-09-15 . Revision 63 - 2017-08-02 . Revision 62 - 2017-06-23 . Revision 61 - 2017-05-24 . Revision 60 - 2017-04-27 . Revision 59 - 2017-04-07 . Revision 58 - 2017-03-24 . Revision 57 - 2017-03-23 . Revision 56 - 2017-03-22 . Revision 55 - 2017-03-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647 647 647 647 647 647 647 648 648 648 648 649 649 649 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CONTENTS Revision 54 - 2017-03-10 . Revision 53 - 2017-03-01 . Revision 52 - 2017-02-22 . Revision 51 - 2017-02-14 . Revision 50 - 2017-02-10 . Revision 49 - 2017-01-18 . Revision 48 - 2017-01-13 . Revision 47 - 2017-01-06 . Revision 46 - 2017-01-03 . Revision 45 - 2016-12-05 . Revision 44 - 2016-11-17 . Revision 43 - 2016-11-08 . Revision 42 - 2016-10-14 . Revision 41 - 2016-09-28 . Revision 40 - 2016-09-20 . Revision 39 - 2016-09-03 . Revision 38 - 2016-08-29 . Revision 37 - 2016-08-02 . Revision 36 - 2016-07-20 . Revision 35 - 2016-06-30 . Revision 34 - 2016-06-15 . Revision 33 - 2016-05-11 . Revision 32 - 2016-05-06 . Revision 31 - 2016-04-28 . Revision 30 - 2016-04-20 . Revision 29 - 2016-04-08 . Revision 28 - 2016-04-01 . Revision 27 - 2016-03-25 . Revision 26 - 2016-03-24 . Revision 25 - 2016-03-21 . Revision 24 - 2016-03-10 . Revision 23 - 2016-03-04 . Revision 22 - 2016-02-24 . Revision 21 - 2016-02-20 . Revision 20 - 2016-02-11 . Revision 19 - 2016-02-04 . Revision 18 - 2016-01-29 . Revision 17 - 2016-01-28 . Revision 16 - 2016-01-14 . Revision 15 - 2016-01-07 . Revision 14 - 2015-12-23 . Revision 13 - 2015-12-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 650 650 650 650 650 650 650 650 651 651 651 651 652 652 652 652 652 652 653 653 653 653 654 654 654 654 654 654 654 655 655 655 655 656 656 656 656 656 657 657 657 CONTENTS Revision 12 - 2015-11-16 . Revision 11 - 2015-11-09 . Revision 10 - 2015-10-30 . Revision 9 - 2015-10-15 . Revision 8 - 2015-10-08 . Revision 7 - 2015-09-23 . Revision 6 - 2015-08-28 . Revision 5 - 2015-08-01 . Revision 4 - 2015-07-30 . Revision 3 - 2015-07-21 . Revision 2 - 2015-07-15 . Revision 1 - 2015-07-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658 658 659 659 659 659 660 660 660 660 660 660 CONTENTS 1 Book Revision Revision 67 - Covers up to Angular 5 (5.2.0, 2018-01-17) Bug Reports If you’d like to report any bugs, typos, or suggestions just email us at: [email protected] . Chat With The Community! We’re experimenting with a community chat room for this book using Gitter. If you’d like to hang out with other people learning Angular, come join us on Gitter2 ! Vote for New Content (new!) We’re constantly updating the book, writing new blog posts, and producing new material. You can now cast your vote for new content here3 . Be notified of updates via Twitter If you’d like to be notified of updates to the book on Twitter, follow @fullstackio4 We’d love to hear from you! Did you like the book? Did you find it helpful? We’d love to add your face to our list of testimonials on the website! Email us at: [email protected] . 1 mailto:[email protected]?Subject=ng-book%202%20feedback https://gitter.im/ng-book/ng-book 3 https://fullstackio.canny.io/ng-book 4 https://twitter.com/fullstackio 5 mailto:[email protected]?Subject=ng-book%202%20testimonial 2 How to Read This Book This book aims to be the single most useful resource on learning Angular. By the time you’re done reading this book, you (and your team) will have everything you need to build reliable, powerful Angular apps. Angular is a rich and feature-filled framework, but that also means it can be tricky to understand all of its parts. In this book, we’ll walk through everything from installing the tools, writing components, using forms, routing between pages, and calling APIs. But before we dig in, there are a few guidelines I want to give you in order to get the most out of this book. Briefly, I want to tell you: • how to approach the code examples and • how to get help if something goes wrong Running Code Examples This book comes with a library of runnable code examples. The code is available to download from the same place where you downloaded this book. We use the program npm6 to run every example in this book. This means you can type the following commands to run any example: 1 2 npm install npm start If you’re unfamiliar with npm, we cover how to get it installed in the Getting Started section in the first chapter. After running npm start, you will see some output on your screen that will tell you what URL to open to view your app. If you’re ever unclear on how to run a particular sample app, check out the README.md in that project’s directory. Every sample project contains a README.md that will give you the instructions you need to run each app. 6 https://www.npmjs.com/ How to Read This Book 3 Angular CLI With a couple of minor exceptions, every project in this book was built on Angular CLI7 . Unless specified otherwise, you can use the ng commands in each project. For instance, to run an example you can run ng serve (this is, generally, what is run when you type npm start). For most projects you can compile them to JavaScript with ng build (we’ll talk about this more in the first chapter). And you can run end-to-end tests with ng e2e, etc. Without getting too far into the details, Angular CLI is based on Webpack, a tool which helps process and bundle our various TypeScript, JavaScript, CSS, HTML, and image files. Angular CLI is not a requirement for using Angular. It’s simply a wrapper around Webpack (and some other tooling) that makes it easy to get started. Code Blocks and Context Nearly every code block in this book is pulled from a runnable code example, which you can find in the sample code. For example, here is a code block pulled from the first chapter: code/first-app/angular-hello-world/src/app/app.component.ts 8 9 10 export class AppComponent { title = 'app works!'; } Notice that the header of this code block states the path to the file which contains this code: code/first-app/angular-hello-world/src/app/app.component.ts. If you ever feel like you’re missing the context for a code example, open up the full code file using your favorite text editor. This book is written with the expectation that you’ll also be looking at the example code alongside the manuscript. For example, we often need to import libraries to get our code to run. In the early chapters of the book we show these import statements, because it’s not clear where the libraries are coming from otherwise. However, the later chapters of the book are more advanced and they focus on key concepts instead of repeating boilerplate code that was covered earlier in the book. If at any point you’re not clear on the context, open up the code example on disk. Code Block Numbering In this book, we sometimes build up a larger example in steps. If you see a file being loaded that has a numeric suffix, that generally means we’re building up to something bigger. 7 https://github.com/angular/angular-cli
- Xem thêm -

Tài liệu liên quan