Post
Ask Question

Introduction To AngularJS – Day Fifteen

In this 15th day of AngularJS article series, we are going to be learning the next key players/concept of AngularJS, and understanding the concept of Factories in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10
  11. Introduction to AngularJS – Day 11
  12. Introduction to AngularJS – Day 12
  13. Introduction to AngularJS – Day 13
  14. Introduction To AngularJS – Day 14

Factories

A factory is a simple function that returns as object. It is just a collection of functions like a class. Hence, it can be instantiated in different controllers when you are using it with constructor function.

  1. Create and return a custom object.
  2. Created using the module.factory () function.
  3. Can be injected into other components.
  4. Can have dependencies.

Syntax:

  1. //Creating a module  
  2. var app = angular.module("myApp", []);  
  3.   
  4. //Creating a factory()  
  5. app.factory("myFactory", function () {  
  6.   
  7.     var factObj = {};  
  8.   
  9.     factObj.function1 = function () {  
  10.         //TO DO  
  11.     };  
  12.   
  13.     factObj.function2 = function () {  
  14.         //TO DO  
  15.     };  
  16.   
  17.     return factObj;  
  18. }); 
The above syntax shows how to create a factory in AngularJS.

Inject factory in controller as follows:
  1. //Creating controller and injecting myFactory in that  
  2. app.controller("factoryController", function ($scope, myFactory) {  
  3.   
  4.     $scope.tets = function () {  
  5.         $scope.result = myFactory.function1();  
  6.     };  
  7.       
  8. });  
Example:

In the below example we are going to create a module, factory and controller and a view to be used.

app.js
  1. /// <reference path="angular.min.js" />  
  2. var app = angular.module("myApp", []);  
  3.   
  4. //Creating factory  
  5. app.factory("myFactory", function () {  
  6.   
  7.     var factObj = {};  
  8.     factObj.Display = function (text) {  
  9.         return "Welcome to " + text + " !";  
  10.     };  
  11.   
  12.     return factObj;  
  13. });  
  14.   
  15. //Creating controller  
  16. app.controller("myController", function ($scope, myFactory) {  
  17.   
  18.     $scope.show = function () {  
  19.         $scope.result = myFactory.Display($scope.enter_text);  
  20.     };  
  21.       
  22. });  
index.html
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <title>Factories in AngularJS</title>  
  5.     <meta charset="utf-8" />      
  6.     <script src="app/angular.min.js"></script>  
  7.     <script src="app/app.js"></script>  
  8. </head>  
  9. <body ng-controller="myController">  
  10.     <h2>Factories in AngularJS</h2>  
  11.     Enter the text :   <input type="text" ng-model="enter_text" /><br /><br />  
  12.     <input type="button" value="Factory" ng-click="show()" /><br />  
  13.     <h3>{{result}}</h3>  
  14. </body>  
  15. </html>  
Output:

output
Enter some text box and click on ‘Factory’ button it will show you output as follows:

output
Great, Factories in AngularJS with example created successfully!

Summary

I hope that beginners as well as students understand the concept of Factories in AngularJS with examples. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!

Read more articles on AngularJS:


Similar Articles