Question

What is a Factory in Angular?

Answer 1

Factory in real world means a premise where products are manufactured. Let’s take an example of a computer manufacturing firm. Now the company produces different kinds and sizes of computers like laptops, desktops, tablets, etc.

Now the process of manufacturing the computer products are same with slight variation. To manufacture any computer, we need processor, RAM and hard disk. But depending on what kind of final case packing is the final product shapes.

That’s what the use of Factory in Angular.

For example, see the below code we have a Customer, Phone and Address class.

HTML

function Customer()
{
        this.CustomerCode = "1001";
        this.CustomerName = "Shiv";
}
function Phone()
{
        this.PhoneNumber = "";
}
function Address()
{
        this.Address1 = "";
        this.Address2 = "";
}

So now we would create different types of Customer object types using the combination of Address and Phones object.

• We would like to combine Customer with Address and create a Customer object which has Address collection inside it.
• Or must be we would like to create Customer object with Phone objects inside it.
• Or must be Customer object with both Phone and Address objects.

In other words, we would like to have different permutation and combination to create different types of Customer objects.

So let’s start from bottom. Let’s create two factory functions, one which creates Address object and the other which creates Phone objects.

HTML

functionCreateAddress()
{
var add = new Address();
return add;
}
functionCreatePhone()
{
var phone =  new Phone();
return phone;
}

Now let’s create a main factory function which uses the above two small factory functions and gives us all the necessary permutation and combination.

In the below factory, you can see that we have three functions:

• CreateWithAddress which creates Customer with Address objects inside it.
• CreateWithPhone which creates Customer object with Phone objects inside it.
• CreateWithPhoneAddress which creates Customer object with aggregated Phone and Address objects.

HTML

function CreateCustomer() {

return {
CreateWithAddress: function () {
varcust = new Customer();
cust.Address = CreateAddress();
returncust;
            },
CreateWithPhone: function () {
varcust = new Customer();
cust.Phone = {};
cust.Phone = CreatePhone();
returncust;
            }
            ,
CreateWithPhoneAddress: function () {
debugger;
varcust = new Customer();
cust.Phone = CreatePhone();
cust.Address = CreateAddress();
returncust;
            }
        }
    }

Below is a simple CustomerController which takes CustomerFactory as the input. Depending on TypeOfCustomer, it creates with Address, Phones or both of them.

HTML

functionCustomerController($scope, Customerfactory)
    {
        $scope.Customer = {};
        $scope.Init = function(TypeofCustomer)
        {

if (TypeofCustomer == "1")
            {
                $scope.Customer = Customerfactory.CreateWithAddress();
            }
if (TypeofCustomer ==  "2")
            {
                $scope.Customer = Customerfactory.CreateWithPhone();
            }
if (TypeofCustomer == "3") {
                $scope.Customer = Customerfactory.CreateWithPhoneAddress();
            }
        }
    }

You also need to tell Angular that the CreateCustomer method needs to be passed in the input. For that, we need to call the Factory method and map the CreateCustomer method with the input parameter CustomerFactory for dependency injection.

HTML

var app = angular.module("myApp", []);                    // creating a APP
app.controller("CustomerController", CustomerController); // Register the VM
app.factory("Customerfactory", CreateCustomer);

So if we consume the CustomerController in UI, depending on the situation, it creates different flavors of Customer object. You can see in the below code we have three different DIV tags and depending on the TypeofCustomer we are displaying data.