Introduction To AngularJS – Day Fifteen

Jeetendra Gund
8y
6.7k
0
4

Article

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:

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.

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

Syntax:

//Creating a module
var app = angular.module("myApp", []);
//Creating a factory()
app.factory("myFactory", function () {
var factObj = {};
factObj.function1 = function () {
//TO DO
};
factObj.function2 = function () {
//TO DO
};
return factObj;
});

The above syntax shows how to create a factory in AngularJS.

Inject factory in controller as follows:

//Creating controller and injecting myFactory in that
app.controller("factoryController", function ($scope, myFactory) {
$scope.tets = function () {
$scope.result = myFactory.function1();
};
});

Example:

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

app.js

/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);
//Creating factory
app.factory("myFactory", function () {
var factObj = {};
factObj.Display = function (text) {
return "Welcome to " + text + " !";
};
return factObj;
});
//Creating controller
app.controller("myController", function ($scope, myFactory) {
$scope.show = function () {
$scope.result = myFactory.Display($scope.enter_text);
};
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Factories in AngularJS</title>
<meta charset="utf-8" />
<script src="app/angular.min.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="myController">
<h2>Factories in AngularJS</h2>
Enter the text : <input type="text" ng-model="enter_text" /><br /><br />
<input type="button" value="Factory" ng-click="show()" /><br />
<h3>{{result}}</h3>
</body>
</html>

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!