Table Of Content

WOW! eBook www.wowebook.org ng-book 2 The Complete Guide to Angular Written by Nate Murray, Felipe Coury, Ari Lerner, and Carlos Taborda © 2017 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. Typeset using Leanpub. Published in San Francisco, California by Fullstack.io. 
 FULLSTACK.io WOW! eBook www.wowebook.org We’d like to thank: • Our technical editor Frode Fikke • Nic Raboy, and Burke Holland for contributing the NativeScript chapter 
 WOW! eBook www.wowebook.org Contents BookRevision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 BugReports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 ChatWithTheCommunity! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 VoteforNewContent(new!) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 BenotifiedofupdatesviaTwitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 We’dlovetohearfromyou! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 HowtoReadThisBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 RunningCodeExamples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 AngularCLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 CodeBlocksandContext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 CodeBlockNumbering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 AWordonVersioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 EmailingUs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 TechnicalSupportResponseTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 ChapterOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 WritingYourFirstAngularWebApplication . . . . . . . . . . . . . . . . . . . . . . . . . 1 SimpleRedditClone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Node.jsandnpm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 SpecialinstructionforWindowsusers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 EnsureIISisinstalled(Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 AngularCLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 ExampleProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 WritingApplicationCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 MakingaComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 ImportingDependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 ComponentDecorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 AddingatemplatewithtemplateUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 WOW! eBook www.wowebook.org CONTENTS Addingatemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 AddingCSSStyleswithstyleUrls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 LoadingOurComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 AddingDatatotheComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 WorkingWithArrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 UsingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 RenderingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 AcceptingInputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 PassinganInputvalue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 BootstrappingCrashCourse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 ExpandingourApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 AddingCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 TheApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 AddingInteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 AddingtheArticleComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 RenderingMultipleRows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 CreatinganArticleclass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 StoringMultipleArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 ConfiguringtheArticleComponentwithinputs . . . . . . . . . . . . . . . . . . . . . 53 RenderingaListofArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 AddingNewArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 FinishingTouches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 DisplayingtheArticleDomain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Re-sortingBasedonScore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 BuildingOurAppforProduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 UploadingtoaServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Installingnow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 FullCodeListing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Angular4isbuiltinTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 WhatdowegetwithTypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 TryingitoutwithaREPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Built-intypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 WOW! eBook www.wowebook.org CONTENTS Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 FatArrowFunctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 TemplateStrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Wrappingup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 HowAngularWorks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 TheNavigationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 TheBreadcrumbsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 TheProductListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 HowtoUseThisChapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 ProductModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Componentselector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Componenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 AddingAProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 ViewingtheProductwithTemplateBinding . . . . . . . . . . . . . . . . . . . . . . . 91 AddingMoreProducts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 SelectingaProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Listingproductsusing<products-list> . . . . . . . . . . . . . . . . . . . . . . . . . 94 TheProductsListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 ConfiguringtheProductsListComponent@ComponentOptions . . . . . . . . . . . . . 98 Componentinputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Componentoutputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 EmittingCustomEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 WritingtheProductsListComponentControllerClass . . . . . . . . . . . . . . . . . . 103 WritingtheProductsListComponentViewTemplate . . . . . . . . . . . . . . . . . . . 104 TheFullProductsListComponentComponent . . . . . . . . . . . . . . . . . . . . . . 106 TheProductRowComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 ProductRowComponentConfiguration . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 ProductRowComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 TheProductImageComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 111 ThePriceDisplayComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 111 TheProductDepartmentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 NgModuleandBootingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Bootingtheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 TheCompletedProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 DeployingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 WOW! eBook www.wowebook.org CONTENTS AWordonDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Built-inDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 NgIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 NgSwitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 NgStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 NgClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 NgFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Gettinganindex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 NgNonBindable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 FormsinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormsareCrucial,FormsareComplex . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormControlsandFormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 OurFirstForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 LoadingtheFormsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 SimpleSKUForm:@ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . 140 SimpleSKUForm:template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 SimpleSKUForm:ComponentDefinitionClass . . . . . . . . . . . . . . . . . . . . . 144 Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 ReactiveFormswithFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 UsingmyFormintheview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 AddingValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 ExplicitlysettingtheskuFormControlasaninstancevariable . . . . . . . . . . . . . 152 CustomValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 WatchingForChanges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 DependencyInjection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 InjectionsExample:PriceService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 DependencyInjectionParts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 PlayingwithanInjector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 ProvidingDependencieswithNgModule . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 ProvidersaretheKey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 WOW! eBook www.wowebook.org CONTENTS UsingaClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 UsingaFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 DependencyInjectioninApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 MoreResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Using@angular/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 importfrom@angular/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 ABasicRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 BuildingtheSimpleHttpComponentComponentDefinition . . . . . . . . . . . . . . . 188 BuildingtheSimpleHttpComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . 188 BuildingtheSimpleHttpComponentController . . . . . . . . . . . . . . . . . . . . . . 189 FullSimpleHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 WritingaYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 WritingaSearchResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 WritingtheYouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 WritingtheSearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 WritingSearchResultComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 WritingYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 @angular/httpAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 MakingaPOSTrequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 PUT/PATCH/DELETE/HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 RequestOptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 WhyDoWeNeedRouting? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Howclient-sideroutingworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Thebeginning:usinganchortags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Theevolution:HTML5client-siderouting . . . . . . . . . . . . . . . . . . . . . . . . 217 Writingourfirstroutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 ComponentsofAngularrouting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 InstallingourRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 RouterOutletusing<router-outlet> . . . . . . . . . . . . . . . . . . . . . . . . . . 221 RouterLinkusing[routerLink] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Puttingitalltogether . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 CreatingtheComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 HomeComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 AboutComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 ContactComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 WOW! eBook www.wowebook.org CONTENTS ApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 ConfiguringtheRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 RoutingStrategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 RouteParameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 ActivatedRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 MusicSearchApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 FirstSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 TheSpotifyService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 TheSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Tryingthesearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 TrackComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Wrappingupmusicsearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 RouterHooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 AuthService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 LoginComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 ProtectedComponentandRouteGuards . . . . . . . . . . . . . . . . . . . . . . . . . . 256 NestedRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 ConfiguringRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 ProductsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 DataArchitectureinAngular4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 AnOverviewofDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 DataArchitectureinAngular4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 DataArchitecturewithObservables-Part1:Services . . . . . . . . . . . . . . . . . . . . 271 ObservablesandRxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Note:SomeRxJSKnowledgeRequired . . . . . . . . . . . . . . . . . . . . . . . . . . 271 LearningReactiveProgrammingandRxJS . . . . . . . . . . . . . . . . . . . . . . . . 271 ChatAppOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 ImplementingtheModels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 ImplementingUsersService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 currentUserstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Settinganewuser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 UsersService.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 WOW! eBook www.wowebook.org CONTENTS TheMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 thenewMessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 themessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 TheOperationStreamPattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 SharingtheStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 AddingMessagestothemessagesStream . . . . . . . . . . . . . . . . . . . . . . . . . 288 OurcompletedMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 TryingoutMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 TheThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Amapofthecurrentsetof Threads(inthreads) . . . . . . . . . . . . . . . . . . . . . 296 Achronologicallistof Threads,newest-first(inorderedthreads) . . . . . . . . . . . . 301 ThecurrentlyselectedThread(incurrentThread) . . . . . . . . . . . . . . . . . . . . 301 Thelistof MessagesforthecurrentlyselectedThread(incurrentThreadMessages) . . 303 OurCompletedThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 DataModelSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 DataArchitecturewithObservables-Part2:ViewComponents . . . . . . . . . . . . . . 309 BuildingOurViews:TheChatAppTop-LevelComponent . . . . . . . . . . . . . . . . . . 309 TheChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 ChatThreadsComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 TheSingleChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 ChatThreadComponentControllerandngOnInit . . . . . . . . . . . . . . . . . . . . . 315 ChatThreadComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 TheChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 TheChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 TheChatMessageComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 TheChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 TheChatNavBarComponent@Component . . . . . . . . . . . . . . . . . . . . . . . . . . 329 TheChatNavBarComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 NextSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 IntroductiontoReduxwithTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Redux:KeyIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 CoreReduxIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 What’sareducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 DefiningActionandReducerInterfaces . . . . . . . . . . . . . . . . . . . . . . . . . 337 CreatingOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 RunningOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 AdjustingtheCounterWithactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Reducerswitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Action“Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 WOW! eBook www.wowebook.org

Description:
ng-book 2. The in-depth, complete, and up-to-date book on Angular 2. Become an Angular 2 expert today. Ready to master Angular 2? What if you could master the entire framework - with solid foundations - in less time without beating your head against a wall? Imagine how quickly you could work if you
ebook img

ng-book 2: The Complete Book on Angular 2 (Volume 2) Revision 58 PDF

677 Pages·2017·25.13 MB·English
by  Nate Murray
#angular 2
Save to my drive
Quick download
Download
Upgrade Premium
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview ng-book 2: The Complete Book on Angular 2 (Volume 2) Revision 58

WOW! eBook www.wowebook.org ng-book 2 The Complete Guide to Angular Written by Nate Murray, Felipe Coury, Ari Lerner, and Carlos Taborda © 2017 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. Typeset using Leanpub. Published in San Francisco, California by Fullstack.io. 
 FULLSTACK.io WOW! eBook www.wowebook.org We’d like to thank: • Our technical editor Frode Fikke • Nic Raboy, and Burke Holland for contributing the NativeScript chapter 
 WOW! eBook www.wowebook.org Contents BookRevision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 BugReports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 ChatWithTheCommunity! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 VoteforNewContent(new!) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 BenotifiedofupdatesviaTwitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 We’dlovetohearfromyou! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 HowtoReadThisBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 RunningCodeExamples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 AngularCLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 CodeBlocksandContext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 CodeBlockNumbering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 AWordonVersioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 EmailingUs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 TechnicalSupportResponseTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 ChapterOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 WritingYourFirstAngularWebApplication . . . . . . . . . . . . . . . . . . . . . . . . . 1 SimpleRedditClone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Node.jsandnpm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 SpecialinstructionforWindowsusers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 EnsureIISisinstalled(Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 AngularCLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 ExampleProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 WritingApplicationCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 MakingaComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 ImportingDependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 ComponentDecorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 AddingatemplatewithtemplateUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 WOW! eBook www.wowebook.org CONTENTS Addingatemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 AddingCSSStyleswithstyleUrls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 LoadingOurComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 AddingDatatotheComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 WorkingWithArrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 UsingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 RenderingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 AcceptingInputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 PassinganInputvalue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 BootstrappingCrashCourse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 ExpandingourApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 AddingCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 TheApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 AddingInteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 AddingtheArticleComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 RenderingMultipleRows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 CreatinganArticleclass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 StoringMultipleArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 ConfiguringtheArticleComponentwithinputs . . . . . . . . . . . . . . . . . . . . . 53 RenderingaListofArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 AddingNewArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 FinishingTouches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 DisplayingtheArticleDomain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Re-sortingBasedonScore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 BuildingOurAppforProduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 UploadingtoaServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Installingnow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 FullCodeListing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Angular4isbuiltinTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 WhatdowegetwithTypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 TryingitoutwithaREPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Built-intypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 WOW! eBook www.wowebook.org CONTENTS Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 FatArrowFunctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 TemplateStrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Wrappingup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 HowAngularWorks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 TheNavigationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 TheBreadcrumbsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 TheProductListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 HowtoUseThisChapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 ProductModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Componentselector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Componenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 AddingAProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 ViewingtheProductwithTemplateBinding . . . . . . . . . . . . . . . . . . . . . . . 91 AddingMoreProducts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 SelectingaProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Listingproductsusing<products-list> . . . . . . . . . . . . . . . . . . . . . . . . . 94 TheProductsListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 ConfiguringtheProductsListComponent@ComponentOptions . . . . . . . . . . . . . 98 Componentinputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Componentoutputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 EmittingCustomEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 WritingtheProductsListComponentControllerClass . . . . . . . . . . . . . . . . . . 103 WritingtheProductsListComponentViewTemplate . . . . . . . . . . . . . . . . . . . 104 TheFullProductsListComponentComponent . . . . . . . . . . . . . . . . . . . . . . 106 TheProductRowComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 ProductRowComponentConfiguration . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 ProductRowComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 TheProductImageComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 111 ThePriceDisplayComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 111 TheProductDepartmentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 NgModuleandBootingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Bootingtheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 TheCompletedProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 DeployingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 WOW! eBook www.wowebook.org CONTENTS AWordonDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Built-inDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 NgIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 NgSwitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 NgStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 NgClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 NgFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Gettinganindex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 NgNonBindable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 FormsinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormsareCrucial,FormsareComplex . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormControlsandFormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 OurFirstForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 LoadingtheFormsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 SimpleSKUForm:@ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . 140 SimpleSKUForm:template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 SimpleSKUForm:ComponentDefinitionClass . . . . . . . . . . . . . . . . . . . . . 144 Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 ReactiveFormswithFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 UsingmyFormintheview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 AddingValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 ExplicitlysettingtheskuFormControlasaninstancevariable . . . . . . . . . . . . . 152 CustomValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 WatchingForChanges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 DependencyInjection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 InjectionsExample:PriceService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 DependencyInjectionParts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 PlayingwithanInjector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 ProvidingDependencieswithNgModule . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 ProvidersaretheKey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 WOW! eBook www.wowebook.org CONTENTS UsingaClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 UsingaFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 DependencyInjectioninApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 MoreResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Using@angular/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 importfrom@angular/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 ABasicRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 BuildingtheSimpleHttpComponentComponentDefinition . . . . . . . . . . . . . . . 188 BuildingtheSimpleHttpComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . 188 BuildingtheSimpleHttpComponentController . . . . . . . . . . . . . . . . . . . . . . 189 FullSimpleHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 WritingaYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 WritingaSearchResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 WritingtheYouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 WritingtheSearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 WritingSearchResultComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 WritingYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 @angular/httpAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 MakingaPOSTrequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 PUT/PATCH/DELETE/HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 RequestOptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 WhyDoWeNeedRouting? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Howclient-sideroutingworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Thebeginning:usinganchortags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Theevolution:HTML5client-siderouting . . . . . . . . . . . . . . . . . . . . . . . . 217 Writingourfirstroutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 ComponentsofAngularrouting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 InstallingourRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 RouterOutletusing<router-outlet> . . . . . . . . . . . . . . . . . . . . . . . . . . 221 RouterLinkusing[routerLink] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Puttingitalltogether . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 CreatingtheComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 HomeComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 AboutComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 ContactComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 WOW! eBook www.wowebook.org CONTENTS ApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 ConfiguringtheRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 RoutingStrategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 RouteParameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 ActivatedRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 MusicSearchApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 FirstSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 TheSpotifyService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 TheSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Tryingthesearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 TrackComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Wrappingupmusicsearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 RouterHooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 AuthService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 LoginComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 ProtectedComponentandRouteGuards . . . . . . . . . . . . . . . . . . . . . . . . . . 256 NestedRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 ConfiguringRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 ProductsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 DataArchitectureinAngular4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 AnOverviewofDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 DataArchitectureinAngular4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 DataArchitecturewithObservables-Part1:Services . . . . . . . . . . . . . . . . . . . . 271 ObservablesandRxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Note:SomeRxJSKnowledgeRequired . . . . . . . . . . . . . . . . . . . . . . . . . . 271 LearningReactiveProgrammingandRxJS . . . . . . . . . . . . . . . . . . . . . . . . 271 ChatAppOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 ImplementingtheModels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 ImplementingUsersService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 currentUserstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Settinganewuser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 UsersService.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 WOW! eBook www.wowebook.org CONTENTS TheMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 thenewMessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 themessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 TheOperationStreamPattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 SharingtheStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 AddingMessagestothemessagesStream . . . . . . . . . . . . . . . . . . . . . . . . . 288 OurcompletedMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 TryingoutMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 TheThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Amapofthecurrentsetof Threads(inthreads) . . . . . . . . . . . . . . . . . . . . . 296 Achronologicallistof Threads,newest-first(inorderedthreads) . . . . . . . . . . . . 301 ThecurrentlyselectedThread(incurrentThread) . . . . . . . . . . . . . . . . . . . . 301 Thelistof MessagesforthecurrentlyselectedThread(incurrentThreadMessages) . . 303 OurCompletedThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 DataModelSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 DataArchitecturewithObservables-Part2:ViewComponents . . . . . . . . . . . . . . 309 BuildingOurViews:TheChatAppTop-LevelComponent . . . . . . . . . . . . . . . . . . 309 TheChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 ChatThreadsComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 TheSingleChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 ChatThreadComponentControllerandngOnInit . . . . . . . . . . . . . . . . . . . . . 315 ChatThreadComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 TheChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 TheChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 TheChatMessageComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 TheChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 TheChatNavBarComponent@Component . . . . . . . . . . . . . . . . . . . . . . . . . . 329 TheChatNavBarComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 NextSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 IntroductiontoReduxwithTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Redux:KeyIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 CoreReduxIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 What’sareducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 DefiningActionandReducerInterfaces . . . . . . . . . . . . . . . . . . . . . . . . . 337 CreatingOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 RunningOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 AdjustingtheCounterWithactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Reducerswitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Action“Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 WOW! eBook www.wowebook.org

Description:
ng-book 2. The in-depth, complete, and up-to-date book on Angular 2. Become an Angular 2 expert today. Ready to master Angular 2? What if you could master the entire framework - with solid foundations - in less time without beating your head against a wall? Imagine how quickly you could work if you
See more

The list of books you might like

Upgrade Premium
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.
DMCA & Copyright: Dear all, most of the website is community built, users are uploading hundred of books everyday, which makes really hard for us to identify copyrighted material, please contact us if you want any material removed.
Copyright @ PDFdrive.to, 2022 | We love our users