AngularJS Service Creation

The last article provided an introduction to AngularJS services. We saw what AngularJS services are and how to use them in AngularJS applications. As an example, we implemented $location and $timeout services via controllers. In this article we shall take a step further. We shall see how to create our own custom services in AngularJS and how to hook them with controllers. Take a look at the following example.

Creating a Service

First step to AngularJS service creation is to create service function using AngularJS module. The second step is to create a method and assign it to the service.

Creating a service via module.service command is extremely simple. It is very similar to creating a controller. The first parameter to module.service is the name of the service. The second parameter is the function that the service will perform. Hooking a customized service to a controller is similar to that of built-in service. Simply pass the service as argument to the controller function. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="newApp" ng-controller="newCtrl">

    
<h1>{{display}}</h1>

</div>


<script>
var app = angular.module('newApp', []);

app.service('Message', function() {
    this.myFunc = function (str) {
        return "Welcome to knowledge hills " + str;
    }
});
app.controller('newCtrl', function($scope, Message) {
  
    $scope.name = "James";
  $scope.display = Message.myFunc($scope.name);
});
</script>

</body>
</html>

Download the code Try the code

In the above code, a service named “Messages” has been initialized. This service function “myFunc” takes one string type parameter. It then prefixes a welcome message with whatever string is passed inside the parameters. Inside the controller, $scope object is used to create a name variable. This variable is passed to the myFunc method of the service. Therefore, whatever is stored in this variable, it gets printed on the screen with a welcome message.

Creating A Sum Service

Now, since we know how to create a service in AngularJS, in the next example we have created a more advanced service in AngularJS. This service takes two numbers and returns their sum. Take a look at the following code.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="newApp" ng-controller="newCtrl">

    
<h1>{{sum}}</h1>

</div>


<script>
var app = angular.module('newApp', []);

app.service('Sum', function() {
    this.myFunc = function (x,y) {
        return x + y;
    }
});
app.controller('newCtrl', function($scope, Sum) {
  
    $scope.num1 = 10;
    $scope.num2 = 20;
  $scope.sum = Sum.myFunc($scope.num1, $scope.num2);
});
</script>

</body>
</html>

Download the code Try the code

In the above code a service named “Sum” has been initialized via module.service function. This service has one function myFunc. It takes two parameters, adds them and return the sum. This service is hooked to “newCtrl” controller. Inside the controller the $scope object creates two variables. They are assigned values of 10, 20. These variables are passed to myFunc method of the service. The returned value is stored in $scope.sum object which is displayed in the view.

<<< AngularJS ServicesAngularJS Tables >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .