What is the equivalent of a factory in Angular2?

Question

So I am used to using factories & services in Angular.

I am reading through the Angular2 docs and I don\'t see any equivalent of a factory. What is the equivalen

Answer 1

I don't know what factories do exactly in Angular1 but in Angular2 there is useFactory:

{ 
  provide: SomeClass, 
  useFactory: (dep1, dep2) => (x) => new SomeClassImpl(x, dep1, dep2),
  deps: [Dep1, Dep2]
}

to provide your own instance construction logic if the default doesn't match your needs.

You can also inject a factory to create new instances yourself:

/* deprecated or removed depending on the Angular version you are using */
provide(SomeClass, {
    useFactory: (dep1, dep2) => {
        (x) => new SomeClassImpl(x, dep1, dep2), 
    },
    deps: [Dep1, Dep2]
})

constructor(@Inject(SomeClass) someClassFactory: any) {
  let newSomeClass = someClassFactory(1);
}

Argument x must have type assignment, otherwise angular doesn't know how to deal with it.

class SomeClassImpl {
  constructor(x: number, dep1: Dep1, dep2: Dep2){}
}

Answer 2

Factories, services, constants and values are all gone in Angular2. Angular2 is radically and fundamentally different from the classic Angular. In Angular2, the core concepts are

• components
• dependency injection
• binding

The idea of services, factories, providers and constants has been criticized in Angular 1. It was difficult to choose between one. Removing them simplifies things a bit.

In the original Angular, you would define a service like so

app.service('BookService', ['$http', '$q', BookService]);
function BookService($http, $q){
  var self = this;
  var cachedBooks;
  self.getBooks = function(){
    if (cachedBooks) {
      return $q.when(cachedBooks);
    }
    return $http.get('/books').then(function(response){
      cachedBooks = response.data.books;
      return cachedBooks;
    })
  }
}

Angular2 significantly leverages ES6 syntax to make the code more readable and easier to understand.

One new keyword in ES6 is class, which can be thought of as a service.

ES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.

Here's how that same code might look in Angular2

import {HttpService, Promise}  from '../Angular/Angular2';
export class BookService{
    $http, $q, cachedBooks;
    constructor($http: HttpService, $q: Promise) {
        this.$http = $http;
        this.$q = $q
    }
    getBooks() {
    if (this.cachedBooks) {
        return this.$q.when(this.cachedBooks);
    }
    return this.$http.get('/books').then(function(data) {
        this.cachedBooks = data.books;
        return this.cachedBooks;
    })
  }
}

Answer 3

@Richard Hamilton's answer is appreciated and in addition to that there are few points to note.

For Factories,Service, and etc, in Angular2 we have service (or shared service). we have to make our service Injectable in order to use it.

NOTE: This code belongs to beta version and not RC.

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
import {Router} from 'angular2/router';
import {Http} from 'angular2/http';

export interface ImyInterface {
   show:boolean;
}

@Injectable()      <---------------------------- Very Important
export class sharedService {  <----------------- Service Name
  showhide:ImyInterface={show:true};

  constructor(http:Http;router:Router)
  {
    this.http=http;
  }     
  change(){
        this.showhide.show=!this.showhide.show;
  }
} 

If I want to use everywhere in my app, then I have to inject this service in bootstrap function like this,

bootstrap(App, [HTTP_PROVIDERS,sharedService    <--------Name Injection
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);

This way it creates single instance of your service. If you don't want to go with single instance, what you can do is - you can use Providers:[sharedService] metadata in you @component decorator.

Then, use it in your one of components like this,

export class TheContent {
  constructor(private ss: sharedService) {  <--------Injection dependency of your newly created service
    console.log("content started");
  }
  showhide() {
    this.ss.change();  <----- usage
  }
}

Check working example here

Answer 4

If you need a new instance of a service in some component you need to provide it in that component like this:

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

This will generate a new instance of the HereService as a factory does.