ebook img

ng-book 2: The Complete Book on Angular 2, Revision 62 PDF

681 Pages·2016·23.67 MB·English
Save to my drive
Quick download
Download
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, Revision 62

WOW! eBook www.wowebook.org 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 WOW! eBook www.wowebook.org We’d like to thank: • Our technical editors: Frode Fikke, Travas Nolte, Daniel Rauf • 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 AngularCLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 ExampleProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 WritingApplicationCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 MakingaComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 ImportingDependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 ComponentDecorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 AddingatemplatewithtemplateUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Addingatemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 WOW! eBook www.wowebook.org 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 WOW! eBook www.wowebook.org 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 WOW! eBook www.wowebook.org 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 WOW! eBook www.wowebook.org CONTENTS DependencyInjectioninApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 MoreResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Using@angular/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 importfrom@angular/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 ABasicRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 BuildingtheSimpleHttpComponentComponentDefinition . . . . . . . . . . . . . . . 189 BuildingtheSimpleHttpComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . 189 BuildingtheSimpleHttpComponentController . . . . . . . . . . . . . . . . . . . . . . 190 FullSimpleHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 WritingaYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 WritingaSearchResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 WritingtheYouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 WritingtheSearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 WritingSearchResultComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 WritingYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 @angular/httpAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 MakingaPOSTrequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 PUT/PATCH/DELETE/HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 RequestOptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 WhyDoWeNeedRouting? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Howclient-sideroutingworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Thebeginning:usinganchortags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Theevolution:HTML5client-siderouting . . . . . . . . . . . . . . . . . . . . . . . . 218 Writingourfirstroutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 ComponentsofAngularrouting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 InstallingourRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 RouterOutletusing<router-outlet> . . . . . . . . . . . . . . . . . . . . . . . . . . 222 RouterLinkusing[routerLink] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Puttingitalltogether . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 CreatingtheComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 HomeComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 AboutComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 ContactComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 ApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 ConfiguringtheRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 WOW! eBook www.wowebook.org CONTENTS RoutingStrategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 RouteParameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 ActivatedRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 MusicSearchApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 FirstSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 TheSpotifyService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 TheSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Tryingthesearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 TrackComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Wrappingupmusicsearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 RouterHooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 AuthService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 LoginComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 ProtectedComponentandRouteGuards . . . . . . . . . . . . . . . . . . . . . . . . . . 257 NestedRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 ConfiguringRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 ProductsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 DataArchitectureinAngular4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 AnOverviewofDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 DataArchitectureinAngular4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 DataArchitecturewithObservables-Part1:Services . . . . . . . . . . . . . . . . . . . . 273 ObservablesandRxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Note:SomeRxJSKnowledgeRequired . . . . . . . . . . . . . . . . . . . . . . . . . . 273 LearningReactiveProgrammingandRxJS . . . . . . . . . . . . . . . . . . . . . . . . 273 ChatAppOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 ImplementingtheModels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 ImplementingUsersService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 currentUserstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Settinganewuser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 UsersService.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 TheMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 thenewMessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 WOW! eBook www.wowebook.org CONTENTS themessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 TheOperationStreamPattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 SharingtheStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 AddingMessagestothemessagesStream . . . . . . . . . . . . . . . . . . . . . . . . . 290 OurcompletedMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 TryingoutMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 TheThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Amapofthecurrentsetof Threads(inthreads) . . . . . . . . . . . . . . . . . . . . . 298 Achronologicallistof Threads,newest-first(inorderedthreads) . . . . . . . . . . . . 303 ThecurrentlyselectedThread(incurrentThread) . . . . . . . . . . . . . . . . . . . . 303 Thelistof MessagesforthecurrentlyselectedThread(incurrentThreadMessages) . . 305 OurCompletedThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 DataModelSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 DataArchitecturewithObservables-Part2:ViewComponents . . . . . . . . . . . . . . 311 BuildingOurViews:TheAppComponentTop-LevelComponent . . . . . . . . . . . . . . . 311 TheChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 ChatThreadsComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 TheSingleChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 ChatThreadComponentControllerandngOnInit . . . . . . . . . . . . . . . . . . . . . 317 ChatThreadComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 TheChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 TheChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 TheChatMessageComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 TheChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 TheChatNavBarComponent@Component . . . . . . . . . . . . . . . . . . . . . . . . . . 331 TheChatNavBarComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 IntroductiontoReduxwithTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Redux:KeyIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 CoreReduxIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 What’sareducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 DefiningActionandReducerInterfaces . . . . . . . . . . . . . . . . . . . . . . . . . 339 CreatingOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 RunningOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 AdjustingtheCounterWithactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 Reducerswitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 Action“Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 StoringOurState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 UsingtheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 BeingNotifiedwithsubscribe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 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

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.