Angular 2 Cookbook

Angular 2 Cookbook

By : Patrick Gillespie, Matthew Frisbie

Buy this Book

Angular 2 Cookbook

By: Patrick Gillespie, Matthew Frisbie

Buy this Book

Overview of this book

Angular 2 introduces an entirely new way to build applications. It wholly embraces all the newest concepts that are built into the next generation of browsers, and it cuts away all the fat and bloat from Angular 1. This book plunges directly into the heart of all the most important Angular 2 concepts for you to conquer. In addition to covering all the Angular 2 fundamentals, such as components, forms, and services, it demonstrates how the framework embraces a range of new web technologies such as ES6 and TypeScript syntax, Promises, Observables, and Web Workers, among many others. This book covers all the most complicated Angular concepts and at the same time introduces the best practices with which to wield these powerful tools. It also covers in detail all the concepts you'll need to get you building applications faster. Oft-neglected topics such as testing and performance optimization are widely covered as well. A developer that reads through all the content in this book will have a broad and deep understanding of all the major topics in the Angular 2 universe.

Angular 2 Cookbook

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Dedication

Preface

Free Chapter

Strategies for Upgrading to Angular 2

Introduction

Componentizing directives using controllerAs encapsulation

Migrating an application to component directives

Implementing a basic component in AngularJS 1.5

Normalizing service types

Connecting Angular 1 and Angular 2 with UpgradeModule

Downgrading Angular 2 components to Angular 1 directives with downgradeComponent

Downgrade Angular 2 providers to Angular 1 services with downgradeInjectable

Conquering Components and Directives

Introduction

Using decorators to build and style a simple component

Passing members from a parent component into a child component

Binding to native element attributes

Registering handlers on native browser events

Generating and capturing custom events using EventEmitter

Attaching behavior to DOM elements with directives

Projecting nested content using ngContent

Using ngFor and ngIf structural directives for model-based DOM control

Referencing elements using template variables

Attribute property binding

Utilizing component lifecycle hooks

Referencing a parent component from a child component

Configuring mutual parent-child awareness with ViewChild and forwardRef

Configuring mutual parent-child awareness with ContentChild and forwardRef

Building Template-Driven and Reactive Forms

Introduction

Implementing simple two-way data binding with ngModel

Implementing basic field validation with a FormControl

Bundling controls with a FormGroup

Bundling FormControls with a FormArray

Implementing basic forms with NgForm

Implementing basic forms with FormBuilder and formControlName

Creating and using a custom validator

Creating and using a custom asynchronous validator with Promises

Mastering Promises

Introduction

Understanding and implementing basic Promises

Chaining Promises and Promise handlers

Creating Promise wrappers with Promise.resolve() and Promise.reject()

Implementing Promise barriers with Promise.all()

Canceling asynchronous actions with Promise.race()

Converting a Promise into an Observable

Converting an HTTP service Observable into a ZoneAwarePromise

ReactiveX Observables

Introduction

Basic utilization of Observables with HTTP

Implementing a Publish-Subscribe model using Subjects

Creating an Observable authentication service using BehaviorSubjects

Building a generalized Publish-Subscribe service to replace $broadcast, $emit, and $on

Using QueryLists and Observables to follow changes in ViewChildren

Building a fully featured AutoComplete with Observables

The Component Router

Introduction

Setting up an application to support simple routes

Navigating with routerLinks

Navigating with the Router service

Selecting a LocationStrategy for path construction

Building stateful route behavior with RouterLinkActive

Implementing nested views with route parameters and child routes

Working with matrix URL parameters and routing arrays

Adding route authentication controls with route guards

Services, Dependency Injection, and NgModule

Introduction

Injecting a simple service into a component

Controlling service instance creation and injection with NgModule

Service injection aliasing with useClass and useExisting

Injecting a value as a service with useValue and OpaqueTokens

Building a provider-configured service with useFactory

Application Organization and Management

Introduction

Composing package.json for a minimum viable Angular 2 application

Configuring TypeScript for a minimum viable Angular 2 application

Performing in-browser transpilation with SystemJS

Composing application files for a minimum viable Angular 2 application

Migrating the minimum viable application to Webpack bundling

Incorporating shims and polyfills into Webpack

HTML generation with html-webpack-plugin

Setting up an application with Angular CLI

Angular 2 Testing

Introduction

Creating a minimum viable unit test suite with Karma, Jasmine, and TypeScript

Writing a minimum viable unit test suite for a simple component

Writing a minimum viable end-to-end test suite for a simple application

Unit testing a synchronous service

Unit testing a component with a service dependency using stubs

Unit testing a component with a service dependency using spies

Performance and Advanced Concepts

Introduction

Understanding and properly utilizing enableProdMode with pure and impure pipes

Working with zones outside Angular

Listening for NgZone events

Execution outside the Angular zone

Configuring components to use explicit change detection with OnPush

Configuring ViewEncapsulation for maximum efficiency

Configuring the Angular 2 Renderer to use web workers

Configuring applications to use ahead-of-time compilation

Configuring an application to use lazy loading

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Setting up an application to support simple routes

Central to the behavior of single-page applications is the ability to perform navigation without a formal browser page reload. Angular 2 is well-equipped to work around the default browser page reload behavior and allow you to define a routing structure within it, which will make it look and feel like actual page navigation.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/6214.

Getting ready

Suppose you have the following function defined globally:

function visit(uri) { 
  // For this recipe, you don't care about the state or title 
  window.history.pushState(null, null, uri); 
}

The purpose of this is to merely allow you to navigate inside the browser from JavaScript using the HTML5 History API.

How to do it...

In order for Angular to simulate page navigation inside the browser, there are several steps you must take to create a navigable single-page application.

Angular 2 Cookbook

By : Patrick Gillespie, Matthew Frisbie

Angular 2 Cookbook

By: Patrick Gillespie, Matthew Frisbie

Overview of this book

Related Content you might be interested in

Current Title:

Angular 2 Cookbook

Getting Started with Angular

Essential Angular 4

Switching to Angular

Setting up an application to support simple routes

Note

Getting ready

How to do it...

Setting the...