ng-book the complete book on angular6

685 Pages·2018·24.37 MB·English

by  Nate Murray

ng-book
The Complete Guide to Angular
Written by Nate Murray, Felipe Coury, Ari Lerner, and Carlos Taborda
© 2018 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
ComponentDecorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
AddingatemplatewithtemplateUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Addingatemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
CONTENTS
AddingCSSStyleswithstyleUrls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
LoadingOurComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
AddingDatatotheComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
WorkingWithArrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
UsingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
RenderingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
AcceptingInputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
PassinganInputvalue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
BootstrappingCrashCourse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
ExpandingourApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
AddingCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
TheApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
AddingInteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
AddingtheArticleComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
RenderingMultipleRows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
CreatinganArticleclass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
StoringMultipleArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
ConfiguringtheArticleComponentwithinputs . . . . . . . . . . . . . . . . . . . . . 54
RenderingaListofArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
AddingNewArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
FinishingTouches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
DisplayingtheArticleDomain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Re-sortingBasedonScore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
BuildingOurAppforProduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
UploadingtoaServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Installingnow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
FullCodeListing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
AngularisbuiltinTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
WhatdowegetwithTypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
TryingitoutwithaREPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Built-intypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
CONTENTS
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
FatArrowFunctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
TemplateStrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Wrappingup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
HowAngularWorks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
TheNavigationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
TheBreadcrumbsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
TheProductListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
HowtoUseThisChapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
ProductModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Componentselector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Componenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
AddingAProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
ViewingtheProductwithTemplateBinding . . . . . . . . . . . . . . . . . . . . . . . 92
AddingMoreProducts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
SelectingaProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Listingproductsusing<products-list> . . . . . . . . . . . . . . . . . . . . . . . . . 95
TheProductsListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
ConfiguringtheProductsListComponent@ComponentOptions . . . . . . . . . . . . . 99
Componentinputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Componentoutputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
EmittingCustomEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
WritingtheProductsListComponentControllerClass . . . . . . . . . . . . . . . . . . 104
WritingtheProductsListComponentViewTemplate . . . . . . . . . . . . . . . . . . . 105
TheFullProductsListComponentComponent . . . . . . . . . . . . . . . . . . . . . . 107
TheProductRowComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
ProductRowComponentConfiguration . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
ProductRowComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
TheProductImageComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 112
ThePriceDisplayComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 112
TheProductDepartmentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
NgModuleandBootingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Bootingtheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
TheCompletedProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
DeployingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
AWordonDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
CONTENTS
Built-inDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
NgIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
NgSwitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
NgStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
NgClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
NgFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Gettinganindex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
NgNonBindable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
FormsinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
FormsareCrucial,FormsareComplex . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
FormControlsandFormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
OurFirstForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
LoadingtheFormsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
SimpleSKUForm:@ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . 141
SimpleSKUForm:template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
SimpleSKUForm:ComponentDefinitionClass . . . . . . . . . . . . . . . . . . . . . 145
Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
ReactiveFormswithFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
UsingmyFormintheview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
AddingValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
ExplicitlysettingtheskuFormControlasaninstancevariable . . . . . . . . . . . . . 153
CustomValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
WatchingForChanges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
DependencyInjection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
InjectionsExample:PriceService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
DependencyInjectionParts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
PlayingwithanInjector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
ProvidingDependencieswithNgModule . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
ProvidersaretheKey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
UsingaClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
UsingaFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
CONTENTS
DependencyInjectioninApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
MoreResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Using@angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
importfrom@angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
ABasicRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
BuildingtheSimpleHttpComponentComponentDefinition . . . . . . . . . . . . . . . 190
BuildingtheSimpleHttpComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . 190
BuildingtheSimpleHttpComponentController . . . . . . . . . . . . . . . . . . . . . . 191
FullSimpleHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
WritingaYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
WritingaSearchResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
WritingtheYouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
WritingtheSearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
WritingSearchResultComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
WritingYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
@angular/common/httpAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
MakingaPOSTrequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
PUT/PATCH/DELETE/HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
CustomHTTPHeaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
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
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
ProtectedComponentandRouteGuards . . . . . . . . . . . . . . . . . . . . . . . . . . 257
NestedRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
ConfiguringRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
ProductsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
DataArchitectureinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
AnOverviewofDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
DataArchitectureinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
RunningOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
AdjustingtheCounterWithactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Reducerswitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Action“Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
StoringOurState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
UsingtheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
BeingNotifiedwithsubscribe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346