Building Large-scale Web Applications with Angular by Chandermani Arora -- Read -- Imperial Library of Trantor

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

← Prev
Back
Next →

← Prev
Back
Next →