React JS Training Course Online
- 21k Enrolled Learners
- Weekend
- Live Class
(7200)
AngularJS provides services that are reusable singleton objects. They can be used to share the code across the users AngularJS applications. They can also be injected into directives, filters, and controllers. In this article, we will understand the factory in AngularJS.
- What is Factory in AngularJS?
- Difference Between Service and Factory
- Example of Factory in JavaScript
What is Factory in AngularJS?
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.
Check out the Angular Course Online provided by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.
Difference Between Service and Factory
- A service can be defined in the following way:
app.service('FirstService', function () {
this.sayHola = function () {
console.log('Hola');
};
});
The .service() method takes the name and the function that defines the service. We can inject it in the following way:
app.controller('AppController', function (FirstService) {
FirstService.sayHola(); // logs 'Hola'
});
- A factory, on the other hand can be defined in the following way:
app.factory('FirstService', function () {
return {
sayHola: function () {
console.log('Hola');
}
}
});
factory() is also a method that takes a name and function that defines the factory. We can inject it in the same way as injecting a service. The major difference between a service and factory is that we return an object literal in the case of factory (instead of using this). The reason is that service is a constructor function whereas a factory is not.
- For a better understanding, let’s take a look at the factory function():
function factory(name, factFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceReturnValue(name, factFn) : factFn
});
}
In the code given above, it takes the name and the passed factory function. It returns a provider with the same name, along with a $get method(which is the factory function) . This is due to the reason that whenever the injector is asked for a specific dependency, the injector asks the provider for an instance of that service by calling the $get() method. Check out this Full Stack development course to learn more about Angular.
- On injecting FirstService, the factory functions get called:
FirstServiceProvider.$get(); // return the instance of the service
- For the service code:
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}
When we call service(), factory() is the one that is actually called. This is done by passing a function that asks the injector to instantiate an object by the constructor. In simpler terms, service calls a predefined factory.
$injector.instantiate() calls the Object.create() with the constructor function. That is why this is used in services.
Unleash your creativity and build stunning websites with our Web Developer Course.
Example of Factory in JavaScript
var firstModule = angular.module("firstModule", []);
firstModule.factory("firstFactory", function() {
return "a value";
});
firstModule.controller("FirstController", function($scope, firstFactory) {
console.log(firstFactory);
});
Injecting Values into Factory
A value can be injected into factory by the following method:
var firstModule = angular.module("firstModule", []);
firstModule.value("numberValue", 29);
firstModule.controller("FirstController", function($scope, numberValue) {
console.log(numberValue);
});
NOTE: It must be noted that the value produced by the factory function is injected, not the factory function itself.
With this, we come to an end of this Factory in AngularJS article. I hope you got an understanding of what exactly is a factory and how it differs from a service.
Unleash your creativity and design skills with our UI and UX Design Course.
