I am going to try to be as specific as I can. This is what I am trying to accomplish:
I want to be able to show a User, which kind of shoes fit its needs. The user will be shown 4 forms, one at a time.
My idea is to show a form, and once the user clicks 'Next', save that status and show the next form. After all forms have been filled, use those choices to fetch the API and return results to the User.
Here are my questions:
Where should I store the status of his choices? Cookie? Session?
How would I organize Angular in order to have all these forms that are shown one after the other? Any resources that I could use as an inspiration?
BTW, I am using Rails as a backend.
I have based my question on this tutorial: http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/
I see that he uses saveState() on submit, but I am not sure where that function is defined.
Since the app is a angular SPA, you can use a angular service to store the state of the selection made by user. This state would persist until user explicitly refreshes the browser (F5).
Create a service like
angular.factory('shoeSelectionState',function() {
var states=[{selection:{}},{selection:{}},{selection:{}},{selection:{}}];
return states;
});
In your controller inject this service,
angular.controller('MyController', function(shoeSelectionState) {
$scope.states=shoeSelectionState;
});
and bind the states array to each form elements, something like
<input type='text' ng-model='states[0].selection.size' name='size'>
If you want to persist the data on page refresh try using sessionStorage instead of localStorage as it gets automatically cleared when user closes the tab. The service mentioned above can do the persistence of the content to storage.
You could use localStorage as #sumain-bogati suggested, but you could just as easily do this without any page reloads. What you will need is a container with a controller that will store the user's choices (i.e. the model) and then use ngShow or ngRoute to display each page. Here is some example code:
Plnkr example of three pages and a model
Instead of calling the fourth page, you would call a function which would initiate an $http call to your backend API to submit the model values.
Related
On page load, say for a particular route for (e.g. https://localhost:8000/home/index), a service is called and the response from the service is rendered to the page at the client side.
On the same page, I have a link that pops up a Backbone.js modal and from the modal a click event triggers which hits another url (e.g. https://localhost:8000/home/index2) upon which another service call triggers and the response is rendered to another html page.
On the same html page, I want to display a value which I got from the first service call on page load. However, I am unable to retain that value as there are two different requests each time. Hence, I cannot even append the value from first response to the request object and use it a second time.
You can use JavaScripts Web Storage API to storage information on client browser.
MDN Web Storage API
For example, If you are on the first screen and call a service, store the service information on localStorage
localStorage.setItem('firstService', serviceResponseObject);
Once you are navigated to second page, you can use localStorage to read to previous service information
localStorage.getItem('firstService');
There are multiple ways to store state between requests.
From the server, if you're using say Express etc, you could store the result in a Session. Or you can even store state in the requests query params, or from a POST request.
You could also store some data on the client end, using say Cookies or localstorage.
What you choose really depends, it might be best if you explain in more detail what sort of information your passing between pages.
If it's just a simple value, I would go for using query params.
eg. Just place in your url https://localhost:8000/home/index2?value=123, and then from node.js, req.query.value would have your value.
I'm developing a Angular App using Restangular with Web Services REST, but when I change between sessions several user the information have a delay to display information. for example a view CustomerDetail with Information of User1 but when I change a User2 then it show me information of User1 and later in n seconds show information correctly the user User2.
My question is, how to reload information correctly in view?
first of all, try reducing server calls by getting as much data at once and then create client side reload. regarding your case, when you click on some button to change users, first change a variable to "onLoad" to true and perform ng-show="onLoad" for some loading div and ng-show="!onLoad" for some other div contains users info. then when you get back your data flip "onLoad" value...
I have created one login page in angular js and Written a servlet for login action. I am trying to login with username and password. Currently I am able to redirect to Dashboard page after successful login using $window but I want to show that user data also on that page. So how to do that in angularjs and servlets?
Use the HttpServletRequest to get the Remote User.
In your dashboard Controller, fetch the remote User via AJAX (for example). and set the fetched User to $rootScope.
As soon as your DashBoard page loads, the first AJAX call should be to fetch the User and set the fetched User to $rootScope.
on your dashboard just use this
$rootScope.currentUser = <%= HttpServletRequest.getRemoteUser() %>
you can use this directly in html page
You have different choices to store you data using localStorage in angular js eg:
localStorage
sesstionStorage
For example following data you have to transfer to another state
var user_data = {"user_id": 1,"username": "Alpha"}
// To add to local storage
localStorageService.set('user_data',user_data);
// Read that value back
var user_obj = localStorageService.get('user_data');
After saving you can get these data from same storage where you saved.
This will really help you.
Please read out this link to get more understnading.
Thanks
I am working in AngularJS application with Spring rest as backend. I am pretty new to angularjs.
I have a UI page where i display some list of objects in table.There is an edit button against every record.When i click edit, another page opens which set the data accordingly.
The issue is, being on edit page, if I refresh the browser, I loss my data. One way I can think is to make another rest call but I want to avoid making any rest call.
Is there any way to retain data on the page on refresh or making rest call is better solution?
I would think the cleanest way to do it is to make a REST call, as the data could have changed on the server. However, if you want to avoid the call anyway, you may use localstorage. Just store the data in your table in localstore with key value pairs (assign some unique key to every row). You could use this plugin: Angular LocalStorage
I am creating mobile chat app in angularjs.
It has lets say 100 userlist. If user presses on some userlist, it takes to next view(chat view). So, as user presses on userlist . I want to create a dynamic chat view of that user based on his userId.
One way of doing this is - I define the route like this 'chat/:userId'. Then access the userId. Also messages of particular user is coming from server. And new chat messages is appended to the view.
I have doubt that if user open the same view again it will load the basic template again because view is changed . It will again send the request to server again. It should not.
For clearing the question, In mobile jquery (http://iflychat.com/drupalchat/mobile-chat)
If user opens the view lets say public chatroom , It only takes load time once. If we again come back to this same view, it loads instantly. It creates the view based on url. Is this kind of functionality possible in angularjs?
Angular has an $http cache that could help you accomplish something similar:
$http.get(url, { cache: true}).success(...);
There are also a few other ways using the same cache.
Here is a very detailed post How to cache an http get service in angularjs
Thanks,
Paul