Angular 4 · Pocket Primer by Campesato, Oswald -- Read -- Imperial Library of Trantor

Index

Cover Title Page Copyright Dedication Contents Preface 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

NodeJS 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

Summary

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 Summary

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

D3 and Angular

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 Summary

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

Summary

Chapter 5: Forms, Pipes, and Services

Overview of Angular Forms

Reactive 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 The AsyncPipe

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

Summary

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

Summary

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

What Is Flux?

What Is an Action? What Is a Reducer? The Store and Application State

What Is Redux?

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

Middleware

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

What Is Relay?

Relay Modern

Summary

Chapter 8: Angular and Mobile Apps

Mobile Development with Ionic 2

Installation and Project Creation Ionic Native

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 Other Links

Summary

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

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

RxJS Version 5

Creating Observables in Version 5 of RxJS Caching Results in RxJS

d3.express: The Integrated Discovery Environment Summary

Chapter 10: Miscellaneous Topics

Angular 4.1.0

New Features

Angular Configuration Files

The package.json Configuration File Listing 10.1: package.json The tsconfig.json Configuration File Listing 10.2: tsconfig.json

What Is AOT?

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 Compodoc

Angular and Deep Learning Summary

Index

← Prev
Back
Next →

← Prev
Back
Next →