Rangle.io : Angular 2 Training

498 Pages·2017·5.89 MB·English

Table of Contents
Introduction 1.1
License 1.2
Why Angular? 1.3
The Architect's Guide to Angular 2.1
Creating Functional Forms 2.1.1
EcmaScript 6 and TypeScript Features 3.1
ES6 3.1.1
Classes 3.1.1.1
Refresher on 'this' 3.1.1.2
Arrow Functions 3.1.1.3
Template Strings 3.1.1.4
Inheritance 3.1.1.5
Delegation 3.1.1.6
Constants and Block Scoped Variables 3.1.1.7
...spread and ...rest 3.1.1.8
Destructuring 3.1.1.9
Modules 3.1.1.10
TypeScript 3.1.2
Getting Started With TypeScript 3.1.2.1
Working With tsc 3.1.2.2
Typings 3.1.2.3
Linting 3.1.2.4
TypeScript Features 3.1.2.5
TypeScript Classes 3.1.2.6
Interfaces 3.1.2.7
Shapes 3.1.2.8
Type Inference 3.1.2.9
Type Keyword 3.1.2.10
Decorators 3.1.2.11
Property Decorators 3.1.2.12
2
Class Decorators 3.1.2.13
Parameter Decorators 3.1.2.14
The JavaScript Toolchain 4.1
Source Control: git 4.1.1
The Command Line 4.1.2
Command Line JavaScript: NodeJS 4.1.3
Back-End Code Sharing and Distribution: npm 4.1.4
Module Loading, Bundling and Build Tasks: Webpack 4.1.5
Chrome 4.1.6
Bootstrapping an Angular Application 5.1
Understanding the File Structure 5.1.1
Bootstrapping Providers 5.1.2
Components in Angular 6.1
Creating Components 6.1.1
Application Structure with Components 6.1.2
Passing Data into a Component 6.1.2.1
Responding to Component Events 6.1.2.2
Using Two-Way Data Binding 6.1.2.3
Accessing Child Components from Template 6.1.2.4
Projection 6.1.3
Structuring Applications with Components 6.1.4
Using Other Components 6.1.5
Directives 7.1
Attribute Directives 7.1.1
NgStyle Directive 7.1.1.1
NgClass Directive 7.1.1.2
Structural Directives 7.1.2
NgIf Directive 7.1.2.1
NgFor Directive 7.1.2.2
NgSwitch Directives 7.1.2.3
Using Multiple Structural Directives 7.1.2.4
Advanced Components 8.1
Component Lifecycle 8.1.1
Accessing Other Components 8.1.2
3
View Encapsulation 8.1.3
ElementRef 8.1.4
Observables 9.1
Using Observables 9.1.1
Error Handling 9.1.2
Disposing Subscriptions and Releasing Resources 9.1.3
Observables vs Promises 9.1.4
Using Observables From Other Sources 9.1.5
Observables Array Operations 9.1.6
Cold vs Hot Observables 9.1.7
Summary 9.1.8
Angular Dependency Injection 10.1
What is DI? 10.1.1
DI Framework 10.1.2
Angular's DI 10.1.3
@Inject() and @Injectable 10.1.3.1
Injection Beyond Classes 10.1.3.2
Avoiding Injection Collisions: OpaqueToken 10.1.3.3
The Injector Tree 10.1.3.4
Http 11.1
Making Requests 11.1.1
Catching Rejections 11.1.2
Catch and Release 11.1.2.1
Cancel a Request 11.1.2.2
Retry 11.1.2.3
Search with flatMap 11.1.3
Enhancing Search with switchMap 11.1.4
Requests as Promises 11.1.5
Change Detection 12.1
Change Detection Strategies in Angular 1 vs Angular 2 12.1.1
How Change Detection Works 12.1.2
Change Detector Classes 12.1.3
Change Detection Strategy: OnPush 12.1.4
4
Enforcing Immutability 12.1.5
Additional Resources 12.1.6
Zone.js 13.1
Advanced Angular 14.1
Directives 14.1.1
Creating an Attribute Directive 14.1.1.1
Listening to an Element Host 14.1.1.1.1
Setting Properties in a Directive 14.1.1.1.2
Creating a Structural Directive 14.1.1.2
View Containers and Embedded Views 14.1.1.2.1
Providing Context Variables to Directives 14.1.1.2.2
AoT 14.1.2
AoT limitations 14.1.2.1
AoT Configuration 14.1.2.2
Immutable.js 15.1
What is Immutability? 15.1.1
The Case for Immutability 15.1.2
JavaScript Solutions 15.1.3
Object.assign 15.1.3.1
Object.freeze 15.1.3.2
Immutable.js Basics 15.1.4
Immutable.Map 15.1.4.1
Map.merge 15.1.4.1.1
Nested Objects 15.1.4.2
Deleting Keys 15.1.4.2.1
Maps are Iterable 15.1.4.2.2
Immutable.List 15.1.4.3
Performance and Transient Changes 15.1.4.4
Official Documentation 15.1.4.5
Pipes 16.1
Using Pipes 16.1.1
Custom Pipes 16.1.2
Stateful Pipes 16.1.3
Forms 17.1
5
Getting Started 17.1.1
Template-Driven Forms 17.1.2
Nesting Form Data 17.1.2.1
Using Template Model Binding 17.1.2.2
Validating Template-Driven Forms 17.1.2.3
Reactive/Model-Driven Forms 17.1.3
FormBuilder Basics 17.1.3.1
Validating FormBuilder Forms 17.1.3.2
FormBuilder Custom Validation 17.1.3.3
Visual Cues for Users 17.1.4
Modules 18.1
What is an Angular Module? 18.1.1
Adding Components, Pipes and Services to a Module 18.1.2
Creating a Feature Module 18.1.3
Directive Duplications 18.1.4
Lazy Loading a Module 18.1.5
Lazy Loading and the Dependency Injection Tree 18.1.6
Shared Modules and Dependency Injection 18.1.7
Sharing the Same Dependency Injection Tree 18.1.8
Routing 19.1
Why Routing? 19.1.1
Configuring Routes 19.1.2
Redirecting the Router to Another Route 19.1.3
Defining Links Between Routes 19.1.4
Dynamically Adding Route Components 19.1.5
Using Route Parameters 19.1.6
Defining Child Routes 19.1.7
Controlling Access to or from a Route 19.1.8
Passing Optional Parameters to a Route 19.1.9
Using Auxiliary Routes 19.1.10
State Management 20.1
Redux and @ngrx 20.1.1
Adding @ngrx to your Project 20.1.1.1
6
Defining your Main Application State 20.1.1.2
Example Application 20.1.1.3
Reading your Application State using Selectors 20.1.1.4
Actions 20.1.1.5
Modifying your Application State by Dispatching Actions 20.1.1.6
Reducers and Pure Functions 20.1.1.7
Reducers as State Management 20.1.1.8
Creating your Application's Root Reducer 20.1.1.9
Configuring your Application 20.1.1.10
Implementing Components 20.1.1.11
Component Architecture 20.1.1.12
Side Effects 20.1.1.13
Getting More From Redux and @ngrx 20.1.1.14
TDD Testing 21.1
The Testing Toolchain 21.1.1
Test Setup 21.1.2
Filename Conventions 21.1.2.1
Karma Configuration 21.1.2.2
TestBed Configuration (Optional) 21.1.2.3
Typings 21.1.2.4
Executing Test Scripts 21.1.2.5
Simple Test 21.1.3
Using Chai 21.1.4
Testing Components 21.1.5
Verifying Methods and Properties 21.1.5.1
Injecting Dependencies and DOM Changes 21.1.5.2
Overriding Components for Testing 21.1.5.2.1
Testing Asynchronous Actions 21.1.5.3
Refactoring Hard-to-Test Code 21.1.5.4
Testing Services 21.1.6
Testing Strategies for Services 21.1.6.1
Testing HTTP Requests 21.1.6.2
Using MockBackend 21.1.6.2.1
Alternative Mocking Strategy 21.1.6.2.2
7
Testing JSONP and XHR Back-Ends 21.1.6.2.3
Executing Tests Asynchronously 21.1.6.3
Testing Redux 21.1.7
Testing Simple Actions 21.1.7.1
Testing Complex Actions 21.1.7.2
Testing Reducers 21.1.7.3
Afterthoughts 21.1.7.4
Migrating Angular 1.x Projects to Angular 2 22.1
Migration Prep 22.1.1
Upgrading To Angular 1.3+ Style 22.1.1.1
Using Webpack 22.1.1.2
Migrating To TypeScript 22.1.1.3
Choosing an Upgrade Path 22.1.2
Avoiding Total Conversion 22.1.3
Using ng-metadata (Angular 1.x Using 2 Style) 22.1.4
Bootstrapping ng-metadata 22.1.4.1
Components and Services 22.1.4.2
Using ng-upgrade (Angular 1.x Coexisting With Angular 2) 22.1.5
Order of Operations 22.1.5.1
Replacing Services with TypeScript Classes 22.1.5.2
Bootstrapping ng-upgrade 22.1.5.3
Downgrading Components 22.1.5.4
Upgrading Components 22.1.5.5
Projecting Angular 1 Content into Angular 2 Components 22.1.5.6
Transcluding Angular 2 Components into Angular 1 Directives 22.1.5.7
Injecting Across Frameworks 22.1.5.8
Project Setup 23.1
Webpack 23.1.1
Installation and Usage 23.1.1.1
Loaders 23.1.1.2
Plugins 23.1.1.3
Summary 23.1.1.4
NPM Scripts Integration 23.1.2
8
Angular CLI 24.1
Setup 24.1.1
Creating a New App 24.1.2
Serving the App 24.1.3
Creating Components 24.1.4
Creating Routes 24.1.5
Creating Other Things 24.1.6
Testing 24.1.7
Linting 24.1.8
CLI Command Overview 24.1.9
Adding Third Party Libraries 24.1.10
Integrating an Existing App 24.1.11
Accessibility in Angular 25.1
Why Make my Application Accessible? 25.1.1
Key Concerns of Accessible Web Applications 25.1.2
Semantic Markup 25.1.2.1
Keyboard Accessibility 25.1.2.2
Visual Assistance 25.1.2.3
Testing for Accessibility 25.1.3
Is my Application Readable? 25.1.3.1
Is my Application Predictable? 25.1.3.2
Is my Application Navigable? 25.1.3.3
Testing with Screen Readers 25.1.3.4
Additional Resources 25.1.4
Internationalization in Angular 26.1
What is the process like and how is involved? 26.1.1
Marking text in our templates 26.1.2
Extracting translation text using the Angular CLI 26.1.3
How to import the completed translation files 26.1.4
Using the AoT Compiler 26.1.4.1
Using the JiT Compiler 26.1.4.2
Glossary 27.1
Further Reading And Reference 27.2
9
10