What is the Difference Between factory and service in AngularJS ?

AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions.

In this article, we will explore the differences between the factory and service in AngularJS and provide examples to illustrate their usage. Two commonly used methods for creating services in AngularJS are factories and services. While they serve a similar purpose, there are some key differences between the two.

AngularJS factory

A factory in AngularJS is a function that returns an object. It allows us to define and configure the object before returning it. Factories are used to create singleton objects, which means that AngularJS will create the object once and then reuse it whenever the factory is injected into different components of the application. This enables the sharing of data and functionality across the application.

Syntax:

app.factory('userService', function () {
 var user = {
 name: 'Geek',
 age: 30
 };
 return {
 getUser: function () {
 return user;
 },
 setUser: function (newUser) {
 user = newUser;
 }
 };
});

Example: Below example demonstrates the usage of the factory in AngularJS. Here, In the example, when the user clicks the button, it changes the name to a different name using a factory.

Output:

👁 ezgifcom-crop-(36)

AngularJS Service

A Service in AngularJS is a constructor function. When a service is injected into different components, AngularJS creates a new instance of the service using the 'new' keyword. Services are also singleton objects, meaning the same instance is shared across the application.

Syntax:

app.service('userService', function () {
 this.user = {
 name: 'Geek',
 age: 30
 };
 this.getUser = function () {
 return this.user;
 };
 this.setUser = function (newUser) {
 this.user = newUser;
 };
});

Example: Below example demonstrates the usage of service in AngularJS. Here, in the example, when the user clicks the button, it changes the name to a different name using a service in AngularJS.

Output:

👁 ezgifcom-crop-(37)

Difference between Factory and Service