AngularJS Services – Application Data Management

Application Data Management – Intro

In every medium-size application there are many data bindings between controllers, views, directives, and other application services. There are several ways to bind and store data across the application such as: using the $cacheFactory Service, or saving objects on the $rootScope. In my experience the best and most common way is to use the AngularJS Services.

You can either create one singleton object to store the entire application data, or to separate it into several services. In either case the AngularJS Services can easily give you the ability to share data across the entire application.

AngularJS logo

AngularJS

Simple Usage Example

A common module in any application is the User Module.
A user object is something that we need to share across the application in order to implement access control or include user information in the views.
For example: An admin user won’t see the same page as an anonymous user or a logged-in user. In order to share the current logged-in user so that every controller or directive in the application can instantly use it, we can inject and manage the user in “UserService” and retrieve the data from there.
Every time we change the user – for example: when logging-in you change the user from anonymous to the logged in user – you can do that inside the service, and this will affect the entire application. Managing the data in services is be very useful for cross platform operations.

angular.module('angular-user').service('userService', function($rootScope, $http, $q) {
    var currentUser = {};
    var userService = {};

    userService.get = function(id) {
        var deferred = $q.defer();

        var endPoint = "user/";
        var url = 'www.example.com/' + endPoint;
        $http({
            method: 'GET',
            url: url,
            headers: {
                'Content-Type': 'application/json'
            },
            params: {id: id},
            cache: false
        }).
            success(function(data, status, headers, config) {
                deferred.resolve(data);
            }).
            error(function(data, status, headers, config) {
                deferred.reject(data);
            });

        currentUser = deferred.promise;
        return currentUser;
    };

    userService.set = function(userData) {
        currentUser = userData;
    };

    return userService
});

Read more about our AngularJS Services posts series

This post is part of our AngularJS Services series:
AngularJS Services
AngularJS Services – Application Business Logic
AngularJS Services – Fetching Server Data

4 thoughts on “AngularJS Services – Application Data Management

  1. Pingback: AngularJS Services - Application Business Logic | The Panda Blog

  2. Pingback: AngularJS Services | The Panda Blog

  3. Pingback: AngularJS Services - Fetching Server Data | The Panda Blog

Leave a Reply

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