Angular 6 for Enterprise-Ready Web Applications: Deliver production-ready and cloud-scale Angular web apps

✍ Scribed by Uluca, Doguhan

• Publisher: Packt Publishing
• Year: 2018
• Tongue: English
• Leaves: 501
• Category: Library

✦ Table of Contents

Cover......Page 1
Title Page......Page 2
Copyright and Credits......Page 3
Packt Upsell......Page 4
Contributors......Page 5
Table of Contents......Page 7
Preface......Page 15
Chapter 1: Setting Up Your Development Environment......Page 20
Install Chocolatey for Windows......Page 22
Installing Homebrew for macOS......Page 23
Why use GitHub Desktop?......Page 24
Installing Git and GitHub Desktop......Page 25
Node.js......Page 26
Existing Node.js Installation......Page 27
Installing Node.js......Page 28
Installing Visual Studio Code......Page 29
Automation for Windows and macOS......Page 30
Further reading......Page 31
Chapter 2: Create a Local Weather Web Application......Page 32
Introduction to Angular......Page 33
What's new in Angular 6?......Page 36
Angular in Full-Stack Architecture......Page 39
Wireframe design......Page 40
High level architecture......Page 41
Folder structure......Page 42
Set up your development directory......Page 43
Installing Angular CLI......Page 44
Initializing Angular app......Page 45
Publishing Git Repository using GitHub Desktop......Page 46
Inspecting and updating package.json......Page 47
Commiting code using VS Code......Page 52
Running your Angular app......Page 53
IDE settings......Page 54
IDE extensions......Page 55
Coding style......Page 56
Planning a feature road map using Waffle......Page 58
Setting up a Waffle project......Page 59
Creating issues for your Local Weather app......Page 61
Crafting UI elements using components and interfaces......Page 63
Adding an Angular component......Page 64
Define your model using interfaces......Page 69
Using Angular Services and HttpClient to retrieve data......Page 73
Creating a new Angular Service......Page 74
Inject dependencies......Page 75
Discover OpenWeatherMap APIs......Page 77
Implementing an HTTP GET operation......Page 80
Retrieving service data from a component......Page 82
Transform data using RxJS......Page 84
Understanding Reactive programming......Page 85
Implementing Reactive transformations......Page 86
Summary......Page 91
Chapter 3: Prepare Angular App for Production Release......Page 93
Angular unit tests......Page 94
Unit test execution......Page 95
Declarations......Page 96
Providers......Page 97
Test doubles......Page 98
Jasmine specs......Page 101
Angular e2e tests......Page 102
e2e test execution......Page 103
Troubleshooting common Angular errors......Page 104
Debugging with Chrome Developer Tools......Page 105
Optimizing Chrome Dev Tools......Page 108
Troubleshooting network issues......Page 109
Investigating console errors......Page 110
NetworkError......Page 111
Debugging with Visual Studio Code......Page 112
Property initialization......Page 115
Safe navigation operator......Page 116
Null guarding with *ngIf......Page 117
Containerizing the app using Docker......Page 118
Installing Docker......Page 120
Setting up Docker scripts......Page 121
Docker extension in VS Code......Page 128
NPM Scripts in VS Code......Page 129
Configuring the Now CLI tool......Page 130
Deploying......Page 131
Summary......Page 132
Chapter 4: Staying Up to Date with Angular Updates......Page 133
A brief history of web frameworks......Page 134
Updating Node......Page 135
n - Node version manager for macOS......Page 136
Updating npm and Global npm packages......Page 137
Global Npm packages......Page 140
Npm fails to install a global tool on Windows......Page 141
Take stock of your current version......Page 145
Using Angular Update Guide......Page 146
Before updating......Page 148
During the Update......Page 153
Incompatible peer dependencies......Page 156
Continuing the update......Page 158
After the update......Page 160
Manual update......Page 162
Testing performance......Page 164
Addressing security vulnerabilities......Page 165
Updating your web server......Page 167
Summary......Page 168
Chapter 5: Enhance Angular App with Angular Material......Page 170
Angular Material......Page 171
Angular Material setup and performance......Page 174
Automatically......Page 176
Understanding Material's components......Page 178
Importing modules......Page 179
Importing theme......Page 181
Angular Flex Layout......Page 182
Responsive layouts......Page 184
Layout basics......Page 186
Flex Layout APIs for DOM elements......Page 187
Angular Material schematics......Page 188
Modifying landing page with Material Toolbar......Page 189
Representing weather in Material Card......Page 192
Card header and content......Page 194
Material typography......Page 196
Updating the tagline as center-aligned caption......Page 197
Updating Current Weather card layout......Page 198
Implementing Layout Scaffolding......Page 199
Aligning elements......Page 201
Styling elements......Page 202
Fine-tuning styles......Page 203
Tweaking to match design......Page 205
Custom themes......Page 209
Updating Angular Material......Page 215
Take stock of your current versions......Page 216
Check on the latest available versions......Page 217
Summary......Page 219
Chapter 6: Reactive Forms and Component Interaction......Page 220
MockFlow WireFramePro......Page 221
Building the mock-up......Page 222
Search results......Page 224
Settings pane......Page 225
Adding interactivity......Page 226
Exporting the functional prototype......Page 228
Searching with user input......Page 231
Adding Angular Reactive Forms......Page 232
Adding and verifying components......Page 233
Adding search to weather service......Page 236
Implementing search......Page 238
Limiting user inputs with throttle/debounce......Page 240
Implementing input validation and error messaging......Page 241
Template driven forms with two-way binding......Page 242
Global events......Page 244
Child-parent relationships with event emitters......Page 245
Parent-child relationships with input binding......Page 246
Sibling interactions with subjects......Page 247
Summary......Page 251
Chapter 7: Create a Router-First Line-of-Business App......Page 253
Binding......Page 254
Common pipes......Page 255
Starter commands, major components, and CLI scaffolds......Page 256
Configure Angular CLI autocomplete......Page 257
Router-first architecture......Page 258
Creating a Router-first app......Page 260
Configuring Angular.json and Package.json......Page 261
Configuring Material and Styles......Page 262
Identifying user roles......Page 263
Identifying high-level modules with site map......Page 264
Generating router-enabled modules......Page 266
Designing the home route......Page 269
Setting up default routes......Page 270
Router outlet......Page 271
Color palette......Page 272
Implementing browser manifest and icons......Page 273
Custom icons......Page 274
Material icons......Page 275
Angular Augury......Page 278
Component Tree......Page 279
Break point debugging......Page 280
Router Tree......Page 283
NgModules......Page 284
Submodules with lazy loading......Page 285
Configuring submodules with components and routes......Page 286
Eager loading......Page 288
Lazy loading......Page 290
Manager module......Page 292
User module......Page 296
POS module......Page 299
Inventory module......Page 300
Inspect router tree......Page 301
Common Testing Module......Page 303
Summary......Page 306
Chapter 8: Continuous Integration and API Design......Page 307
Containerizing build environment......Page 308
Builder......Page 309
Configuring a headless browser for Angular......Page 311
Web server......Page 314
CircleCI......Page 315
Code coverage report......Page 320
Designing around major data components......Page 324
Defining entities......Page 325
Defining a Swagger YAML file......Page 326
OpenAPI 3.0 with unofficial tooling......Page 330
Swagger 2.0 with official tooling......Page 331
Verifying and publishing Swagger server......Page 334
Summary......Page 337
Chapter 9: Design Authentication and Authorization......Page 338
Wrapping up mock-ups......Page 339
Design authentication and authorization workflow......Page 342
Add auth service......Page 343
Implement a basic authentication service......Page 344
Implementing the login component......Page 349
Conditional navigation......Page 353
Common validations......Page 355
UI service......Page 356
Caching with cookie and localStorage......Page 359
JSON Web Token life cycle......Page 362
HTTP interceptor......Page 365
Side navigation......Page 367
Log out......Page 373
Role-based routing after login......Page 374
Auth Guard......Page 376
Auth Service Fake and Common Testing Providers......Page 381
Summary......Page 384
User class and object-oriented programming......Page 385
Reusing components......Page 388
User service with caching, GET and POST......Page 389
User profile with multi-step auth-enabled responsive forms......Page 392
Form groups......Page 395
Stepper and responsive layout......Page 397
Calculated properties and DatePicker......Page 402
Type ahead support......Page 403
Dynamic form arrays......Page 404
ViewUser component......Page 407
Review component and Save form......Page 409
Resolve guard......Page 410
Reusable component with binding and route data......Page 411
Master/detail view auxiliary routes......Page 413
Data table with pagination......Page 417
Updating Unit Tests......Page 424
Summary......Page 427
Chapter 11: Highly-Available Cloud Infrastructure on AWS......Page 428
Creating a secure AWS account......Page 429
Securing secrets......Page 431
Right-sizing infrastructure......Page 432
Optimizing instance......Page 433
Simple load testing......Page 434
Deploy to AWS ECS Fargate......Page 435
Creating a Fargate Cluster......Page 436
Creating container repository......Page 438
Creating task definition......Page 439
Creating elastic load balancer......Page 441
Creating cluster service......Page 444
Configuring the DNS......Page 446
Getting the DNS Name......Page 447
Adding npm Scripts for AWS......Page 448
Publish......Page 451
AWS Billing......Page 455
Summary......Page 456
Chapter 12: Google Analytics and Advanced Cloud Ops......Page 457
Collecting Analytics......Page 458
Set up Google Tag Manager......Page 460
Setting up Google Analytics......Page 463
Configuring Google Analytics Tag in Tag Manager......Page 464
Calculating per user cost......Page 467
Advanced load testing......Page 469
Reliable Cloud Scaling......Page 475
Calculating target server utilization......Page 477
Revising estimates with metrics......Page 480
Measuring actual use......Page 481
Creating a custom event......Page 482
Adding custom events in Angular......Page 486
Advanced Analytics events......Page 489
Summary......Page 490
Other Books You May Enjoy......Page 492
Index......Page 495