Book Image

Angular 2 Cookbook

By : Patrick Gillespie, Matthew Frisbie
Book Image

Angular 2 Cookbook

By: Patrick Gillespie, Matthew Frisbie

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.
Table of Contents (18 chapters)
Angular 2 Cookbook
Credits
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Dedication
Preface

Controlling service instance creation and injection with NgModule


In a stark departure from Angular 1.x, Angular 2 features a hierarchical injection scheme. This has a substantial number of implications, and one of the more prominent one is the ability to control when, and how many, services are created.

Note

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

Getting ready

Suppose you begin with the following simple application:

[app/root.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'root', 
  template: ` 
    <h1>root component!</h1> 
    <article></article> 
    <article></article> 
  ` 
}) 
export class RootComponent {} 
[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <p>Article...