Best place/way to store 'global' data such as 'current logged in user'

[Chris Hubert]

Hi all - I am new to Angular, and single-page apps in general, so I am a newbie here.

My question is about logging users in, and more specifically, once they are successfully logged in, how best to store the "current user" data.

I come from an ActionScript background, and from my experience I would store this in a UserModel and broadcast events one a user is logged in/out - however I am lost as to exactly how best to do this in Angular.

So far I have a REST based api that allows users to login with an email/password - this returns json with either "error"/error message, or "success" and the user data (user id, avatar image, display name, etc)

I have been able to use angular to create the login form and POST the email/password to it, and get back a correct response ("error" or "success").

Where I am stuck is where best to store this user's information, as I will need it in various places throughout the app. For example:

- once logged in, the "Login/Register" nav link should switch to show their user avatar and link to their "Edit Account" page

- any time they want to leave a comment on a page, I want to pre-populate their avatar pic next to the comment textarea

- etc.

Any help would be greatly appreciated! Thank you so much.

[Chris Hubert]

Oh one other thing I should mention - it would be great to have a getCurrentUser() function that is accessible from any controller or directive that can snag the user info.

Thanks again!

Chris

[Daniel Hinds-Bond]

your best bet is probably to create a service and store your data in there.  services are singletons so the same data will be available to all controllers into which you inject the service.

007

[Joshua Miller]

I agree with Daniel. For more details, see this SO post of mine: http://stackoverflow.com/questions/14206492/how-do-i-store-a-current-user-context-in-angular/14206567#14206567

Josh
(sent from my phone)

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Chris Hubert]

Josh and Daniel - thanks so much for the advice! I will look into creating a service for this - Josh, the example link you provided looks especially helpful and right in the direction of what I was looking for. 

I thought services where more just for communicating with REST endpoints, but I see now there is more to it. Thanks!

Chris

[Joshua Miller]

I'm glad we were able to help. :-)

Services are for lots of things! They communicate with server endpoints, can be models, manage inter-component communication, hold application state, support reusable controller algorithms, and much, much more. Services (coupled with dependency injection) are one of my favorite AngularJS features.

Josh

[Peter Bacon Darwin]

You should make ample use of angular services they are singletons that you can inject.
Also we do stuff like this in our demo app https://github.com/angular-app/angular-app

Pete
...from my mobile.

--

[Michael Bielski]

What about localStorage and sessionStorage? Those do the exact same thing.

[Peter Bacon Darwin]

Yes if you need the data to persist. But even then you should be wrapping them in angular services

Pete
...from my mobile.

On Feb 15, 2013 3:26 PM, "Michael Bielski" <michael...@yahoo.com> wrote:

What about localStorage and sessionStorage? Those do the exact same thing.

--

[Michael Bielski]

I'm don't understand why I should be wrapping localStorage/sessionStorage in an Angular service. Those values are available anywhere simply by referencing them, so why the need to wrap them in Angular? It seems like a lot of unnecessary overhead.

[Clint Checketts]

Michael, 

The benefit of wrapping them is just a good design decision. Angular's dependency injection is very useful for testing. I can mock out a service that provides a value and my tests run great. If the call to localStorage or sessionStorage is hard-coded into the controller, you can't mock it out.

-Clint

On Fri, Feb 15, 2013 at 10:07 AM, Michael Bielski <michael...@yahoo.com> wrote:

I'm don't understand why I should be wrapping localStorage/sessionStorage in an Angular service. Those values are available anywhere simply by referencing them, so why the need to wrap them in Angular? It seems like a lot of unnecessary overhead.

--

[Michael Bielski]

Ok, now THAT I understand! Thanks Clint!

Makes me wonder why this isn't part of Angular in the first place, though. I wonder if anyone has published a service that covers this? Hmmm... have to do some looking...

[Joshua Miller]

Not only that, but also for DRY principles. If you wrap it in a service, you can do something like "Model.save()" from any controller, but only have to worry about implementation in one place - the service. Also, you could easily have that `save` method persist locally or push changes to the server based on application state. Etc.

I'm not aware of any pre-packaged local storage services, but if you create one, do share. :-)

[Michael Bielski]

On Friday, February 15, 2013 9:29:37 AM UTC-8, Joshua Miller wrote:

I'm not aware of any pre-packaged local storage services, but if you create one, do share. :-)

Of course!