One of the most important objects we can use in AngularJS is a Service. Just like directives and filters, we create a service with a factory method.

This is an example of a service:

(function() {
	
	var customersService = function () {
		var customers = [ ... ];	
						
		this.getCustomers = function () {
			return customers;
		};
	};
	
	angular.module('customersApp')
		.service('customersService', customersService)

}());

Here is a step-by-step recipe for creating your first service:

  1. Create a folder for our project
mkdir AngularServices
cd AngularServices
  1. Create a webpage
new-item .\Index.html
  1. Enter the following code into .\Index.html
<!DOCTYPE html>
<html>
<head>
	<Title>Luke's Angular Services Demo</Title> 
</head>
<body>
    <div class="container">
        <div>
            <h1>Enter Quantity:</h1>

            <input type="number" >
            <h2>Total Cost: </h2>
        </div>
    </div>
</body>
</html>
  1. Look at what we have so far
ii .\Index.html

[serv-1] 5. Now download AngularJS from https://angularjs.org/ and reference angular from your webpage: [serv-2] 6. Link to it on our webpage

<script src="angular.js">

<!DOCTYPE html>
<html>
<head>
<Title>Luke's Angular Services Demo</Title> 
</head>
<body>
    <div class="container">
        <div>
            <h1>Enter Quantity:</h1>

            <input type="number" >
            <h2>Total Cost: </h2>
        </div>
    </div>
<script src="angular.js"></script>
</body>
</html>

Now let’s add in Angular

  1. Add ng-app to the <html> tag or Angular won’t have anything to work with
<html ng-app>
  1. Add a ng-model to the input box
<input type="number" ng-model="quantity">
  1. Add an Angular expression to the <h2> tags.
<h2>Total Cost: {{quantity}}</h2>

Index.html

<!DOCTYPE html>
<html ng-app>
<head>
<Title>Luke's Angular Services Demo</Title> 
</head>
<body>
    <div class="container">
        <div>
            <h1>Enter Quantity:</h1>

            <input type="number" ng-model="quantity">
            <h2>Total Cost: {{quantity}}</h2>
        </div>
    </div>
<script src="angular.js"></script>
</body>
</html>

Note: <input type="number" prevents the above from accepting anything other than numbers. 9. Add an Angular currency filter

<h2>Total Cost: {{quantity | currency}}</h2>

Index.html

<!DOCTYPE html>
<html ng-app>
<head>
    <Title>Luke's Angular Services Demo</Title>
</head>
<body>
    <div class="container">
        <div>
            <h1>Enter Quantity:</h1>
            <input type="number"  ng-model="quantity">
            <h2>Total Cost: {{quantity | currency}}</h2>
        </div>
    </div>
    <script src="angular.js"></script>
</body>
</html>

[serv-3] 10. Create a simple controller to the app. 11. Create a new JavaScript file to hold our code

new-item .\myAngular.js
  1. Link to it inside our html document
<script src="angular.js"></script>
<script src="myAngular.js"></script>

Note: angular.js must always be loaded before other, custom Angular scripts.

While our basic AngularJS features will work with only <html ng-app> unless we create a module and label it <html ng-app> will not work.

  1. Add a name to ng-app
<html ng-app="myApp">

Note: If you now load the webpage 12. Open myAngular.js Create a variable that defines our module:

var app = angular.module("myApp", []);
  1. Move ng-app to below html
<div ng-app="myApp">
  1. Add a controller to the div
<div ng-app="myApp" ng-controller='myController'></div>
  1. Create a basic controller called myController
app.controller('myController', function($scope) {
    $scope.quantity = 100;
});

Note: The input-text box field is now auto-populated with the number 100. [gif-1] 16. If we remove the ng-controller directive, it no longer works:

<div ng-app="myApp" ng-controller="myController">

Becomes:

<div ng-app="myApp">

Note: The text field no longer auto-populates 20. Add a calculate function which performs a calculation and returns it to the user.

$scope.calculate = function(number) {
	return number * 3;
}

*the function calculate is now attached to $scope. It is sort of like it is a method of $scope MyAngular.js

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
    $scope.quantity = 100;
    $scope.calculate = function(number) {
        return number * 3;
    }
});
  1. Add a calculator method inside the expression brackets
<h2>Total Cost: {{quantity | currency}}</h2>

Becomes

<h2>Total Cost: {{calculate(quantity) | currency}}</h2>

Now the value in the text box is automatically multiplied by 3. [gif-2]

Moving Calculate into its own service

  1. Create a app.factory is necessary to register the service with Angular – we can not use a normal function.
// Service
app.factory('calculateService', function(){
    return {
        calculate: function(number){
            return number * 10
        }
    }
});
  1. Remove our original calculate function
app.controller('myController', function($scope) {
    $scope.quantity = 100;
    $scope.calculate = function(number) {
        return number * 3;
    }
});

Becomes

app.controller('myController', function($scope) {
    $scope.quantity = 100;
    }
);

myAngular.js

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
    $scope.quantity = 100;
    }
);

// Service
app.factory('calculateService', function(){
    return {
        calculate: function(number){
            return number * 10
        }
    }
});