A service is a constructor function. Internally it calls Object.create() with the service constructor function, when instantiated.
It returns provider with same service name and calls Object.create() and further calls $get() method of provider, responsible for inject dependency when required. Provider returns instance of service provider. Services are singletons, i.e. only one instance of the service is created in the lifetime of an AngularJS application.
It means we can run code before we return our object literal. That basically allows us to do some configuration stuff or conditionally create an object or not but it only works with this keyword as follows.
// Angular Module
var ng = angular.module("myApp", []);
// Creating Angular Service with constructor logic
ng.service("MyService", function () {
this.GetFullName = function (a,b) {
return a +' '+ b;
};
this.Reset = function () {
var m = {};
return m;
};
});
Moreover apart from using this it will behave like factory method of angularjs and which will work without constructor any more.
// Angular Module
var ng = angular.module("myApp", []);
// Creating Angular Service without constructor, which behaves like factory
ng.factory("MyFactory", function () {
return {
GetFullName: function (a,b) {
return a +' '+ b;
},
Reset: function () {
var m = {};
return m;
}
};
});
You can create AngularJs service 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.service("MyService", function () {
this.GetFullName = function (a,b) {
return a +' '+ b;
};
this.Reset = function () {
var m = {};
return m;
};
});
// Angular Controller with MyService injection
ng.controller("MyController", ['$scope', 'MyService', function ($scope, MyService) {
//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 Service
$scope.StudentModel.FullName = MyService.GetFullName($scope.StudentModel.FirstName,$scope.StudentModel.LastName);
}
//Controller Function to Reset Entire StudentModel
$scope.Reset = function () {
$scope.StudentModel = MyService.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.