Murray N. ng-book. The Complete Book on Angular PDF

Preview

Summary

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 purc...

Description

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

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

Contents Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . Join Newline Pro . . . . . . . . . . . . . . . . . . . . . . . . Join our Discord Chat . . . . . . . . . . . . . . . . . . . . . Vote for New Content (new!) . . . . . . . . . . . . . . . . . Be notified of updates via Twitter . . . . . . . . . . . . . . Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . We’d love to hear from you! . . . . . . . . . . . . . . . . . Become A Technical Contributor - Free Updates for Life Special Thanks to Our Technical Contributors . . . . . . 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 . . . . . . . . . . Chapter Overview . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

1 1 1 1 1 1 2 3 3

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

4 4 5 5 6 6 7 8 8

Writing Your First Angular Web Application Simple Reddit Clone . . . . . . . . . . . . . . Getting started . . . . . . . . . . . . . . . . . Node.js and npm . . . . . . . . . . . . . . TypeScript . . . . . . . . . . . . . . . . . Browser . . . . . . . . . . . . . . . . . . . Special instruction for Windows users . . . Angular CLI . . . . . . . . . . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

1 1 4 4 4 5 5 5

CONTENTS

Example Project . . . . . . . . . . . . . . . . . . . . Running the application . . . . . . . . . . . . . . . . . . Making a Component . . . . . . . . . . . . . . . . . Importing Dependencies . . . . . . . . . . . . . . . Component Decorators . . . . . . . . . . . . . . . Adding a template with templateUrl . . . . . . . Adding a template . . . . . . . . . . . . . . . . . . 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 . . . . . . . . .

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

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

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

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

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

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

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

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

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

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

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

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

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

6 11 13 15 16 17 17 18 19 20 24 28 29 30 31 33 35 35 36 36 36 38 39 41 46 56 56 61 63 65 67 68 68 69 70 71

CONTENTS

Uploading to a Server Installing now . . . . . Full Code Listing . . . . . . Wrapping Up . . . . . . . . Getting Help . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

72 72 73 73 73

TypeScript . . . . . . . . . . . . . . . . Angular is built in TypeScript . . What do we get with TypeScript? Types . . . . . . . . . . . . . . . . . Trying it out with a REPL . . Built-in types . . . . . . . . . . . . Classes . . . . . . . . . . . . . . . . Properties . . . . . . . . . . . . Methods . . . . . . . . . . . . Constructors . . . . . . . . . . Inheritance . . . . . . . . . . . Utilities . . . . . . . . . . . . . . . . Fat Arrow Functions . . . . . Template Strings . . . . . . . Wrapping up . . . . . . . . . . . . .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

74 74 76 77 79 79 82 82 83 85 87 89 89 91 92

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 . . . . . . . . . . . . . .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

93 93 95 95 95 98 99 100 103 103 104 104 107 107

CONTENTS

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 . . . . . . . . . . . . . . . . . . . . . . . Built-in Directives . . . . Introduction . . . . . . NgIf . . . . . . . . . . . NgSwitch . . . . . . . . NgStyle . . . . . . . . . NgClass . . . . . . . . . NgFor . . . . . . . . . . Getting an index NgNonBindable . . . . Conclusion . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

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

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

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

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

109 109 113 113 114 116 118 120 121 123 125 126 127 128 128 129 131 132 133 134 135

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

137 137 137 138 140 143 147 152 153 154

Forms in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Forms are Crucial, Forms are Complex . . . . . . . . . . . . . . . . . . . . . . 155 FormControls and FormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

CONTENTS

FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Our First Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Loading the FormsModule . . . . . . . . . . . . . . . . . . . . . . . Reactive- vs. template-driven Forms . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . Dependency Injection in Apps . . . . . . More Resources . . . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

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

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

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

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

158 159 160 160 161 164 165 167 168 168 170 171 173 174 179 181 183 185

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

186 187 192 193 196 198 199 199 204 207 207

HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Using @angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

CONTENTS

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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

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 . . . . . . . . . . .

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

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

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

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

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

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

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