Click here to Skip to main content
15,562,816 members
Articles / Web Development / CSS3
Posted 3 Mar 2016


6 bookmarked

AngularJS Data Sharing Controller to Controller to Service to API

Rate me:
Please Sign up or sign in to vote.
4.83/5 (4 votes)
3 Mar 2016CPOL1 min read
Getting it all together - Controller, Service, $http, caching and more


A common issue that people discuss is about data sharing, how should we get data from some server API to an angular controller and then share this data with other controllers.

Do Not Use $http Directly

Some people like to use $http in the controller to directly call their server side API.

function DisplayDataController($http) {
 $http.get(configuration.consts.baseApiUrl + 'ServerUrl/GetSomeValue', {id: id}).then(function (data) {


This is bad practice for a few reasons:

  • The controller should handle display logic only.
  • If you want to change the call and reuse it in different places, you need to change it in all locations.
  • Each controller stores its own data and may potentially cost in multiple calls that can be minimized to one.

Using AngularJS Service

First, let's start to encapsulate under a single facade all of the outgoing API calls, for this, we will create an angularJS service. A service in angular is very useful especially considering the fact that it's actually a singleton, we will use this to our advantage later on.

MyModule.service('DataService', function ($http) {
   this.GetSomeData = function(id) {
      return $http.get(configuration.consts.baseApiUrl + 'ServerUrl/GetSomeData', {id: id});

MyModule.controller('DisplayDataController', function (DataService) {
   DataService.GetSomeData(id).then(function (data) {
       // Use the data

Note: Read the following article in order to understand how to skip using (the http response object) and simply access the actual data from the server:

What we have done is create a service which calls $http. Now the controller uses the service and not directly the $http.

But if a different controller will use this service, it will call the server again, sure we can set cache: true, but this is a simple example, what will happen in a highly complex system?

Final Solution, Service With Caching Mechanism

Now let's add some caching logic for the complete solution:

MyModule.service('DataService', function ($http, $q) {
        var cache = {};
        return {
            get: function(id) {
                var deferred = $q.defer();

                if (cache[id] != null) {
                    } else {
                        $http.get(configuration.consts.baseApiUrl + 
			'ServerUrl/GetSomeData', {id: id}).then(function(data) {
                            cache[id] =[0];

                return deferred.promise;

So what we've accomplished here is a service with a cache, now we can call our "DataService" from different controllers and share the same logic and data.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior) Payoneer
Israel Israel
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

QuestionRe: AngularJS Data Sharing Controller to Controller to Service to API Pin
Konstantin A. Magg4-Mar-16 23:34
Konstantin A. Magg4-Mar-16 23:34 
AnswerRe: AngularJS Data Sharing Controller to Controller to Service to API Pin
dumsky5-Mar-16 21:13
dumsky5-Mar-16 21:13 
GeneralRe: AngularJS Data Sharing Controller to Controller to Service to API Pin
Konstantin A. Magg6-Mar-16 2:24
Konstantin A. Magg6-Mar-16 2:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.