Angular 6 for Enterprise-Ready Web Applications

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