Angular 6 for Enterprise-Ready Web Applications电子书

Title Page

Copyright and Credits

Angular 6 for Enterprise-Ready Web Applications

Packt Upsell

Why subscribe?

PacktPub.com

Contributors

About the author

About the reviewers

Packt is searching for authors like you

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

Setting Up Your Development Environment

CLI package managers

Install Chocolatey for Windows

Installing Homebrew for macOS

Git and GitHub Desktop

Why use GitHub?

Why use GitHub Desktop?

Installing Git and GitHub Desktop

Node.js

Existing Node.js Installation

Installing Node.js

Visual Studio Code

Installing Visual Studio Code

Automation for Windows and macOS

Summary

Further reading

Create a Local Weather Web Application

Introduction to Angular

Angular's philosophy

What's new in Angular 6?

Angular in Full-Stack Architecture

Wireframe design

High level architecture

Folder structure

Set up your development directory

Generate your Angular application

Installing Angular CLI

Initializing Angular app

Publishing Git Repository using GitHub Desktop

Inspecting and updating package.json

Commiting code using VS Code

Running your Angular app

Optimizing VS Code for Angular

IDE settings

IDE extensions

Coding style

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

Angular unit tests

Unit test execution

Declarations

Providers

Imports

Test doubles

Jasmine specs

Angular e2e tests

e2e test execution

e2e spec

Troubleshooting common Angular errors

Debugging with Chrome Developer Tools

Optimizing Chrome Dev Tools

Troubleshooting network issues

Investigating console errors

Karma, Jasmine, and Unit Testing errors

NetworkError

Generic ErrorEvents

Debugging with Visual Studio Code

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

Staying Up to Date with Angular Updates

A brief history of web frameworks

Updating Node

n - Node version manager for macOS

Updating npm and Global npm packages

Global Npm packages

Npm fails to install a global tool on Windows

Updating Angular

Angular update guide

Take stock of your current version

Using Angular Update Guide

Updating your Angular app

Pre-upgrade checklist

Before updating

During the Update

Incompatible peer dependencies

Continuing the update

After the update

Post Update Checklist

Manual update

Testing performance

Addressing security vulnerabilities

Updating your web server

Updating Docker image

Summary

Enhance Angular App with Angular Material

Angular Material

Angular Material setup and performance

Installing Angular Material

Automatically

Manually

Understanding Material's components

Manually configuring Angular Material

Importing modules

Importing theme

Adding Material Icon font

Angular Flex Layout

Responsive layouts

Installing Angular Flex Layout

Layout basics

Flex Layout APIs for DOM containers

Flex Layout APIs for DOM elements

Flex Layout APIs for any element

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

Custom themes

Advanced themes

Updating Angular Material

Take stock of your current versions

Check on the latest available versions

Updating Angular Material

Summary

Reactive Forms and Component Interaction

Interactive prototype

MockFlow WireFramePro

Building the mock-up

Home screen

Search results

Settings pane

Adding interactivity

Exporting the functional prototype

Searching with user input

Adding Angular Reactive Forms

Adding and verifying components

Adding search to weather service

Implementing search

Limiting user inputs with throttle/debounce

Implementing input validation and error messaging

Template driven forms with two-way binding

Enabling component interaction

Global events

Child-parent relationships with event emitters

Parent-child relationships with input binding

Sibling interactions with subjects

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 service with caching, GET and POST

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

Creating a secure AWS account

Securing secrets

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

AWS Billing

Summary

Google Analytics and Advanced Cloud Ops

Collecting Analytics

Adding Google Tag Manager to Angular App

Set up Google Tag Manager

Setting up Google Analytics

Configuring Google Analytics Tag in Tag Manager

Budgeting and scaling

Calculating per user cost

Advanced load testing

Reliable Cloud Scaling

Cost per user in a scalable environment

Calculating target server utilization

Pre-scheduled provisioning

Blue-Green deployments

Revising estimates with metrics

Measuring actual use

Creating a custom event

Adding custom events in Angular

Advanced Analytics events

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think