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

Normalizing service types


Angular 1 developers will be quite familiar with the factory/service/provider trifecta. In many ways, this has gone largely unaltered in Angular 2 conceptually. However, in the interest of upgrading an existing application, there is one thing that should be done to make the migration as easy as possible: eliminate factories and replace them with services.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/5637/.

Getting ready

Suppose you had a simple application as follows:

[index.html] 
 
<div ng-app="articleApp"> 
  <article></article> 
</div> 
[app.js] 
 
angular.module('articleApp', []) 
.factory('ArticleData', function() { 
  var title = 'Incumbent Senator Ousted by Stalk of Broccoli'; 
  return { 
    getTitle: function() { 
      return title; 
   }, 
    author: 'Jake' 
 }; 
}) 
.component('article', { 
  controller: function(ArticleData) { 
    this.title = ArticleData.getTitle(); 
    this.author = ArticleData.author; 
 }, 
  template: ` 
    <h1>{{$ctrl.title}}</h1> 
    <p>Written by: {{$ctrl.author}}</p> 
  ` 
}); 

How to do it...

Angular 2 is class-based, and it includes its service types as well. The example here does not have a service type that is compatible with a class structure. So it must be converted. Thankfully, this is quite easy to do:

[index.html] 
 
<div ng-app="articleApp"> 
  <article></article> 
</div> 
[app.js] 
 
angular.module('articleApp', []) 
.service('ArticleData', function() { 
   var title = 'Incumbent Senator Ousted by Stalk of Broccoli'; 
   this.getTitle = function() { 
   return title; 
 }; 
  this.author = 'Jake'; 
}) 
.component('article', { 
  controller: function(ArticleData) { 
    this.title = ArticleData.getTitle(); 
    this.author = ArticleData.author; 
 }, 
  template: ` 
    <h1>{{$ctrl.title}}</h1> 
    <p>Written by: {{$ctrl.author}}</p> 
  ` 
}); 

How it works...

You still want to keep the notion of title private, but you also want to maintain the API that the injected service type is providing. Services are defined by a function that acts as a constructor, and an instance created from this constructor is what is ultimately injected. Here, you are simply moving getTitle() and author to be defined on the this keyword, which thereby makes it a property on all instances. Note that the use in the component and template does not change in any way, and it shouldn't.

There's more...

The simplest to implement service types, Angular 1 factories were often used first by many developers, including myself. Some developers might take offense at the following claim, but I don't think there was ever a good reason for both factories and services to exist. Both have a high degree of redundancy, and if you dig down into the Angular source code, you will see that they essentially converge to the same methods.

Why services over factories then? The new world of JavaScript, ES6, and TypeScript is being built around classes. They are a far more elegant way of expressing and organizing logic. Angular 1 services are an implementation of prototype-based classes, which when used correctly function in essentially the same way as formal ES6/TypeScript classes. If you stop here, you will have modified your services to be more extensible and comprehensible. If you intend to upgrade, you will find that Angular 1 services will cleanly upgrade to Angular 2 services.

See also

  • Componentizing directives using controllerAs encapsulation shows you a superior method for organizing Angular 1 directives

  • Migrating an application to component directives demonstrates how to refactor Angular 1 to a component style

  • Implementing a basic component in AngularJS 1.5 details how to write an Angular 1 component