In our last post, Fetching Data in Angularjs we saw how to fetch data stored in the controller. This post will show you how to fetch data stored in a service.

This is the second post in a series of posts about fetching data in Angularjs. Here are the topics covered in this series.

First things first, let’s add a ‘dataInService’ sub-folder inside our modules folder. Here are the files we will have inside this folder.

Folder Structure

Data In Service

Data In Service

Before we start we have to make few changes to the ‘index.html’ and ‘appModule.js’ files. Let’s start with the ‘index.html’ file

index.html

Fetching Data In Angularjs
Fetching Data In Angularjs        
  1. Data In Controller
  2. Fetch data stored in a service
  3. Fetch data from a JSON file
  4. API Call
  5. Resolve
 

Changes to the ‘index.html’ file are :

  • Add a link to the second ‘li’ – ‘Data In Service'(‘/datainservice’ is the second route we will define).
  • Added two more scripts files – ‘disController.js’ and ‘disService.js’.

Next we update the ‘appModule.js’ file.

appModule.js

var fetchDataApp = angular.module('fetchDataApp', [
	'ngRoute',
	'dataInControllerCntrl',
	'dataInServiceCntrl'
]);
fetchDataApp.config(['$routeProvider', function($routeProvider){
	$routeProvider
	.when('/dataincontroller', {
		templateUrl: 'modules/dataInController/dataInController.html',
		controller: 'dicCntrl'
	})
	.when('/datainservice', {
		templateUrl: 'modules/dataInService/dataInService.html',
		controller: 'disCntrl'
	});
}]);

Here is what is going on :

  • First we tell angular that there is one more module called ‘dataInServiceCntrl’.
  • Next we define our second route ‘/datainservice’.
  • Lastly we tell angular what html file to use for the view and the controller to be used for this route.

Fetch data stored in a service

Let’s start with the HTML.

dataInService.html

Using services to fetch data in angularjs

House Lannister

Character Id Character Name Character Title
{{char.charId}} {{char.charName}} {{char.charTitle}}

If you have read Fetching Data in Angular, you will notice the HTML part is the same. This is because we will be using similar kind of data. Now let’s look at the controller.

disController.js

var dataInServiceCntrl = angular.module('dataInServiceCntrl', []);
dataInServiceCntrl.controller('disCntrl', ['$scope', 'disService', function($scope, disService){
  $scope.charJson = disService;
}]);

What’s going on here? let’s see

  • We tell angular that this module is called ‘dataInServiceCntrl’.
  • Then we add a controller to this module, we call this controller ‘disCntrl’.
  • We are injecting ‘disService’ service as a dependency in this controller(we will look at the service in a moment). What is dependency injection? you can read about it here, in the angular docs.
  • Lastly we assign disService to ‘charJson’ which is added to the controller’s scope.

And now the last file that we have look at is our service.

disService.js

fetchDataApp.service('disService', function(){
  var data = [
    {
      "charId": "hl00001",
      "charName": "Tywin Lannister",
      "charTitle": "Lord of Casterly Rock"
    }, {
      "charId": "hl00002",
      "charName": "Cersei Lannister",
      "charTitle": "Lady of Casterly Rock"
    }, {
      "charId": "hl00003",
      "charName": "Jaime Lannister",
      "charTitle": "Lord Commander of the Kingsguard"
    }, {
      "charId": "hl00004",
      "charName": "Tyrion Lannister",
      "charTitle": "Master of Coin"
    }, {
      "charId": "hl00005",
      "charName": "Kevan Lannister",
      "charTitle": "Protector of the Realm"
    }
  ];
  return data;
});

Let’s understand what is going on here :

  • ‘fetchDataApp’ is our app and we are associating the service with our app.
  • We are telling angular that here is our service and it’s name is ‘disService’.
  • In the service we have a object that contains our data and we are simply returning this object.
  • How does this work:

    • Add the service directly to app using ‘fetchDataApp.service’.
    • Inject this service into our controller
    • Now since the service just returns our data we assign the data to ‘charJson’
    • We are using ‘charJson’ in our view.
    • ‘ng-repeat’ takes over from here and works it’s magic.

    That’s about it. Now you can go fetch data stored in a service in your angularjs apps. Tune in later for another post in this series.

    Get complete code on github

    Services can do a lot more then what we have seen in this post. You can read more about services in the angular docs.