AngularJS services

embed external html pages

AngularJs services are javaScript function that perform a specific tasks only. Using dependency injection mechanism services are normally attached.

AngularJS provides some build in services i.e. $http, $route, $window, $location etc where each service is responsible for different tasks.

For example, $http is used for ajax call, $route is for routing information.

There are two ways by which we can create service:
– factory
– service

Following example is showing above mentioned directives:

<title>AngularJS services</title>
<script src=""></script>
<h2>AngularJS services</h2>
<div ng-app="myApp" ng-controller="CubeController">
<p>Number: <input type="number" ng-model="number" />
<button ng-click="cube()">X<sup>3</sup></button>
<p>Output: {{output}}</p>
var myApp = angular.module("myApp", []);
myApp.factory('CubeMathService', function() {
var factory = {};
factory.multiply = function(a, b, c) {
return a * b * c;
return factory;

myApp.service('CubeService', function(CubeMathService){
this.cube = function(a) {
return CubeMathService.multiply(a,a,a);

myApp.controller('CubeController', function($scope, CubeService) {
$scope.cube = function() {
$scope.output = CubeService.cube($scope.number);


AngularJS services

Output: 125

2 thoughts on “AngularJS services”

Leave a Reply

Your email address will not be published. Required fields are marked *