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

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

Any developer that has used a client framework is intimately familiar with two basic operations in an application: iterative rendering from a collection and conditional rendering. The new Angular 2 implementations look a bit different but operate in much the same way.

Note

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

Getting ready

Suppose you had the following application:

[app/article-list.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article-list', 
  template: '' 
}) 
export class ArticleListComponent { 
  articles:Array<Object> = [ 
    {title: 'Foo', active: true},  
    {title: 'Bar', active: false}, 
    {title: 'Baz', active: true} 
  ]; 
}

Your objective is to iterate through this and display the article title only if it is set as active.

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

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

Note

Getting ready

How to do...