Angular Factory basically returns a provider with the same name. In code behind it has a $get method for our factory method. Which is provider thing. it inject a specific dependency. Factory Provider returns its instance.
We can create factory as follows.
// Angular Module
var ng = angular.module("myApp", []);
// Creating Angular Service
ng.factory("MyFactory", function () {
return {
GetFullName: function (a,b) {
return a +' '+ b;
},
Reset: function () {
var m = {};
return m;
}
};
});
Factories are singletons, i.e. only one instance of the factory is created in the lifetime of an AngularJS application.
Angular Factory is not a constructor function. so internally it will not call Object.create(). So we can't apply some logic before we return our object literal.
We can create AngularJS factory as follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="angular-1.7.8/angular.min.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">First Name</label>
<input ng-model="StudentModel.FirstName" type="text" class="form-control form-control-sm" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Last Name</label>
<input ng-model="StudentModel.LastName" type="text" class="form-control form-control-sm" />
</div>
</div>
<button ng-click="GetFullName()" type="submit" class="btn btn-primary btn-sm">Submit</button>
<button ng-click="Reset()" type="submit" class="btn btn-primary btn-sm">Reset</button>
</div>
<div class="row">
<div class="col-md-12 text-center">
{{StudentModel.FullName}}
</div>
</div>
</div>
<script>
// Angular Module
var ng = angular.module("myApp", []);
// Creating Angular Service
ng.factory("MyFactory", function () {
return {
GetFullName: function (a,b) {
return a +' '+ b;
},
Reset: function () {
var m = {};
return m;
}
};
});
// Angular Controller with MyFactory injection
ng.controller("MyController", ['$scope', 'MyFactory', function ($scope, MyFactory) {
//Student Model Initialization
//Create StudentModel
$scope.StudentModel = {};
//Create StudentModel Properties
$scope.StudentModel.FirstName = '';
$scope.StudentModel.LastName = '';
$scope.StudentModel.FullName = '';
//Controller Function to get Student Fullname
$scope.GetFullName = function () {
//Invoking Factory Method
$scope.StudentModel.FullName = MyFactory.GetFullName($scope.StudentModel.FirstName,$scope.StudentModel.LastName);
}
//Controller Function to Reset Entire StudentModel
$scope.Reset = function () {
$scope.StudentModel = MyFactory.Reset();
}
}]);
</script>
</body>
</html>
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.