Angular_4_Pocket_Primer

CONTENTS

Chapter 1: Quick Introduction to Angular

Supported Versions of Angular: How It Works

The Reason for Skipping Angular 3

TypeScript Version

Moving from Angular 2 to Angular

What You Need to Learn for Angular Applications

ECMA5, ES6, and TypeScript

A High-Level View of Angular

One-Way Data Binding in Angular

Tree Shaking an Angular Application

A High-Level View of Angular Applications

The Angular CLI

Installing the Angular CLI

Features of the Angular CLI

A “Hello World” Application via the Angular CLI

The Structure of an Angular Application

The Naming Convention for Angular Project Files

The index.html Web Page

Listing 1.1: index.html

Exporting and Importing Packages and Classes (Optional)

The Bootstrap File main.ts

Listing 1.2: main.ts

The Top-Level Module File app.module.ts

Listing 1.3: app.module.ts

The MetaData in @NgModule

The Top-Level Component File app.component.ts

Listing 1.4: app.component.ts

A Simple Angular Template

Listing 1.5: app.component.ts

Working with Components in Angular

The Metadata in Components

Stateful versus Stateless Components in Angular

Generating Components with the Angular CLI

Listing 1.6: student.component.ts

Listing 1.7: student.component.spec.ts

Syntax, Attributes, and Properties in Angular

Attributes versus Properties in Angular

Displaying a Button in Angular

Listing 1.8: app.component.ts

Element versus Property

Chapter 2: UI Controls and User Input

Debugging Angular Code in the Console

The ngFor Directive in Angular

Listing 2.1: app.component.ts

Angular and Radio Buttons

Listing 2.2: app.component.ts

Adding Items to a List in Angular

Listing 2.3: app.component.ts

Deleting Items from a List in Angular

Listing 2.4: app.component.ts

Angular Directives and Child Components

Listing 2.5: app.component.ts

Listing 2.6: child.component.ts

Listing 2.7: app.module.ts

The Constructor and Storing State in Angular

Listing 2.8: app.component.ts

Private Arguments in the Constructor: A Shortcut

Conditional Logic in Angular

Listing 2.9: app.component.ts

Detecting Mouse Positions in Angular Applications

Listing 2.10: app.component.ts

Listing 2.11: mousemove.ts

Listing 2.12: app.module.ts

Mouse Events and User Input in Angular

Listing 2.13: mouseevents.ts

Listing 2.14: app.component.ts

Listing 2.15: app.module.ts

Handling User Input

Listing 2.16: app.component.ts

Listing 2.17: todoinput.ts

Listing 2.18: todolist.ts

Listing 2.19: todoservice.ts

Listing 2.20: app.module.ts

The moduleId and templateUrl Properties in Angular

Listing 2.21: itemsapp.ts

Listing 2.22: itemdetails.html

Working with Custom Classes in Angular

Listing 2.23: newuser.ts

Listing 2.24: app.component.ts

Click Events in Multiple Components

Listing 2.25: app.component.ts

Listing 2.26: clickitem.ts

Working with @Input, @Output, and EventEmitter

Listing 2.27: app.component.ts

Listing 2.28: childcomponent.ts

Listing 2.29: app.module.ts

Presentational Components

Styling Elements and Shadow DOM in Angular

Listing 2.30: app.component.ts

Angular UI Components

New Features in Angular

Chapter 3: Graphics and Animation

Angular Lifecycle Methods

A Simple Example of Angular Lifecycle Methods

Listing 3.1: app.component.ts

GSAP Animation and the ngAfterContentInit() Method

Listing 3.2: main.ts

Listing 3.3: app.component.ts

Listing 3.4: ArchTubeOvals1.ts

Listing 3.5: app.module.ts

CSS3 Animation Effects in Angular

Listing 3.6: app.component.ts

Animation Effects via the “Angular Way”

Listing 3.7: app.component.ts

A Basic SVG Example in Angular

Listing 3.8: app.component.ts

Listing 3.9: MyEllipse1.ts

Listing 3.10: app.module.ts

Angular and Follow-the-Mouse in SVG

Listing 3.11: app.component.ts

Listing 3.12: MouseMove.ts

Listing 3.13: app.module.ts

Listing 3.14: app.component.ts

D3 Animation and Angular

Pure CSS3 3D Animation in Angular

Listing 3.15: index.html

Listing 3.16: Anim240Flicker3DLGrad2SkewOpacity2Reflect1DIV6.css

CSS3 and jQuery Animation Effects in Angular

Listing 3.17: index.html

Listing 3.18: app.component.ts

Listing 3.19: SkewAnim1.css

Animation Effects “the Angular Way”

Listing 3.20: app.component.html

Listing 3.21: app.component.ts

Listing 3.22: app.module.ts

Chart Tools for Angular

Chapter 4: HTTP Requests and Routing

Dependency Injection in Angular

Flickr Image Search Using jQuery and Angular

Listing 4.1: app.component.ts

Combining Promises and Observables in Angular

Listing 4.2: app.component.ts

Listing 4.3: nyt.service.ts

Listing 4.4: app.module.ts

Reading JSON Data via an Observable in Angular

Listing 4.5: app.component.ts

Listing 4.6: employees.json

Listing 4.7: app.module.ts

Multiple Concurrent Requests with forkJoin() in Angular

Listing 4.8: app.component.ts

Listing 4.9: file.service.ts

Listing 4.10: customers.json

Angular2 HTTP and Observables

TypeScript Interfaces in Angular

A Simple TypeScript Interface

Listing 4.11: employee.ts

JSON Data and TypeScript Interfaces

Listing 4.12: employees.ts

An Angular Application with a TypeScript Interface

Getting GitHub User Data in Angular

Listing 4.13: app.component.ts

HTTP GET Requests with a Simple Server

Listing 4.14: app.component.ts

Listing 4.15: posts.json

HTTP POST Requests with a Simple Server

Listing 4.16: app.component.ts

Listing 4.17: authors.json

Routing in Angular

A Routing Example in Angular

Listing 4.18: app.component.ts

Listing 4.19: about.ts

Listing 4.20: login.ts

Listing 4.21: users.ts

Listing 4.22: user.ts

Angular Routing with Webpack

Chapter 5: Forms, Pipes, and Services

Overview of Angular Forms

Template-Driven Forms

An Angular Form Example

Listing 5.1: app.component.ts

Listing 5.2: app.module.ts

Data Binding and ngModel

Third-Party UI Components

Angular Forms with FormBuilder

Listing 5.3: app.component.ts

Angular Reactive Forms

Listing 5.4: app.component.ts

Listing 5.5: app.component.html

Listing 5.6: app.module.ts

FormGroup versus FormArray

Other Form Features in Angular

Angular Forms and Bootstrap 4 (optional)

Working with Pipes in Angular

Working with Built-In Pipes

Creating a Custom Angular Pipe

Listing 5.7: app.component.ts

Listing 5.8: pipe.component.ts

Listing 5.9: user.component.ts

Listing 5.10: app.module.ts

What Are Angular Services?

Built-In Angular Services

An Angular Service Example

Listing 5.13: app.component.ts

A Service with an EventEmitter

Listing 5.14: user.component.ts

Listing 5.15: user.service.ts

Listing 5.16: app.component.ts

Listing 5.17: app.module.ts

Displaying GitHub User Data

Listing 5.18: app.component.ts

Listing 5.19: user.component.ts

Other Service-Related Use Cases

Multiple Service Instances

Single Service Instance

Services and Intercomponent Communication

Injecting Services into Services

Chapter 6: Angular and Express

A Minimalistic Node Application

Set Up a Node Environment (Optional)

Create an Express Application

Listing 6.1: server.js

Launch the Express Application

An Application with Angular and Express

Starting the Server and the Angular Application

Angular HTTP and Observables

The Server Code: package.json

Listing 6.2: package.json

The Server Code: server.js

Listing 6.3: server.js

The Angular Code

Listing 6.4: app.component.ts

Concurrent Requests and Angular (Version 2)

How to Start the Express Server Code

The Angular Code

Listing 6.5: app.component.ts

An Express Application with MongoDB (Part 1)

Listing 6.6: package.json

The Server-Side Custom Files (Part 2)

The app.js File

Listing 6.7: app.js

The index.js File

Listing 6.8: index.js

The userlist.jade Template

Listing 6.9: userlist.jade

Launching the Server-Side Application

An Angular Application with Express

Listing 6.10: app.component.ts

Listing 6.11: app.js

Angular and Japanese Text (Optional)

Listing 6.12: load-japanese.js

Angular Universal

The Server File main.server.ts

Listing 6.13: main.server.js

The Web Page index.html

Listing 6.14: index.html

The TypeScript File app.ts

Listing 6.15: app.ts

Working with Microservices (Optional)

Advantages of Microservices

Disadvantages of Microservices

Chapter 7: Flux, Redux, GraphQL, Apollo, and Relay

What Is an Action?

What Is a Reducer?

The Store and Application State

Data Structures for Application Data

When Should You Use Redux?

Simple Examples of Reducers

A Reducer to Add/Subtract Numeric Values

A Reducer to Add/Remove Strings from an Array

Redux Reducers Are Synchronous

The Redux Store

What Is GraphQL?

GraphQL versus REST

GraphQL Queries

Defining a Type System in GraphQL

Useful GraphQL Links

What Is Apollo?

Launching the Apollo Server

Launching the Angular Client

Project Structure in the Angular Client

Listing 7.1: app.module.ts

Chapter 8: Angular and Mobile Apps

Mobile Development with Ionic 2

Installation and Project Creation

The Project Structure of Ionic Applications

Listing 8.1: app.component.ts

Listing 8.2: app.module.ts

Retrieving GitHub User Data in an Ionic Application

Listing 8.3: github.ts

Listing 8.4: app.component.ts

Listing 8.5: app.module.ts

Listing 8.6: app.html

What Is NativeScript?

Installation and New Project Creation

Angular and NativeScript

Working with React Native

Setup Steps for React Native

How to Create a React Native Application

Listing 8.7: index.android.ts

Deploying React Native Apps to a Mobile Device

Angular and React Native

Listing 8.8: NG2RNGraphics.ts

React Native versus NativeScript: A High-Level Comparison

Angular Mobile Toolkit

Creating a Mobile Project

The manifest.webapp File

Listing 8.9: manifest.webapp

Progressive Web Apps (Optional)

Web Workers and Service Workers

Components of a PWA

Chapter 9: Functional Reactive Programming

What Is Functional Reactive Programming (FRP)?

The Observer Pattern

Handling Asynchronous Events

Promises and Asynchronous Events

Using Operators without FRP

An Analogy Regarding Observables

JavaScript Files for RxJS

Intermediate and Terminal Operators

The subscribe() and unsubscribe() Operators

The subscribe() and forEach() Operators

Converting Data Sources to Observables

Using range() and filter() Operators

Listing 9.1 ObservableRangeFilter1.html

Using from() and map() Operators

Listing 9.2 ObservableMapUpper1.html

Using the interval(), take(), and map() Operators

Listing 9.3 ObservableTake.html

Other Intermediate Operators

The retry() Operator

A List of Merge/Join Operators

A List of Map-Related Operators

The timeout() Operator

Cold versus Hot Observables

Listing 9.4 ColdObservables1.html

Reactifying an HTML Web Page

Listing 9.5 ObservableDivElement2.html

RxJS and SVG Graphics/Animation

Listing 9.6 SVGObservables1Anim1.html

RxJS and Mouse Events in an HTML Web Page

Listing 9.7 SVGObservables1MouseMove1.html

An Observable Form

Listing 9.9 app.component.ts

Unsubscribing in Angular Applications

An RxJS and Timer Example

Listing 9.8 app.component.ts

Creating Observables in Version 5 of RxJS

Caching Results in RxJS

d3.express: The Integrated Discovery Environment

Chapter 10: Miscellaneous Topics

Angular Configuration Files

The package.json Configuration File

Listing 10.1: package.json

The tsconfig.json Configuration File

Listing 10.2: tsconfig.json

Advantages of AOT

AOT Configuration

Setting up @ngtools/webpack

Working with the ngc Compiler

The tsconfig-aot.json File

The Compilation Steps

Status of AOT, CLI, and Angular Universal

Tree Shaking and the Rollup Utility

The rollup-config.js File

Invoking the rollup Utility

Reducing the Size of Angular Applications

Reducing the Size of Bundles

Angular Change Detection

The zone.js Library

What Is Webpack?

Working with Webpack

A Simple Example of Launching Webpack

A Simple webpack.config.js File

Listing 10.3: webpack.config.js

Hot Module Reloading (HMR) and Webpack

AOT via a Modified webpack.config.js

Listing 10.4: webpack.config.js

Angular Material

Other Angular Functionality

Support for I18n and L10n in Angular Applications

Working with a Component Container

The ViewChild Decorator

Where to Specify a Service

Testing Angular Applications

Useful Angular Utilities

The Augury Chrome Extension

Displaying a Dependency Tree of Angular Components

Angular and Deep Learning