Storing values in angularjs

Question

So the thing is, i was wondering if it was possible to store the values of the application inside something so it only needs to load 1 time when the main application is loaded. Because now i have a controller and every time i need some property from the user the controller sends a query to the database. And this can't be good right ?

The controller :

(function () {
    'use strict';

    angular
        .module('app')
        .controller('UserPropertiesController', UserPropertiesController);

    UserPropertiesController.$inject = ['$scope', '$http'];
    function UserPropertiesController($scope, $http ) {

        $http.get('/user').success(function(data) {

            $http.post('/setuser/',data.name).success(function() {

                $http.get('/getuser/').success(function(data) {

                    $scope.userdata = data;


                })
            })
        })

    }

})();

And some html page like this :

<!-- Testing stuff -->
<div ng-controller="UserPropertiesController" class="container">

    <p>The ID is {{userdata.id}}</p>
    <p>The email is {{userdata.email}}</p>

</div>

Store it in a service. Services are singletons. But why in hell do you need to do 3 different requests, including a post, to get a user? — JB Nizet
– JB Nizet, Commented Oct 19, 2015 at 13:50
I found it quite useful to have 'top controller' to store such information. It can be controller of some top div or if u use router - controller of parent state. — Petr Averyanov
– Petr Averyanov, Commented Oct 19, 2015 at 13:51
@JB Nizet The first request get the email afters the user is logged in from a Principal user which stores the session id. and checks if it is still the good with the XSRF token. ( i hope i'm saying it right) then From the session id i get the email after the login is succeed an then i return the user with all his data to the front end. I't possible its not the right way but i'ts for education purpose. — Greg
– Greg, Commented Oct 19, 2015 at 14:00
@PetrAveryanov Yes this was my first idea but i use alot of directions like header,sidebar,footer. So i do need to load the top controller for every page. and i'm using ngroute so im not sure if this is possible in ngroute. — Greg
– Greg, Commented Oct 19, 2015 at 14:02

ste2425 · Accepted Answer · 2015-10-19 14:24:14Z

You have a few different options of storing data client side. You most certainly should put all your ajax calls into a service regardless of which you choose, this will make maintenance much easier.

1: Make use of $http cache. This is a simple in memory store built into the $http service. When implemented you continue to make your $http calls as usual but will respond with data in the store if available. The cons are its in memeory so takes up resources and will be lost if the user clicks 'X' https://docs.angularjs.org/api/ng/service/$http#caching

2: LocalStorage/SessionStorage Most modern browsers now support LocalStorage and SessionStorage quite well. Its reasonably fast and has an incredibly simple API. It is also synchronous so very simple to implement. The down side is it doesn't have much capacity and you store your data in key value pairs where the data must be a string. So you have to turn your data into JSON first. SessionStorage is wiped when the user's session ends, however LocalStorage will persist until the user clears it or you do in code. https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

3: IndexedDB Most modern browsers support this but less so than LocalStorage. This is the go to choice (In My opinion) for large amounts of client data storage. It is essentially a full blown client database. You have collections, transactions queries, index's. It is fully asynchronous. the down side to this power is complexity and it requires allot more boilerplate code connecting and dealing with DB version upgrades. Ive used it allot in the past with browser based video games. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

4: Roll your own Lastly there is the option of mixing any of these methods up. Thanks to angular's powerful interceptor system you could implement your own $http caching levering localSotrage or indexedDB or in memory giving you much more control over the cache then the default. https://docs.angularjs.org/api/ng/service/$http#interceptors

Or you could just store the data in your service.

.service('user', function ($http, $q) {
    var user;

    this.getUser = function () {
        if (!user) {
            return $http.get('/user')
                .then(function (data) {
                    user = data;

                    return data;
                });
        } else {
            return $q.when(user);
        }
    }
});

hope that helps, also go easy this is my first sort of write up answer.

+1 for the effort, I will carefully look into all these options and searching for the right choice for me.

André Kreienbring · Accepted Answer · 2015-10-19 13:48:16Z

0

Please have a look at angular localforage. You may use it to store key / value pairs in the local storage.

answered Oct 19, 2015 at 13:48

André Kreienbring

2,50915 silver badges16 bronze badges

1 Comment

Greg Over a year ago

Thanks for the suggestion, I will look into this. But it will also improve the complexity of the code. So i wonder if there is not any other way.

Collectives™ on Stack Overflow

Storing values in angularjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related