Learning Angular 2电子书

Learning Angular 2

Learning Angular 2

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Creating Our Very First Component in Angular 2

A fresh start

Web components

Why TypeScript over other syntaxes?

Setting up our workspace

Installing dependencies

Installing TypeScript

Installing TypeScript typings

Hello, Angular 2!

TypeScript classes

Introducing metadata decorators

Compiling TypeScript into browser-friendly JavaScript

The HTML container

Serving the examples of this book

Putting everything together

Enhancing our IDE

Sublime Text 3

Atom

Visual Studio Code

WebStorm

Leveraging Gulp with other IDEs

Diving deeper into Angular 2 components

Improving productivity

Component methods and data updates

Adding interactivity to the component

Improving the data output in the view and polishing the UI

Summary

2. Introducing TypeScript

Understanding the case for TypeScript

The benefits of TypeScript

Introducing TypeScript resources in the wild

The TypeScript official site

The TypeScript Wiki

Types in TypeScript

String

Declaring our variables the ECMAScript 6 way

Number

Boolean

Array

Dynamic typing with the any type

Enum

Void

Type inference

Functions, lambdas, and execution flow

Annotating types in our functions

Function parameters in TypeScript

Optional parameters

Default parameters

Rest parameters

Overloading the function signature

Better function syntax and scope handling with lambdas

Classes, interfaces, and class inheritance

Anatomy of a class – constructors, properties, methods, getters, and setters

Interfaces in TypeScript

Extending classes with class inheritance

Decorators in TypeScript

Class decorators

Extending the class decorator function signature

Property decorators

Method decorators

Parameter decorators

Organizing our applications with modules

Internal modules

External modules

The road ahead

Summary

3. Implementing Properties and Events in Our Components

A better template syntax

Data bindings with input properties

Some extra syntactic sugar when binding expressions

Event binding with output properties

Input and output properties in action

Setting up custom values declaratively

Communicating between components through custom events

Emitting data through custom events

Local references in templates

Alternative syntax for input and output properties

Configuring our template from our component class

Internal and external templates

Encapsulating CSS styling

The styles property

The styleUrls property

Inline style sheets

Managing view encapsulation

Summary

4. Enhancing Our Components with Pipes and Directives

Directives in Angular 2

Core directives

NgIf

NgFor

NgStyle

NgClass

NgSwitch, NgSwitchWhen, and NgSwitchDefault

Manipulating template bindings with Pipes

The uppercase/lowercase pipe

The number, percent, and currency pipes

The number pipe

The percent pipe

The currency pipe

The slice pipe

The date pipe

The JSON pipe

The replace pipe

The i18n pipes

The i18nPlural pipe

The i18nSelect pipe

The async pipe

Putting it all together in the Pomodoro task list

Setting up our main HTML container

Building our task list table with Angular directives

Toggling tasks in our task list

Displaying state changes in our templates

Embedding child components

Building our own custom pipes

Anatomy of a custom pipe

A custom pipe to better format time output

Filtering out data with custom filters

Building our own custom directives

Anatomy of a custom directive

Building a task tooltip custom directive

A word about naming conventions for custom directives and pipes

Summary

5. Building an Application with Angular 2 Components

Introducing the component tree

Common conventions for scalable applications

File and module naming conventions

Ensuring seamless scalability with facades or barrels

How dependency injection works in Angular 2

Injecting dependencies across the component tree

Restricting dependency injection down the component tree

Restricting provider lookup

Overriding providers in the injector hierarchy

Extending injector support to custom entities

Initializing applications with bootstrap()

Switching between development and production modes

Enabling Angular 2's built-in change detection profiler

Introducing the Pomodoro App directory structure

Refactoring our application the Angular 2 way

The shared context

Services in the shared context

Configuring application settings from a central service

Creating a facade module including a custom providers barrel

Creating our components

The timer context

The tasks context

Defining the top root component

Bootstrapping the application

Summary

6. Asynchronous Data Services with Angular 2

Strategies for handling asynchronous information

Observables in a nutshell

Reactive functional programming in Angular 2

The RxJS library

Introducing the HTTP API

When to use the Request and RequestOptionsArgs classes

The Response object

Handling errors when performing Http requests

Injecting the Http class and the HTTP_PROVIDERS modules symbol

A real case study – serving Observable data through HTTP

Adding tasks to our tasks service

Summary

7. Routing in Angular 2

Adding support for the Angular 2 router

Setting up the router service

Building a new component for demonstration purposes

Configuring the RouteConfig decorator with the RouteDefinition instances

The router directives – RouterOutlet and RouterLink

Triggering routes imperatively

CSS hooks for active routes

Handling route parameters

Passing dynamic parameters in our routes

Parsing route parameters with the RouteParams service

Defining child routers

Linking to child routes

The Router lifecycle hooks

The CanActivate hook

The OnActivate Hook

The CanDeactivate and OnDeactivate hooks

The CanReuse and OnReuse hooks

Advanced tips and tricks

Redirecting to other routes

Tweaking the base path

Finetuning our generated URLs with location strategies

Loading components asynchronously with AsyncRoutes

Summary

8. Forms and Authentication Handling in Angular 2

Two-way data binding in Angular 2

The NgModel directive

Binding a type to a form with NgModel

Bypassing the CanDeactivate router hook upon submitting forms

Tracking control interaction and validating input

Tracking changes with local references

Controls, ControlGroups, and the FormBuilder class

Introducing Controls and Validators

Controls in the DOM – the ngControl directive

Grouping controls in the DOM with NgControlGroup

Defining control groups imperatively with ControlGroup

Connecting the DOM and the controller with ngFormModel

A real example – our login component

The login feature context

The login form template

The login component

Applying custom validation to our controls

Watching state changes in our controls

Mocking a client authentication service

Exposing our new service to other components

Blocking unauthorized access

Making the UI reactive to the user authentication status

Running the extra mile on access management

Building our own secure RouterOutlet directive

Summary

9. Animating Components with Angular 2

Creating animations with plain vanilla CSS

Handling animation with CSS class hooks

Class hooks available

Animating components with the AnimationBuilder

The CssAnimationBuilder API

Tracking animation state with the Animation class

Developing custom animation directives

Interacting with our directive from the template

Looking into the future with ngAnimate 2.0

Summary

10. Unit testing in Angular 2

Why do we need tests?

Parts of a unit test in Angular 2

Dependency injection in unit tests

Setting up our test environment

Implementing our test runner

Setting up NPM commands

Angular 2 custom matcher functions

Testing pipes

Testing components

Testing components with dependencies

Overriding component dependencies for refined testing

Testing routes

Testing routes by URL

Testing redirections

Testing services

Testing asynchronous services

Mocking Http responses with MockBackend

Testing directives

The road ahead

Using Jasmine in combination with Karma

Introducing code coverage reports in your test stack

Implementing E2E tests

Summary

Index