How to manage user details throughout all the controllers in angular Js

Question

hello guys i wanted to know how to manage like user session id,name throught the view controllers in Angular Js.

The senario is that i did http call and get user id and name. now i want to is use that whenever i want to in any controllers.

i tried with angular value service like setting

app.value("user",{user_id:"0",user_name:"blank"})

and http call where in a controller

app.controller("exampleCtrl",function($http,user){
      user.user_id = data.user_id;
      //lets say the user id is 4.
      //and now user.user_id should be 4 as well
})

now in another controller

app.controller("nextCtrl",function(user){
    console.log(user.user_id);
    //gives me 0 which should be 4?
})

i though it would give me 4.

I hope you got the general idea of what i am trying to do is there another way to do things ? or am i doing it the wrong way? pLease guide me.

Thank You.

Answer 1

Well, there are various options for you like using:
$sessionStorage, localStorage, appConstant, $localStorage and so on.

You can even share the data between controllers using Factory and Services.

Since you just want the variable to be known throughout the controller. I will be giving you a simple example of using $sessionStorage.

In order to use $sessionStorage or $localStorage, you need to inject ngStorage.

First in your index.html, include the source:

 <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>  

Then in your module definition, inject the ngStorage:

var app = angular.module('Your App Name', ['ngStorage']);

Your HTTP CALL:

app.controller("exampleCtrl",function($http,user,$sessionStorage){
      user.user_id = data.user_id;
      $sessionStorage.user_id = data.user_id;
      //lets say the user id is 4.
      //and now user.user_id should be 4 as well
})  

And, in Another controller you access it like below:

app.controller("nextCtrl",function(user,$sessionStorage){
   console.log($sessionStorage.user_id);
 //gives you 4 which you can then assign to any var you like.
    console.log(user.user_id);
    //gives me 0 which should be 4?
})  

Following PLUNKER demonstrates the use of factory and $sessionStorage to share data between controllers:
http://plnkr.co/edit/XPHwKQYcSCk3GSilvFtE?p=preview

Answer 2

Angular has a module called ngCookies that will allows you to interact with cookies, and it’s simple to use!

var app = angular.module("myApp", ["ngCookies"]);

ngApp.factory("userPersistenceService", [
"$cookies", function($cookies) {
    var userName = "";

    return {
        setCookieData: function(username) {
            userName = username;
            $cookies.put("userName", username);
        },
        getCookieData: function() {
            userName = $cookies.get("userName");
            return userName;
        },
        clearCookieData: function() {
            userName = "";
            $cookies.remove("userName");
        }
    }
}
]);

Answer 3

If you want a quick solution, I think you can just store it on the $rootScope: AngularJS using $rootScope as a data store. (Probably you won't update it very often).

If you don't mind to add a dependency check out this Angular module: https://github.com/gsklee/ngStorage. This gives you the best control over your stored data's lifetime: HTML5 Local storage vs. Session storage