AngularJS need to store userdata , should be available to entire application - angularjs

I need to store userdata, should be available to entire application, should be accessible to required controllers, after searching I found a few options to store.
using a service to controllers
$sessionStorage
$localStorage
of all the above could u please tell me which is the best practice? Or is there any other solution other than the above 3.

Using a simple google search might have told you a lot about the best thing? there is no single best thing it's all depends upon your use case.
Services are the best way to interchange data between controllers.
if you don't want to persist the data(if data don't want to be there if the page is reloaded) you can use a service, If you want to persist the data you can use localstorage.

Related

What is the best way to store static data from API with AngularJs?

I wonder what is the best practice for storing lists from different API's and display them without the need to make redundant API requests.
Suppose user logged in - i want to store all the pages static lists for dropdown menus in a way that they will be available to all the controllers - by doing the API requests once.
The options that i came across are the following:
creating a factory and store the data in $rootScope.
Use sessionStorage.
What is the best way?
Consider storing data in rootscope a very bad practice.
I'd suggest using this package
https://github.com/jmdobry/angular-cache
You have nicely explained inside documentation why would you use this package instead of angulars built in $cacheFactory service.

AngularJS mantain state when changing views?

Is there a way to maintain $scope when changing views and coming back?
When i load a certain view there is some heavy loading (loading data), but if i switch views and comeback to this one al the data is reloading again. Is there a way to prevent this?
I am not looking to share data between views, I just wish to have the old state when I return to the same view.
There's a few ways to handle this.
$rootScope
You might be able to store the values in the $rootScope, I don't believe it changes when you use the internal routing module, but I would not recommend this.
Services (My Immediate recommendation)
You can use a static service, where the data can be stored, either constantly, or while changing route. Then you can load the data into the $scope again.
Caching
AngularJS has an inbuilt cache, you can use. This is great if you only need to store some of it, or for a smaller amount of time. Read the documentation for the CacheFactory here.
WebSQL or localstorage
For large amounts of data, you want to store between sessions, you can use the WebSQL database in most browsers, or store it as text in the localStorage in the browser.

Where to store Session Attributes with angular js

I am new to Angular JS, have experience on building spring web applications.
My requirement is to store the some session preferences (Not part of the user Model/entity) into session. I need to use them through out the application.
I couldn't find the right way to do it. I found some options, need suggestion on which one to use it.
ngStorage - can access Local/session storage and store attributes in it.
LocalStorageService - another githubproject, i can use it to store in session storage/ local storage.
Based on the articles i found, localstorage keeps the data even after logout, so have to make sure i clean all of them after logout.
What is the common practice to store session attributes?
I am planning to use ngStorage directive and use sessionstorage and store it by encoding with Base64. Is it a good way to do it?
I am using Java 1.7 and Angular JS for building an application. I have used JHipster to generate the application.
Any Help Appriciated!!!!
welcome! Well, depends the situation, localStorage is an excellent option to store attributes, but yes, it has some limitations and you have to remember to delete this. Another options is to use Cookies of angular project to store attributes on Client Side. I used in some projects and works perfectly for my use case. But if you are using Java, the best way is protect this session attributes using Java HttpServletSessions. I Hope it helps.
i had the same issue and i resolved by find the answer of this question: https://stackoverflow.com/a/922058/5995665
I hope it helps.

In angular how do i share data on a session basis

So my understanding is that factories are singletons so any stateful data for a session would be ill placed here.
My next point of call was a service which returns a new instance of the service when injected however I am unsure how I would share one instance of the service to multiple controllers.
Is this an accepted way to solve this issue or does angular provide a better way?
My current use case is that I have a view with some partial views (each partial has it's own controller) and a modal window which takes in a row id and will display data dependant on that data.
I need to be able to share a instance of the service (or equivalent) across these controllers but on a per session basis.
How is this best done?
The singleton exists for one user and loaded SPA. Thats what you would usually refer to as a session. Its a good place to store data that needs to be accessed by different controllers.

The best way to pre-populate remote data in AngularJS app

In my AngularJS app, I need to retrieve multiple collections of static data from remote REST endpoints. Those data collections will be used throughout the entire application life cycle as static lookup lists. I would like for all those lists to be populated upon the initial application startup, and to be retained and made available to multiple controllers. I would prefer not to load any additional data dynamically, as one of the assumptions for this particular app, is that, once loaded, any further network connections may not be available for a while.
It is OK to take an initial hit, as the users will be preoccupied by reading a static content of the first page anyway.
I was thinking of making this mass loading a part of the initial application run block, and stick all this static data into various collections attached to the $rootScope (which would make that available everywhere else)
What is the best way to handle this requirement?
Interestingly enough, I just wrote a blog post about extending the script directive to handle this very scenario.
The concept is simple. You embed JSON data in your page when it loads from the server like so:
<script type="text/context-info">
{
"name":"foo-view",
"id":34,
"tags":[
"angular",
"javascript",
"directives"
]
}
</script>
Then you extend the script directive so it parses the data out for you and makes it available to other parts of your application via a service.
if(attr.type === 'text/context-info'){
var contextInfo = JSON.parse(element[0].text);
//Custom service that can be injected into
// the decorator
contextInfoService.addContextInfo(contextInfo);
}
You can see a live demo of it here: http://embed.plnkr.co/mSFgaO/preview
The way I approach this is to use a service (or a collection of services I nest), and set caching to true in the $http get functions. This way the service can be passed into any controller you desire, having cached results available to you without the need for additional http requests.
I can try to put this into an example if this is unclear to you, let me know.
edit: you can either wait for the first call to this service to do this caching, or do this on app load, either way is possible.

Resources