Building Large-Scale Web Applications with Angular电子书

Title Page

Copyright

Building Large-Scale Web Applications with Angular

Contributors

About the authors

About the reviewer

Packt is searching for authors like you

About Packt

Why subscribe?

PacktPub.com

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Get in touch

Reviews

Building Our First App - 7 Minute Workout

What is 7 Minute Workout?

Downloading the code base

Setting up the build

Angular CLI

Code transpiling

Organizing code

Feature folders

The 7 Minute Workout model

First feature module

App bootstrapping

Exploring Angular modules

Comprehending Angular modules

Our first component - WorkoutRunnerComponent

Component lifecycle hooks

Building the 7 Minute Workout view

The Angular binding infrastructure

Interpolations

Property binding

Property versus attribute

Property binding continued...

Interpolation syntactic sugar over property binding

Quick expression evaluation

Side effect-free binding expressions

Angular directives

Target selection for binding

Attribute binding

Style and class binding

Attribute directives

Styling HTML with ngClass and ngStyle

Learning more about an exercise

Adding descriptions and video panels

Component with inputs

Structural directives

The ever-so-useful NgForOf

Asterisk (*) in structural directives

NgForOf performance

Angular security

Trusting safe content

OnChange life cycle event

Formatting exercise steps with innerHTML binding

Displaying the remaining workout duration using pipes

Angular pipes

Pipe chaining

Implementing a custom pipe - SecondsToTimePipe

Adding the next exercise indicator using ngIf

Pausing an exercise

The Angular event binding infrastructure

Event bubbling

Event binding an $event object

Two-way binding with ngModel

Cross-component communication using Angular events

Tracking exercise progress with audio

Building Angular directives to wrap HTML audio

Creating WorkoutAudioComponent for audio support

Understanding template reference variables

Template variable assignment

Using the @ViewChild decorator

The @ViewChildren decorator

Integrating WorkoutAudioComponent

Exposing WorkoutRunnerComponent events

The @Output decorator

Eventing with EventEmitter

Raising events from WorkoutRunnerComponent

Component communication patterns

Injecting a parent component into a child component

Using component life cycle events

Sibling component interaction using events and template variables

Summary

Personal Trainer

Personal Trainer requirements

Getting started with the code for Personal Trainer

Using the Personal Trainer model in Workout Builder services

The Personal Trainer layout

Personal Trainer navigation with routes

Getting started with Personal Trainer navigation

Introducing child routes to Workout Builder

Adding the child routing component

Updating the WorkoutBuilder component

Updating the Workout Builder module

Updating App Routing module

Putting it all together

Lazy loading of routes

Integrating sub- and side-level navigation

Sub-level navigation

Side navigation

Implementing workout and exercise lists

WorkoutService as a workout and exercise repository

Workout and exercise list components

Workout and exercise list views

Workouts list views

Exercises list views

Building a workout

Finishing left nav

Adding WorkoutBuilderService

Adding exercises using ExerciseNav

Implementing the Workout component

Route parameters

Route guards

Implementing the resolve route guard

Implementing the Workout component continued...

Implementing the Workout template

Angular forms

Template-driven and reactive forms

Template-driven forms

Getting started

Using NgForm

ngModel

Using ngModel with input and textarea

Using ngModel with select

Angular validation

ngModel

The Angular model state

Angular CSS classes

Workout validation

Displaying appropriate validation messages

Adding more validation

Managing multiple validation messages

Custom validation messages for an exercise

Saving the workout

More on NgForm

Fixing the saving of forms and validation messages

Reactive forms

Getting started with reactive forms

Using the FormBuilder API

Adding the form model to our HTML view

Adding form controls to our form inputs

Adding validation

Adding dynamic form controls

Saving the form

Custom validators

Integrating a custom validator into our forms

Configuration options for running validation

Summary

Supporting Server Data Persistence

Angular and server interactions

Setting up the persistence store

Seeding the database

The basics of the HTTPClient module

Personal Trainer and server integration

Loading exercise and workout data

Loading exercise and workout lists from a server

Adding the HTTPClient module and RxJS to our project

Updating workout-service to use the HTTPClient module and RxJS

Modifying getWorkouts() to use the HTTPClient module

Updating the workout/exercise list pages

Mapping server data to application models

Loading exercise and workout data from the server

Fixing the builder services

Updating the resolvers

Fixing the Workout and Exercise components

Performing CRUD on exercises/workouts

Creating a new workout

Updating a workout

Deleting a workout

Fixing the upstream code

Using promises for HTTP requests

The async pipe

Cross-domain access and Angular

Using JSONP to make cross-domain requests

Cross-origin resource sharing

Handling workouts not found

Fixing the 7 Minute Workout app

Summary

Angular Directives in Depth

Building a remote validator directive

Validating workout names using async validators

Building a busy indicator directive

Injecting optional dependencies with the @Optional decorator

Implementation one – using renderer

Angular renderer, the translation layer

Host binding in directives

Property binding using @HostBinding

Attribute binding

Event binding

Implementation two - BusyIndicatorDirective with host bindings

Directive injection

Injecting directives defined on the same element

Injecting directive dependency from the parent

Injecting a child directive (or directives)

Injecting descendant directive(s)

Building an Ajax button component

Transcluding external components/elements into a component

Content children and view children

Injecting view children using @ViewChild and @ViewChildren

Tracking injected dependencies with QueryList

Injecting content children using @ContentChild and @ContentChildren

Dependency injection using viewProvider

Understanding structural directives

TemplateRef

ViewContainerRef

Component styling and view encapsulation

Overview of Shadow DOM

Shadow DOM and Angular components

Summary

1.21 Gigawatt - Flux Pattern Explained

Core concepts overview

A uniform data flow

Action – capture the intent

Dispatcher – the spider in the web

Listening to the dispatcher

The store – managing state, data retrieval, and callbacks

The view

Demoing a uniform data flow

Creating a selection view

Adding the dispatcher

Adding the store

Adding a selected view

Running the demo

Adding more actions to our flow

Cleaning up the view

Cleaning up the store

Adding EventEmitter

Adding to and cleaning up the register method

Further improvements

Adding immutability

Summarizing

Adding AJAX calls

An even bigger solution

Summary

Functional Reactive Programming

Recursion

No more loops

Reoccurring pattern

Summarise

Count

Width

Asynchronous data streams

Comparing lists to async streams – preparing for RxJS

Combining the functional programming paradigm with streams

Projection

Filtering

Combining mindsets

Summary

Manipulating Streams and Their Values

Starting out

Understanding operators

Stream in a stream

AJAX

fetch()

ajax() operator

Cascading calls

A deeper look

Creation operators

of() operator

from() operator

range() operator

fromEvent() operator

Combination

merge() operator

combineLatest()

zip()

concat()

Mathematical

max

min

sum

Time

interval() operator

timer() operator

delay() operator

sampleTime() operator

debounceTime() operator

Grouping

buffer() operator

bufferTime() operator

Thinking in streams

Summary

RxJS Advanced

Hot, cold, and warm Observables

Making a stream hot

Warm streams

Subjects

Using Subject for cascading lists

BehaviorSubject

ReplaySubject

AsyncSubject

Error handling

Catch and continue

Ignoring the error

Retry

Advanced Retry

Marble testing

Set up

Writing your first marble test

Fleshing out with more tests

Pipeable operators

Creating reusable operators with let()

Shifting to pipeable operators

Summary

Create a Local Weather Web Application

Planning a feature road map using Waffle

Setting up a Waffle project

Creating issues for your Local Weather app

Crafting UI elements using components and interfaces

Adding an Angular component

Define your model using interfaces

Using Angular Services and HttpClient to retrieve data

Creating a new Angular Service

Inject dependencies

Discover OpenWeatherMap APIs

Storing environment variables

Implementing an HTTP GET operation

Retrieving service data from a component

Transform data using RxJS

Understanding Reactive programming

Implementing Reactive transformations

Summary

Prepare Angular App for Production Release

Null guarding in Angular

Property initialization

Safe navigation operator

Null guarding with *ngIf

Containerizing the app using Docker

Installing Docker

Setting up Docker scripts

Docker extension in VS Code

NPM Scripts in VS Code

Deploying containerized app

Zeit Now

Configuring the Now CLI tool

Deploying

Summary

Enhance Angular App with Angular Material

Adding Material Components to your app

Angular Material schematics

Modifying landing page with Material Toolbar

Representing weather in Material Card

Accessibility

Card header and content

Material typography

Applying typography

Updating the tagline as center-aligned caption

Updating Current Weather card layout

Implementing Layout Scaffolding

Aligning elements

Styling elements

Fine-tuning styles

Tweaking to match design

Updating unit tests

Updating Angular Material

Updating Angular Material

Summary

Create a Router-First Line-of-Business App

Angular cheat sheet

Binding

Built-in directives

Common pipes

Starter commands, major components, and CLI scaffolds

Configure Angular CLI autocomplete

Router-first architecture

Creating LemonMart

Creating a Router-first app

Configuring Angular.json and Package.json

Configuring Material and Styles

Designing LemonMart

Identifying user roles

Identifying high-level modules with site map

Generating router-enabled modules

Designing the home route

Setting up default routes

RouterLink

Router outlet

Branding, Custom, and Material Icons

Branding

Color palette

Implementing browser manifest and icons

Custom icons

Material icons

Angular Augury

Component Tree

Break point debugging

Router Tree

NgModules

Submodules with lazy loading

Configuring submodules with components and routes

Eager loading

Lazy loading

Completing the walking skeleton

Manager module

User module

POS and inventory modules

POS module

Inventory module

Inspect router tree

Common Testing Module

Summary

Continuous Integration and API Design

Continuous Integration

Containerizing build environment

Builder

Debugging build environment

Tester

Configuring a headless browser for Angular

Configuring testing environment

Web server

CircleCI

Code coverage report

API design

Designing around major data components

Defining entities

Swagger

Defining a Swagger YAML file

Creating a Swagger server

OpenAPI 3.0 with unofficial tooling

Swagger 2.0 with official tooling

Enable Cross-Origin Resource Sharing (CORS)

Verifying and publishing Swagger server

Summary

Design Authentication and Authorization

Wrapping up mock-ups

Design authentication and authorization workflow

Add auth service

Implement a basic authentication service

Implementing the login component

Conditional navigation

Common validations

UI service

Caching with cookie and localStorage

JSON Web Token life cycle

HTTP interceptor

Side navigation

Log out

Role-based routing after login

Router Guards

Auth Guard

Auth Service Fake and Common Testing Providers

Summary

Angular App Design and Recipes

User class and object-oriented programming

Reusing components

User profile with multi-step auth-enabled responsive forms

Form groups

Stepper and responsive layout

Calculated properties and DatePicker

Type ahead support

Dynamic form arrays

ViewUser component

Review component and Save form

Resolve guard

Reusable component with binding and route data

Master/detail view auxiliary routes

Data table with pagination

Updating Unit Tests

Summary

Highly-Available Cloud Infrastructure on AWS

Right-sizing infrastructure

Optimizing instance

Simple load testing

Deploy to AWS ECS Fargate

Configuring ECS Fargate

Creating a Fargate Cluster

Creating container repository

Creating task definition

Creating elastic load balancer

Creating cluster service

Configuring the DNS

Getting the DNS Name

Prep Angular app

Adding npm Scripts for AWS

Publish

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think