Why Angular?

479 Pages·2017·5.77 MB·English

Table of Contents
Introduction 1.1
License 1.2
Why Angular? 1.3
EcmaScript 6 and TypeScript Features 2.1
ES6 2.1.1
Classes 2.1.1.1
Refresher on 'this' 2.1.1.2
Arrow Functions 2.1.1.3
Template Strings 2.1.1.4
Inheritance 2.1.1.5
Delegation 2.1.1.6
Constants and Block Scoped Variables 2.1.1.7
...spread and ...rest 2.1.1.8
Destructuring 2.1.1.9
Modules 2.1.1.10
TypeScript 2.1.2
Getting Started With TypeScript 2.1.2.1
Working With tsc 2.1.2.2
Typings 2.1.2.3
Linting 2.1.2.4
TypeScript Features 2.1.2.5
TypeScript Classes 2.1.2.6
Interfaces 2.1.2.7
Shapes 2.1.2.8
Type Inference 2.1.2.9
Type Keyword 2.1.2.10
Decorators 2.1.2.11
Property Decorators 2.1.2.12
Class Decorators 2.1.2.13
Parameter Decorators 2.1.2.14
2
The JavaScript Toolchain 3.1
Source Control: git 3.1.1
The Command Line 3.1.2
Command Line JavaScript: NodeJS 3.1.3
Back-End Code Sharing and Distribution: npm 3.1.4
Module Loading, Bundling and Build Tasks: Webpack 3.1.5
Chrome 3.1.6
Bootstrapping an Angular Application 4.1
Understanding the File Structure 4.1.1
Bootstrapping Providers 4.1.2
Components in Angular 5.1
Creating Components 5.1.1
Application Structure with Components 5.1.2
Passing Data into a Component 5.1.2.1
Responding to Component Events 5.1.2.2
Using Two-Way Data Binding 5.1.2.3
Accessing Child Components from Template 5.1.2.4
Projection 5.1.3
Structuring Applications with Components 5.1.4
Using Other Components 5.1.5
Directives 6.1
Attribute Directives 6.1.1
NgStyle Directive 6.1.1.1
NgClass Directive 6.1.1.2
Structural Directives 6.1.2
NgIf Directive 6.1.2.1
NgFor Directive 6.1.2.2
NgSwitch Directives 6.1.2.3
Using Multiple Structural Directives 6.1.2.4
Advanced Components 7.1
Component Lifecycle 7.1.1
Accessing Other Components 7.1.2
View Encapsulation 7.1.3
ElementRef 7.1.4
3
Observables 8.1
Using Observables 8.1.1
Error Handling 8.1.2
Disposing Subscriptions and Releasing Resources 8.1.3
Observables vs Promises 8.1.4
Using Observables From Other Sources 8.1.5
Observables Array Operations 8.1.6
Cold vs Hot Observables 8.1.7
Summary 8.1.8
Angular Dependency Injection 9.1
What is DI? 9.1.1
DI Framework 9.1.2
Angular's DI 9.1.3
@Inject() and @Injectable 9.1.3.1
Injection Beyond Classes 9.1.3.2
Avoiding Injection Collisions: OpaqueToken 9.1.3.3
The Injector Tree 9.1.3.4
Http 10.1
Making Requests 10.1.1
Catching Rejections 10.1.2
Catch and Release 10.1.2.1
Cancel a Request 10.1.2.2
Retry 10.1.2.3
Search with flatMap 10.1.3
Enhancing Search with switchMap 10.1.4
Requests as Promises 10.1.5
Change Detection 11.1
Change Detection Strategies in Angular 1 vs Angular 2 11.1.1
How Change Detection Works 11.1.2
Change Detector Classes 11.1.3
Change Detection Strategy: OnPush 11.1.4
Enforcing Immutability 11.1.5
Additional Resources 11.1.6
4
Zone.js 12.1
Advanced Angular 13.1
Directives 13.1.1
Creating an Attribute Directive 13.1.1.1
Listening to an Element Host 13.1.1.1.1
Setting Properties in a Directive 13.1.1.1.2
Creating a Structural Directive 13.1.1.2
View Containers and Embedded Views 13.1.1.2.1
Providing Context Variables to Directives 13.1.1.2.2
AoT 13.1.2
AoT limitations 13.1.2.1
AoT Configuration 13.1.2.2
Immutable.js 14.1
What is Immutability? 14.1.1
The Case for Immutability 14.1.2
JavaScript Solutions 14.1.3
Object.assign 14.1.3.1
Object.freeze 14.1.3.2
Immutable.js Basics 14.1.4
Immutable.Map 14.1.4.1
Map.merge 14.1.4.1.1
Nested Objects 14.1.4.2
Deleting Keys 14.1.4.2.1
Maps are Iterable 14.1.4.2.2
Immutable.List 14.1.4.3
Performance and Transient Changes 14.1.4.4
Official Documentation 14.1.4.5
Pipes 15.1
Using Pipes 15.1.1
Custom Pipes 15.1.2
Stateful Pipes 15.1.3
Forms 16.1
Getting Started 16.1.1
Template-Driven Forms 16.1.2
5
Nesting Form Data 16.1.2.1
Using Template Model Binding 16.1.2.2
Validating Template-Driven Forms 16.1.2.3
Reactive/Model-Driven Forms 16.1.3
FormBuilder Basics 16.1.3.1
Validating FormBuilder Forms 16.1.3.2
FormBuilder Custom Validation 16.1.3.3
Visual Cues for Users 16.1.4
Modules 17.1
What is an Angular Module? 17.1.1
Adding Components, Pipes and Services to a Module 17.1.2
Creating a Feature Module 17.1.3
Directive Duplications 17.1.4
Lazy Loading a Module 17.1.5
Lazy Loading and the Dependency Injection Tree 17.1.6
Shared Modules and Dependency Injection 17.1.7
Sharing the Same Dependency Injection Tree 17.1.8
Routing 18.1
Why Routing? 18.1.1
Configuring Routes 18.1.2
Redirecting the Router to Another Route 18.1.3
Defining Links Between Routes 18.1.4
Dynamically Adding Route Components 18.1.5
Using Route Parameters 18.1.6
Defining Child Routes 18.1.7
Controlling Access to or from a Route 18.1.8
Passing Optional Parameters to a Route 18.1.9
Using Auxiliary Routes 18.1.10
State Management 19.1
Redux and @ngrx 19.1.1
Adding @ngrx to your Project 19.1.1.1
Defining your Main Application State 19.1.1.2
Example Application 19.1.1.3
6
Reading your Application State using Selectors 19.1.1.4
Actions 19.1.1.5
Modifying your Application State by Dispatching Actions 19.1.1.6
Reducers and Pure Functions 19.1.1.7
Reducers as State Management 19.1.1.8
Creating your Application's Root Reducer 19.1.1.9
Configuring your Application 19.1.1.10
Implementing Components 19.1.1.11
Component Architecture 19.1.1.12
Side Effects 19.1.1.13
Getting More From Redux and @ngrx 19.1.1.14
TDD Testing 20.1
The Testing Toolchain 20.1.1
Test Setup 20.1.2
Filename Conventions 20.1.2.1
Karma Configuration 20.1.2.2
TestBed Configuration (Optional) 20.1.2.3
Typings 20.1.2.4
Executing Test Scripts 20.1.2.5
Simple Test 20.1.3
Using Chai 20.1.4
Testing Components 20.1.5
Verifying Methods and Properties 20.1.5.1
Injecting Dependencies and DOM Changes 20.1.5.2
Overriding Components for Testing 20.1.5.2.1
Testing Asynchronous Actions 20.1.5.3
Refactoring Hard-to-Test Code 20.1.5.4
Testing Services 20.1.6
Testing Strategies for Services 20.1.6.1
Testing HTTP Requests 20.1.6.2
Using MockBackend 20.1.6.2.1
Alternative Mocking Strategy 20.1.6.2.2
Testing JSONP and XHR Back-Ends 20.1.6.2.3
Executing Tests Asynchronously 20.1.6.3
7
Testing Redux 20.1.7
Testing Simple Actions 20.1.7.1
Testing Complex Actions 20.1.7.2
Testing Reducers 20.1.7.3
Afterthoughts 20.1.7.4
Migrating Angular 1.x Projects to Angular 2 21.1
Migration Prep 21.1.1
Upgrading To Angular 1.3+ Style 21.1.1.1
Using Webpack 21.1.1.2
Migrating To TypeScript 21.1.1.3
Choosing an Upgrade Path 21.1.2
Avoiding Total Conversion 21.1.3
Using ng-metadata (Angular 1.x Using 2 Style) 21.1.4
Bootstrapping ng-metadata 21.1.4.1
Components and Services 21.1.4.2
Using ng-upgrade (Angular 1.x Coexisting With Angular 2) 21.1.5
Order of Operations 21.1.5.1
Replacing Services with TypeScript Classes 21.1.5.2
Bootstrapping ng-upgrade 21.1.5.3
Downgrading Components 21.1.5.4
Upgrading Components 21.1.5.5
Projecting Angular 1 Content into Angular 2 Components 21.1.5.6
Transcluding Angular 2 Components into Angular 1 Directives 21.1.5.7
Injecting Across Frameworks 21.1.5.8
Project Setup 22.1
Webpack 22.1.1
Installation and Usage 22.1.1.1
Loaders 22.1.1.2
Plugins 22.1.1.3
Summary 22.1.1.4
NPM Scripts Integration 22.1.2
Angular CLI 23.1
Setup 23.1.1
8
Creating a New App 23.1.2
Serving the App 23.1.3
Creating Components 23.1.4
Creating Routes 23.1.5
Creating Other Things 23.1.6
Testing 23.1.7
Linting 23.1.8
CLI Command Overview 23.1.9
Adding Third Party Libraries 23.1.10
Integrating an Existing App 23.1.11
Accessibility in Angular 24.1
Why Make my Application Accessible? 24.1.1
Key Concerns of Accessible Web Applications 24.1.2
Semantic Markup 24.1.2.1
Keyboard Accessibility 24.1.2.2
Visual Assistance 24.1.2.3
Testing for Accessibility 24.1.3
Is my Application Readable? 24.1.3.1
Is my Application Predictable? 24.1.3.2
Is my Application Navigable? 24.1.3.3
Testing with Screen Readers 24.1.3.4
Additional Resources 24.1.4
Internationalization in Angular 25.1
What is the process like and how is involved? 25.1.1
Marking text in our templates 25.1.2
Extracting translation text using the Angular CLI 25.1.3
How to import the completed translation files 25.1.4
Using the AoT Compiler 25.1.4.1
Using the JiT Compiler 25.1.4.2
Glossary 26.1
Further Reading And Reference 26.2
9
10