What is factory in AngularJs? and How to create and use of factory?

What is factory in AngularJs?

The factories will always return a new instance for each object but not for services.
The factories methodology are used to communicate with servers using HTTP and persist the state and change to the across controllers and also use to create the reusable code for feature uses.

One of the major difference between factory and service that is, we can run custom code in the factory. But in the services, we can use only for objects creation. i.e.
        qpp.factory('myFactory', function () {
            //Write custom code here
            return {
                myMSG: function () {
                    return "Hi, this is the custom msg.";
                }
            };
        });

If you use a factory than you will get the value that is returned by invoking the function reference.

If you use a service than you will get the instance of a function using "this" keyword.
There are some points keep in mind for all providers as given below

             1.      All providers  like value, constant, services, factories are singletons.
             2.      The services are holds a reference to any objects.
             3.      The factories are function which returns any objects.
             4.      The provider is a function which returns any function.

How to create and Inject factory in AngularJs?

The example in detail as given below and go for live demo http://embed.plnkr.co/f2F82P/preview

The AngularJs code sample

var qpp = angular.module('myApp', []);

        qpp.factory('myFactory', function () {
            var displayFact;

            var addMSG = function (msg) {
                displayFact = ' Hi Anil, This is ' + msg;
            }

            return {
                setMSG: function (msg) {
                    addMSG(msg);
                },
                getMSG: function () {
                    return displayFact;
                }
            };
        });

        qpp.service('myService', function () {
            var displayServ;

            var addMSG = function (msg) {
                displayServ = 'Hi Anil, This is ' + msg;
            }

            this.setMSG = function (msg) {
                addMSG(msg);
            }

            this.getMSG = function () {
                return displayServ;
            }
        });

        qpp.controller("MyCtrl", function ($scope, myService, myFactory) {
            //Inject to factory and controller both.
            myFactory.setMSG("SetFactory");
            myService.setMSG("SetService");

            //Pfrepare a collection
            $scope.myCollections = [
              myFactory.getMSG(),
              myService.getMSG()
            ];
        });

The HTML code sample

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div ng-repeat="coll in myCollections">
            {{coll}}
        </div>
    </div>
</div>

The Full Live Angular +HTML code sample

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script>
        var qpp = angular.module('myApp', []);

        qpp.factory('myFactory', function () {
            var displayFact;

            var addMSG = function (msg) {
                displayFact = ' Hi Anil, This is ' + msg;
            }

            return {
                setMSG: function (msg) {
                    addMSG(msg);
                },
                getMSG: function () {
                    return displayFact;
                }
            };
        });

        qpp.service('myService', function () {
            var displayServ;

            var addMSG = function (msg) {
                displayServ = 'Hi Anil, This is ' + msg;
            }

            this.setMSG = function (msg) {
                addMSG(msg);
            }

            this.getMSG = function () {
                return displayServ;
            }
        });

        qpp.controller("MyCtrl", function ($scope, myService, myFactory) {
            //Inject to factory and controller both.
            myFactory.setMSG("SetFactory");
            myService.setMSG("SetService");

            //Pfrepare a collection
            $scope.myCollections = [
              myFactory.getMSG(),
              myService.getMSG()
            ];
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div ng-repeat="coll in myCollections">
            {{coll}}
        </div>
    </div>
</body>
</html>


The output:  go to plunker link http://embed.plnkr.co/f2F82P/preview

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book