Create Factory in Angular js
1. So first we need a module, and controller and then we will create our directory and factory
CREATING MODULE AND CONTROLLER
(function(){
var app = angular.module('app', []);
app.controller('MainController', Main);
function Main(multiply) {
this.result = function (a,b) {
this.ar = multiply.mul(a,b);
};
}
})();
//app is a module name .
//multiply.mul(a,b); :- calling the factory method as mentioned below.
//our controller named as :-MainController and Main is the
//fuction of controller.
2. Here multiply is our own factory and don't worry I will show you how to deal with that.
Creating your own factory
//declaring factory....app:- module name
// multiply is our factory name you can name it whatever you want
app.factory('multiply',function(){
var fmultiply = {};
fmultiply.mul = function (a, b) { //this is your method
return a * b;
}
return fmultiply; //finally return this factory
});
//first declare fmultiply factory.
//now create methods as much as you want.
3. The most important part is to call that factory, if you can see in the function Main(multiply)
in the controller I have passed the factory multiply in it. so if you have two or three factory pass it like this function controllername(factory1, factory2,.....){};
4. function Main(multiply) { //pass the factory as a parameter in controller
this.result = function (a,b) {
this.ar = multiply.mul(a,b); //call the factory by this syntax //factoryname.methodname(param1,param2);
};
it will call the method mul in the factory multiply and return the value a*b which will store in this.ar.
5. Now we have factory and controller, now we need to call it from front end so what I have done here, I have created two text box and pass the value to factory by clicking on multiply button.
6. Below is the html code for your reference .
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title>Angular</title>
<script src="Scripts/angular.min.js"></script>
<script src="app/main.js"></script>
</head>
<body ng-controller="MainController as a">
<div>
<div>
<h4>Get multiplication dynamically</h4>
<span> Enter your numbers</span>
<input type="text" name="value1" ng-model="a.value1" />
<p >*</p>
<input type="text" name="value2" ng-model="a.value2"/>
<button value="Multiply" name="Multiply"
ng-click="a.result(a.value1,a.value2)">Multiply</button>
<span> your result is:- {{a.ar}} </span><br/><br/>
</div>
</div>
</body>
</html>
HERE, ng-controller="MainController as a" this is our controller.
you can also check how I am passing the values from user to controller by using ng-model="a.value1" and ng-model="a.value2"
ng-click="a.result(a.value1,a.value2)" here,a.result will call the result function which is in controller function which eventually call the multiply.mul(a,b); with parameter
a = a.value1;
b = a.value2;
multiply.mul(a,b) will return a*b which will store in this.ar and we are calling it in front end using {{a.ar}}.
7. Please focus on calling part because you can get many articles on how to create a factory but it is quite frustrating when it comes to calling. So, this is the pain area you should focus.
8. In my next article, I will show you how to create a custom directive, and believe me this is 100% working and worth reading if and only if you are interested in Angular.js.
For U A....
Kindly Bookmark this Post using your favorite Bookmarking service:
Post a Comment
Note: only a member of this blog may post a comment.