Table Of Content

ng-book 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. 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 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 SpecialinstructionforWindowsusers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 AngularCLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 ExampleProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 WritingApplicationCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 MakingaComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 ImportingDependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 ComponentDecorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 AddingatemplatewithtemplateUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Addingatemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 CONTENTS 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 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 CONTENTS 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 AWordonDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 CONTENTS 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 UsingaClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 UsingaFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 CONTENTS DependencyInjectioninApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 MoreResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Using@angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 importfrom@angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 ABasicRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 BuildingtheSimpleHttpComponentComponentDefinition . . . . . . . . . . . . . . . 189 BuildingtheSimpleHttpComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . 189 BuildingtheSimpleHttpComponentController . . . . . . . . . . . . . . . . . . . . . . 190 FullSimpleHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 WritingaYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 WritingaSearchResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 WritingtheYouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 WritingtheSearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 WritingSearchResultComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 WritingYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 @angular/common/httpAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 MakingaPOSTrequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 PUT/PATCH/DELETE/HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 CustomHTTPHeaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 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] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Puttingitalltogether . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 CreatingtheComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 HomeComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 AboutComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 ContactComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 ApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 ConfiguringtheRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 CONTENTS RoutingStrategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 RouteParameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 ActivatedRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 MusicSearchApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 FirstSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 TheSpotifyService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 TheSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Tryingthesearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 TrackComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Wrappingupmusicsearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 RouterHooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 AuthService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 LoginComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 ProtectedComponentandRouteGuards . . . . . . . . . . . . . . . . . . . . . . . . . . 256 NestedRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 ConfiguringRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 ProductsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 DataArchitectureinAngular4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 AnOverviewofDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 DataArchitectureinAngular4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 DataArchitecturewithObservables-Part1:Services . . . . . . . . . . . . . . . . . . . . 272 ObservablesandRxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Note:SomeRxJSKnowledgeRequired . . . . . . . . . . . . . . . . . . . . . . . . . . 272 LearningReactiveProgrammingandRxJS . . . . . . . . . . . . . . . . . . . . . . . . 272 ChatAppOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 ImplementingtheModels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 ImplementingUsersService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 currentUserstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 Settinganewuser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 UsersService.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 TheMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 thenewMessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 CONTENTS themessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 TheOperationStreamPattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 SharingtheStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 AddingMessagestothemessagesStream . . . . . . . . . . . . . . . . . . . . . . . . . 289 OurcompletedMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 TryingoutMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 TheThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Amapofthecurrentsetof Threads(inthreads) . . . . . . . . . . . . . . . . . . . . . 297 Achronologicallistof Threads,newest-first(inorderedthreads) . . . . . . . . . . . . 302 ThecurrentlyselectedThread(incurrentThread) . . . . . . . . . . . . . . . . . . . . 302 Thelistof MessagesforthecurrentlyselectedThread(incurrentThreadMessages) . . 304 OurCompletedThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 DataModelSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 DataArchitecturewithObservables-Part2:ViewComponents . . . . . . . . . . . . . . 310 BuildingOurViews:TheAppComponentTop-LevelComponent . . . . . . . . . . . . . . . 310 TheChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 ChatThreadsComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 TheSingleChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 ChatThreadComponentControllerandngOnInit . . . . . . . . . . . . . . . . . . . . . 316 ChatThreadComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 TheChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 TheChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 TheChatMessageComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 TheChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 TheChatNavBarComponent@Component . . . . . . . . . . . . . . . . . . . . . . . . . . 330 TheChatNavBarComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 IntroductiontoReduxwithTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 Redux:KeyIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 CoreReduxIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 What’sareducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 DefiningActionandReducerInterfaces . . . . . . . . . . . . . . . . . . . . . . . . . 338 CreatingOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 RunningOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 AdjustingtheCounterWithactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Reducerswitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 Action“Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343 StoringOurState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 UsingtheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 BeingNotifiedwithsubscribe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

Description:

Revision 66 - Covers up to Angular 5 (5.0.0, 2017-11-14)