Expert Angular电子书

Title Page

Copyright

Expert Angular

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Why subscribe?

Customer Feedback

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

Downloading the color images of this book

Errata

Piracy

Questions

Architectural Overview and Building a Simple App in Angular

Angular architecture

NgModules

Components

Templates

Metadata

Data Binding

Directives

Services

Dependency Injection

Basics of TypeScript

Basic types

Number type

Boolean type

String

Array

Enum

Any

Void

Classes

Interfaces

Optional properties using an interface

Function type interfaces

Array type interfaces

Class type interfaces

Extending interfaces

Hybrid type interfaces

Inheritance

Inheritance in TypeScript

Private and public modifiers

Accessors

Static properties

Modules

Namespaces

Modules

Functions

Optional and default parameters

Rest parameter

Generics

Generic interfaces

Generic classes

Decorators

Class decorators

Method decorators

Accessor decorators

Property decorators

Parameter decorators

Building a simple application

Summary

Migrating AngularJS App to Angular App

Migration process

Syntax difference between Angular and AngularJS

Local variables and bindings in templates

Filters and pipes in templates

Local variables in templates

Angular app directives

Handling the CSS classes

Binding click event

Controllers and components in templates

Benefits of upgrading to Angular

Strategies to upgrade to Angular

Rules for incremental upgrade to Angular

Incremental upgrading using UpgradeAdapter

Injecting AngularJS dependencies to Angular

Injecting Angular dependencies to AngularJS

Components migration

Roadmap from AngularJS to Angular

JavaScript to TypeScript

Installing Angular packages

Creating the AppModule

Bootstrapping your application

Upgrading application services

Upgrading your application component

Adding the Angular router

Summary

Using Angular CLI to Generate Angular Apps with Best Practices

Introducing Angular CLI

Installing and setting up Angular CLI

Generating code for a new application

Generating components and routes

Routes

Generating services

Generating directives and pipes

Pipes

Creating builds targeting various environments

Running tests for your application

Updating Angular CLI

Summary

Working with Components

Components 101

A basic root component

Defining child components

Component life cycle

Communicating and sharing data between components

Referencing child components from a parent component

Template reference variables

Injecting child components

Using services with components

Summary

Implementing Angular Routing and Navigation

Importing and configuring the router

Building blocks of router

About router LocationStrategy

Handling the error state - wildcard route

Route Guards

Custom component routes and child routes

Custom component routes with inner child routes

Integrating all the components together

Demo application routing and navigation

Summary

Creating Directives and Implementing Change Detection

Angular Directives

Component Directives

Structural Directives

ngFor directive

ngIf directive

ngSwitch directive

Attribute Directives

Built-in Attribute Directives

Creating custom directives - Structural and Attribute Directives

Angular CLI - generating the directives

Creating custom Attribute Directives

Creating custom Structural Directives

Implementing change detection in Angular

Change detection - Angular and ZoneJS

Change detection strategy

ChangeDetectionStrategy - Default

ChangeDetectionStrategy - OnPush

Advantages of ChangeDetectionStrategy - OnPush

Summary

Asynchronous Programming Using Observables

Observer patterns

TypeScript Observable

TypeScript Observable with parameters

Observing HTTP responses

Implementation

Understanding the implementation

Promises

Summary

Template and Data Binding Syntax

Learning about Template Syntax

Various ways to include Template Syntax

Using inline Template Syntax

Using templateURL to include a template

Interpolation in templates

Template expressions in Angular

Attaching events to views in templates

Implementing directives inside templates

Bindings in the template

Angular Data Binding

One-way Data Binding - Data source to view

One-way Data Binding - View template to data source

Angular Two-way Data Binding

Summary

Advanced Forms in Angular

Getting started

Reactive forms

Using FormBuilder

Adding validations

Custom validation

Two-way Data Binding with ngModel

Keeping things neat (extra credit)

Summary

Material Design in Angular

Installing the package

Responsive layout

Material icons

Buttons

Menu

Toolbars

Dialogs

Side navigation drawers

Theming

Summary

Implementing Angular Pipes

Angular Pipes - An overview

Defining a pipe

Built-in Pipes

DatePipe

DecimalPipe

CurrencyPipe

LowerCasePipe and UpperCasePipe

JSON Pipe

SlicePipe

async Pipe

Parameterizing pipes

Chaining pipes

Creating custom pipes

Pure and Impure Pipes

Pure Pipes

Impure Pipes

Summary

Implementing Angular Services

Why use a service or factory?

Creating a service

Accessing data from components using services

Implementing services

Consuming the service

Creating an asynchronous service

What is a Promise?

Using a Promise in a service

Summary

Applying Dependency Injection

Applications without Dependency Injection

Dependency Injection - Introduction

Understanding provider classes

Understanding hierarchical DI

Overview - Hierarchical components and DI

Creating an injectable

Registering providers

Registering providers inside the component

Provider classes with dependencies

Using @Inject, provide, and useValue

Summary

Handling Angular Animation

Introduction to Angular animations

Installing the Angular animations library

Angular animation - Specific functions

Trigger

States

Transitions

Animating page transitions

One more example - Angular animations

Using keyframes - Sequence of styles

Animate collapse menu

Summary

Integrating Bootstrap with Angular Application

Installing Bootstrap

Understanding the grid system

Using Bootstrap directives

Accordion

Alert

Datepicker

Tooltip

Progress bar

Rating

Summary

Testing Angular Apps Using Jasmine and Protractor Frameworks

Concepts in testing

Understanding and setting up Angular CLI for testing

Introduction to Jasmine framework

The Jasmine framework - Global methods we can use

Commonly used methods in Jasmine

Angular CLI and Jasmine framework - First test

Testing Angular components with Jasmine

Testing Angular components with Jasmine

Testing Angular components - Advanced

TestBed

Example - Writing test scripts with change detection

Testing Angular services

Testing Angular services - Mocking backend services

Introduction to Protractor framework

Protractor - A quick overview

Protractor and DOM

Some methods available to select element(s)

Exploring the Protractor API

Protractor - First steps

Writing E2E tests using Protractor

Writing E2E tests using Protractor - Advanced

Summary

Design Patterns in Angular

Model-View-Controller (MVC)

MVC at large

MVC limitations for the frontend

Angular is MVC

Singleton and Dependency Injection

Prototype and reusable pool

Factory pattern

Memento pattern

Summary