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

677 Pages·2017·25.126 MB·English

by  Nate Murray, Ari Lerner, Felipe Coury, Carlos Taborda

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