Index
Symbols
80-20 solution 274
401 Unauthorized response 373
403 Forbidden response 373
A
A11Y project
reference link 221
abstract auth service
abstract caching service
localStorage, using 368, 369, 371, 372
abstract functions
defining 364, 365, 366, 367, 368
accessibility (A11y)
automated accessibility tool, configuring 222, 223, 224
advanced analytics events
Advanced Angular architecture 23, 24
advanced continuous integration 466
build environment, containerizing 467
multi-stage Dockerfiles 467, 468
advanced load testing
about 722
OctoPerf, using 722, 723, 725, 727, 728
Ahava, Simo 735
Ahead-of-Time (AOT) 444
Amazon Web Services (AWS) 52, 53, 667
AWS account 670
AWS billing 703
AWS Lambda 667
analytics
Angular 489
custom events, adding 740, 741
headless browser, configuring 470, 471, 473
null guarding 122
null guarding, with *ngIf 126
property initialization 124
safe navigation operator 125
used, for optimizing VS Code 72
Angular 8 32
Angular application
Angular CLI, installing 60
Angular reactive forms, adding 237, 238
code, committing with VS Code 69, 70
component interaction, with BehaviorSubject 250
components, adding 238, 239, 241, 242
components, verifying 238, 239, 241, 242
generating 60
package.json, inspecting 64, 65, 66, 67, 68
package.json, updating 64, 66, 67, 68
search option, adding to weather service 242, 243, 244
user inputs, limiting with throttle/debounce 246, 247
Angular application, component interaction techniques
child-parent relationships, with event emitters 251, 253
global events 250
parent-child relationships with input binding 253, 254
sibling interactions, with subjects 254, 255, 257, 258
Angular application, multiple API calls
about 266
postal code service, implementing 267, 269
Angular application, reactive style implementation
about 263
observable, binding with async pipe 263, 264
observable stream, tapping 265, 266
Angular application, subscriptions
unsubscribing from 261
unsubscribing, with SubSink 262, 263
Angular application, subscriptions management
about 259
exposé, of memory leak 259
Angular architecture 17, 18, 19
Angular Augury
debugging 761
Router Tree 764
Angular CLI
development directory, setting up 58
installing 60
Angular CLI autocomplete
configuring 82
Angular CLI, on VS Code
reference link 761
Angular documentation
reference link 12
Angular e2e tests
executing 156
Angular Evergreen
URL 15
Angular Flex Layout
alignment 203
APIs, for DOM containers 191
APIs, for DOM elements 192
basics 190
installing 190
reference link 188
responsive layouts 188, 189, 190
rough scaffolding, implementing 205, 206, 207
working 204
Angular Material
automatically, adding 178, 179, 180
components 181
configuring 182
icon font, adding 186
installing 178
manually, adding 181
theme, importing 184
Angular Material and Styles
Angular Material cards
reference link 199
Angular Material components
using 193
Angular Material Design Color Tool
reference link 217
Angular Material, icons
reference link 186
Angular Material schematics 193, 195
Angular Material theme
reference link 216
Angular Material, theme section
reference link 184
Angular Material Toolbar
used, for modifying landing page 195, 196, 197
Angular Material typography
about 201
applying 202
reference link 202
Angular Material updates
reference link 30
Angular reactive forms, types
reactive forms 237
template-driven forms 237
Angular releases
reference link 13
Angular Services
dependencies, injecting 108, 109
using 106
angular-unit-test-helper 149, 153
Angular unit tests
Jasmine 133
TestBed, configuring 139
test doubles 144
unit test execution 136
API layer 522
architectural nuance, with illustrations
reference link 95
Artifacts tabs 478
Artifacts Wiki
creating 340
assertion
expect() 134
fail(message) 134
Asynchronous JavaScript and XML (AJAX) 4
attribute directives 576
Augury
download link 761
auth guards 411, 413, 414, 415
auth provider service
selecting, with factory 426, 427
auth service
auth workflow
auto-generated unit tests
Automated Acceptance Tests (AAT) 154
automated installation scripts
reference link 38
automation
setting up, for macOS 53
setting up, for Windows 53
auxiliary routes
used, for implementing master/detail view 629, 630, 631, 632
availability zones (AZs) 729
AWS Elastic Container Registry (AWS ECR) 449
AWS Elastic Container Service (AWS ECS) 440, 460
Azure Container Registry (ACR) 460
B
backlog
creating, for Local Weather app 89, 90
Balsamiq
URL 225
Base form component
building, as abstract class 598, 599, 600
BehaviorSubject
bigtestjs.io
reference link 157
BModule 314
branding 306
browser DevTools
browser manifest and icons
build environment
containerizing 467
build environments
debugging 470
built-in directives
about 772
attribute directives 772
structural directives 772
C
cached data
CanActivateChild guards 410
CanActivate guards 410
CanDeactivate guards 410
CanLoad guards 410
Chocolatey for Windows
installing 39
reference link 40
reference link 457
used, for deploying CD to Vercel Now 457, 458, 460
CircleCI container-in-container 475, 476, 477, 478
Clarity
reference link 176
Class Under Test (CUT) 129
CLI package managers
about 38
Chocolatey for Windows, installing 39
Homebrew for macOS, installing 40
CLI scaffolds 774
cloud
Dockerfile, deploying to 449
Cloud
deploying 168
cloud environment
scaling 720
Cloud Run
used, for configuring Docker 454
Cloud Services
about 51
Amazon Web Services (AWS) 52, 53
Google Cloud 52
Google Firebase 51
Vercel Now 51
code coverage reports
code linting
code styling
Color Blender
reference link 310
color palette 306
command-line interface (CLI) 172
Command-Line Interface (CLI) 38
common testing providers function 415, 416
Component Development Kit (CDK) 31
components (Cmp) 281
conditional navigation 392, 394
conditional or ternary operator 349, 350
console errors
container, build and deploy
reference link 453
Content Delivery Network (CDN) 673
continuous deployment (CD) 429
deploying, to GCloud with orbs 460, 461, 462, 463, 464
deploying, to Vercel Now with CircleCI 457, 459
Gated CI workflows, defining 465, 466
continuous integration (CI) 51
Continuous Integration (CI) 429
about 159
code coverage reports 480, 481, 482
GitHub flow 163, 164, 165, 166, 167
Cookies 368
cost per user calculation, scalable environment
about 729
estimates, revising with metrics 734
target server utilization, calculating 730, 732, 733
Coveralls
URL 481
CRUD (Create, Retrieve, Update, and Delete) 659
CSS
CurrentWeatherComponent
registering, with appStore using selector 654, 655
current working directory (CWD) 469
custom events
custom rating control
implementing 607, 609, 610, 611, 612
custom themes 309
custom user controls
creating, with ControlValueAccessor 607
D
data
loading, with resolve guard 624, 625, 626
transforming, with RxJS 118
data handling
TypeScript operators, using 347, 348
data table
implementing, with pagination 632, 633, 634, 636, 637, 639, 640
DeepScan
URL 168
dependency injection (DI) 18
development tools
Git 41
GitHub Desktop 41
installing 41
DevOps
dev tools
disciplined and balanced approach 277, 278, 279
distributed denial-of-service (DDoS) 729
Distributed Denial-of-Service (DDoS) 667
Docker
about 50
configuring, with Cloud Run 454
URL 434
used, for containerizing web apps 434
Docker Compose
about 501
environment variables, configuring with DotEnv 504, 505, 506
executing, on CircleCI 509, 510
launch, orchestrating 508, 509
Nginx, using as web server 502
reference link 502
server, containerizing 503, 504
docker-compose.yml file
Docker extensions
implementing, in VS Code 448, 449
Dockerfile
deploying, to cloud 449
reference link 436
Dockerfile, anatomy
about 434, 435, 436, 437, 438, 439
CMD 434
COPY 434
FROM 434
SETUP 434
Docker Hub
image, building 440, 441, 442, 443, 444, 445, 446
image, publishing 440, 441, 442, 443, 444, 445, 446
reference link 439
Document Object Model (DOM) 5
DocumentTS library
features 532
filtering
IDocument, defining 537, 540, 541
pagination
reference link 490
used, for implementing MongoDB ODM 531
duluca/minimal-node-build-env
about 468
reference link 468
dumb-init process 450
Dynamic UI components 386
Dynamic UI navigation 386
E
Eager loading 319, 320, 321, 322
Elastic Container Service (ECS) 168
Elastic File System (EFS) 507
elements
design, matching 211, 212, 213, 214
entities
entity relationship diagram (ERD) 339
Entity Service
enums
defining 353
environment variables
errors
troubleshooting, in browser 745, 746
events
expansion panels
reference link 616
Express 489
Express.js
routes and versioning 524, 525, 526
server, bootstrapping 523, 524
URL 490
used, for implementing RESTful APIs 519, 520, 522, 523
F
feature modules
configuring, with components and routes 317, 318
field error attribute directive 576, 577, 579, 580, 581, 582, 583, 584
filters 772
Firebase
URL 416
Firebase authentication recipe 416, 418
Firebase console
reference link 417
fixtures
about 133
afterAll() 134
afterEach() 134
beforeAll() 134
beforeEach() 134
Flexbox
reference link 189
Flux pattern 27
forms
validations 395
full-stack architecture
about 487
monorepo, configuring 491
functional prototype
Function Under Test (FUT) 129
G
Gated CI workflows
gcloud run deploy
reference link 455
generator schematics
reference link 193
GET
used, for implementing user service 563, 565
Git
Git Bash
reference link 43
GitHub
need for 42
GitHub Credentials
GitHub Desktop
GitHub flow 163, 164, 166, 167
GitHub projects
used, for planning 85
Git repository
publishing, with GitHub Desktop 63
Glacier service 729
Google Analytics
facets 707
reference link 715
Google Analytics Tag
configuring, in Tag Manager 717, 719
Google Cloud 52
Google Cloud Platform Console
reference link 455
Google Cloud Run 449, 450, 452, 453
Google Container Registry (GCR) 460
Google Firebase 51
Google Search Console dashboard
reference link 719
Google Tag Manager
adding, to Angular app 711
Google Analytics Tag, configuring 717, 719
reference link 735
Graphical User Interface (GUI) 38
grid list
reference link 616
using, for layouts 613, 614, 616
guards
role-based routing, using 409, 410
H
headless browser
configuring, for Angular 470, 471, 473
high-level UX design
defining 340
Homebrew for macOS
installing 40
home route
default routes, setting up 304
RouterLink 305
Router outlet 305
HttpClient
OpenWeatherMap APIs, discovering 112
using, to retrieve data 106
HTTP GET operation
HTTP interceptor 384, 385, 386
I
IDocument
defining, in DocumentTS library 537, 539, 541
image
building, to Docker Hub 440, 441, 442, 443, 444, 445, 446
publishing, to Docker Hub 440, 441, 442
images, push and pull
reference link 454
images, stages
builder 467
tester 467
web server 467
imports 143
infrastructure
per-user cost, calculating 720, 721
Infrastructure-as-Code (IaC) 429
in-memory auth service
implementing 374, 375, 376, 377
Integrated Development Environment (IDE) 41
interactive prototype
adding 229
building 225
interfaces
defining 353
intermediary language (IL) 16
Internet Engineering Task Force (IETF)
about 343
reference link 344
Internet Explorer (IE) 4
inventory module 331, 333, 334
J
Jasmine
about 133
fixtures 133
matchers 134
reference link 133
Jasmine, behavior-driven development
reference link 153
Jasmine, matchers
reference link 134
Jasmine test framework 753
JavaScript classes 353, 354, 355, 356, 357, 358
JSON Web Token (JWT) 343
JWT auth
custom server auth provider 550, 552, 553
GET User by ID, implementing 553, 554
middleware, authenticating 545, 547, 549, 550
JWT auth, packages
bcryptjs 542
jsonwebtoken 542
uuid 542
JWT session
K
Kanban board
used, for planning 85
Karma test framework 753
keyboard shortcut 745
L
landing page
modifying, with Angular Material Toolbar 195, 196, 197
lazy loading components, creating
reference link 317
lemon-mart
examples 431
reference link 431
LemonMart
creating 291
designing 296
high-level modules, identifying with site map 297, 298, 299
NgRx/Data library, implementing 659, 660, 661
reference link 307
URL 419
user roles, identifying 297
LemonMart project
reference link 157
lemon-mart-server 574
lightweight testing environment
configuring 473
Line of Business (LOB) 429
Line-of-Business (LOB) applications 275, 276, 277
lint checker
lint fixer
LocalCast Weather 90
localStorage 368
using, with abstract caching service 368, 369, 371, 372
local-weather-app
examples 430
reference link 431
Local Weather app
features 89
high-level architecture 91, 92
planning, with GitHub projects 85
planning, with Kanban board 85
reference link 90
Wireframe design 90
login component
implementing 387, 389, 390, 391, 392
Long-Term Support (LTS) 2
M
macOS
automation, setting up 53
major component scaffolds 774, 775
major data entities
designing 339
master/detail view
implementing, with auxiliary routes 629, 630, 631, 632
matchers 134
MatDialog documentation
reference link 398
Material Design Theme Palette Generator
reference link 309
material icons 306
reference link 311
Material Theme Builder
reference link 309
mat-error, properties
appFieldError binds 577
group binds 577
input binds 577
MatSnackBar documentation
reference link 398
Message Authentication Code (MAC) 343
metrics
about 707
minimal MEAN
Angular 489
Continuous Integration (CI) 491
Docker 491
Express 489
GitHub 491
Jasmine 491
Mongo 490
Node 490
npm 491
reference link 489
tooling 490
TypeScript 491
VS Code 491
minimal MEAN, packages
cors 489
morgan 489
minimal-node-web-server
mixed content
reference link 159
mock components 149
MockFlow WireframePro
about 225
URL 225
mock services 150, 151, 152, 153
MockStore
used, for updating unit testing components 657, 658
mock-up
home screen 227
search results 227
settings pane 228
mock-ups
leveraging, in app
Models layer 522
Model-View-Controller (MVC) , 7
Model-View-ViewModel (MVVM) , 8
Mongo 490
MongoDB
URL 490
MongoDB aggregation
reference link 541
MongoDB ODM
connecting, to database 534, 536, 537
implementing, with DocumentTS library 531
MongoDB’s Node.js driver
reference link 531
Mongoose
URL 534
monorepo
configuring 491
Node project, configuring with TypeScript 494, 495, 496, 498, 499
structure 492
multi-root workspaces
reference link 491
multi-stage builds
reference link 468
multi-stage Dockerfiles
multi-step responsive forms
calculated properties 585, 586, 587
dynamic form arrays 588, 589, 591
repeating template behavior, reusing with directives 576
responsive layout 571, 572, 574, 575
shared components, creating 591, 593
N
Nest.js
URL 519
NetworkError 753
network issues
ngModel
reference link 249
NgRx
implementing, for LocalCast Weather 644, 646
setting up 648
versus BehaviorSubject 646, 648
NgRx actions
ngRxBasedSearch function 655
NgRx code samples
reference link 139
NgRx Console Logger
implementing 767
NgRx Data
about 659
NgRx/Data library
implementing, in LemonMart 659, 660, 661
NgRx Effects 643
NgRx, elements
action 644
dispatcher 644
effect 644
store 643
NgRx library
reference link 29
NgRx Store 643
NgRx Store DevTools
ng-tester library
about 153
reference link 153
ngx-mask library 605
Node 490
Node.js 46
Node Package Manager (npm) 41
Node project
configuring, with TypeScript 494, 495, 496, 498, 499
non-blocking I/O
reference link 490
notable Angular features
about 30
Angular 8 32
npm 692
npm packages, used for scripting cross-conf-env
reference link 496
npm scripts
implementing, in VS Code 447
npm scripts for Docker 449
about 439
setting up 439
npxs readme
reference link 63
null and undefined checking 348, 349
null coalescing operator 350
nullish coalescing operator 350, 351
O
Object-Oriented Programming (OOP) 18
Object Relational Mapper (ORM) 531
OctoPerf
reference link 722
OOP concepts
leveraging, reusable services 352, 353
OpenAPI specification
reference link 517
OpenWeather API 645
OpenWeatherMap 92
OpenWeatherMap APIs
operating system (OS) 434
optional chaining operator 351, 352
Orb registry
reference link 460
orbs
circleci/aws-cli 460
circleci/aws-ecr 460
circleci/aws-ecs 460
circleci/azure-acr 460
circleci/azure-cli 460
circleci/gcp-cli 460
circleci/gcp-cloud-run 460
circleci/gcp-gcr 460
used, for deploying CD to GCloud 460, 461, 462, 463, 464
P
Pa11y
URL 222
page views
tracking 734
pagination
used, for implementing data table 632, 634, 636, 637, 639, 640
personally identifiable information (PII) 345, 425
Pilot Light service 729
pipes 772
postman
Put User
Postman
configuring, for authenticated calls 555, 556, 557
Put User
reference link 554
requests, automating 557, 558, 559, 560
used, for generating users 554
PowerShell Gallery
reference link 55
Prebuilt Sample Container, deploying
reference link 453
pre-request scripts
reference link 558
pricing, for Cloud Run
reference link 449
PrimeNG
reference link 176
production readiness
about 158
building 158
environment variables, setting up 159
Progressive Web Apps (PWAs) 28
project’s billing settings
reference link 452
provisioning time 721
proxy
configuring, in Angular CLI 661, 662
prune command
reference link 446
Pull Requests (PR) 86
PUT
implementation, with caching 565
Put User
R
React
reference link 29
Reactive data streams 21, 22, 23
reactive development paradigm 19, 20
Reactive Extensions (RxJS) 21
reactive forms
about 237
reference link 237
versus template-driven forms 236, 237
Reactive transformations
implementing 118, 119, 120, 121, 122
React.js architecture 29
Receipt Look-up 326
recovery point objective (RPO) 728
recovery time objective (RTO) 728
reducers
Redux DevTools
debugging 767
Redux DevTools extension
installation link 768
reliable cloud scaling 728, 729
Representational State Transfer (REST) 8
resolve guard
used, for loading data 624, 625, 626
Resolve guards 410
Responsive APIs
reference link 193
RESTful APIs
implementing, with Express.js 519, 520, 522, 523
Swagger, configuring with Express 527, 528, 529
web API, designing with Swagger 512, 513
reusable form part
implementing 600, 602, 603, 605
role-based routing
router-enabled modules
home route, designing 302
Router-first app
Router-first architecture
code reuse, maximizing with ES 289, 290
code reuse, maximizing with TypeScript 289, 291
data-driven design, achieving 284
decoupled component architecture, enforcing 286
lazy loading, designing 283, 284
roadmap, developing 283
scope, establishing 283
user controls and components, differentiating 288
walking-skeleton, implementing 284
router guards 410
router tree
RxJS
debugging 770
RxJS Event Stream
breakpoint, debugging
tapping 770
RxJS functions 777
RxJS operators 777
S
salted password hashing
reference link 345
scalable environment
cost per user, calculating 729
scaling architecture
with reusable form parts 596, 597
Scoop
installation link 40
search engine optimization (SEO) 719
secure sockets layer (SSL) 345
Self Hosting section
reference link 311
semver
reference link 10
Separation of Concerns (SoC) 119
service data
retrieving, from component 115, 116, 117
Services layer 522
services (Svc) 281
sessionStorage 368
should create test 151
side-by-side development
side navigation 402, 403, 404, 405, 406, 407, 408
Single File Component (SFC) 303
single-page applications (SPAs) 24
Single-Page Applications (SPAs) 1
SiteMap tool
reference link 298
Stack Overflow
reference link 42
StandardJS
reference link 77
starter commands 774
state management 26
Flux pattern 27
Static APIs
reference link 193
static files
store actions
Studio 3T
URL
style checker
style fixer
Swagger
configuring, with Express 527, 528, 529
used, for designing web API 512, 513
Swagger YAML file
preview 517
T
target server utilization calculation
blue/green deployments 734
prescheduled provisioning 733
template-driven forms 237
using, with two-way binding syntax 248, 250
versus reactive forms 236, 237
template literals
reference link 97
TestBed
configuring 139
TestBed, features
test doubles
about 144
test doubles, types
about 144
mocks 148
spies 148
stubs 148
test-driven development (TDD) 480
tester 470
time to interactive (TTI) 33
token-based authentication scheme, components
auth service 344
client-side 344
server-side 344
tooling 490
transport layer security (TLS) 345
Trilon
URL 519
troubleshooting, Google Cloud Run
reference link 456
TypeScript operators
conditional or ternary operator 349, 350
null and undefined checking 348, 349
null coalescing operator 350
nullish coalescing operator 350, 351
optional chaining operator 351, 352
used, for data handling 347, 348
TypeScript scaffolds 777
U
UI elements
Angular component, adding 94, 95, 97, 99
Angular component, demystifying 100
crafting, with components and interfaces 93
model, defining with interfaces 101, 102, 103, 104, 105, 106
UI service 397, 398, 399, 400, 401
unit test execution
components, updating with MockStore 657, 658
implementing, for reducers and selectors 656, 657
unit testing errors 753
unit tests
unit tests, in Angular
reference link 139
update from master feature 167
User Account Control (UAC) 39
user interface (UI) 6
User Management 326
users
editing 624
generating, with Postman 554
user service
implementing, with GET 563, 565
V
validations
for forms 395
Vercel Now 51
about 168
URL 168
Vercel Now, documentation
reference link 170
viewUser component
reusing, with binding data 627, 628, 629
reusing, with route data 627, 628, 629
Virtual Machines (VMs) 434
Visual Studio Code
Visual Studio Code (VS Code) 49
URL 50
VS Code
auto save, enabling 74
code linting, scripting 77, 78
code styling, scripting 77, 78
Docker extensions, implementing 448, 449
IDE extensions 76
npm scripts, implementing 447
optimizing, for Angular 72
VS Code Auto Fixer
VS Code’s Source Control 494
W
walking skeleton 325
web API
designing, with Swagger 512, 513
web apps
containerizing, with Docker 434
Web Content Accessibility Guidelines (WCAG) 221
WebDriver
reference link 154
web frameworks
web server budget
calculating 720
Windows
automation, setting up 53
Windows Subsystem for Linux (WSL) 42
Wireframe design 90
World Wide Web Consortium (W3C) 4
Y
yet another tool (YAT) 90