Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the equivalent of a factory in Angular2?

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 equivalent for Angular2?

like image 353
user2202911 Avatar asked May 29 '16 22:05

user2202911


People also ask

What is a factory in angular 9?

Factory is an angular function which is used to return the values. A value on demand is created by the factory, whenever a service or controller needs it. Once the value is created, it is reused for all services and controllers. We can use the factory to create a service.

What are factories in angular?

A factory is a simple function which allows us to add some logic to a created object and return the created object. The factory is also used to create/return a function in the form of reusable code which can be used anywhere within the application.

Which return object is service or factory?

Essentially, factories are functions that return the object, while services are constructor functions of the object which are instantiated with the new keyword.

What is difference between angular service and factory?

The major difference between an AngularJS service and an AngularJS factory is that a service is a constructor function and a factory is not. That is why, in the case of a factory, we return an object literal instead of using this.


2 Answers

@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

like image 55
Nikhil Shah Avatar answered Oct 14 '22 07:10

Nikhil Shah


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){}
}
like image 33
Günter Zöchbauer Avatar answered Oct 14 '22 07:10

Günter Zöchbauer