I have a question that suppose, I have an Admin Dashboard page, on which I have given a list of users. clicking upon a particular user the details of corresponding user is shown on a different page (say on userDetails.jsp). Now I have a back button on userDetails page, Clicking of which I need to redirect admin to the last visited page that is Admin Dashboard page, I have one solution that I can "Reload" the previos page on clicking back button, but then I feel that there is the overhead of calling a server side API, retrieving all the data, Again redraw the whole admin dashboard page even when there is no change made in the userDetails[because it is read only page, modification is not allowed there]. Is there anyway that I can make user of cache or anything else so that I will not need to go to the server to fetch all the data again. I am using spring MVC, angularjs, Thank you.
On your button's click event add the following code:
$window.history.back();
make sure to use $window rather than window since you're using AngularJS
Related
So there's a login page and let's say a dashboard with certain data fields. When I press logout from the dashboard it redirects me to the login page. But when I hit back button, it brings me back tot he dashboard and technically let's me access data I shouldn't be able to access.
It was solved by refreshing after pressing back button, because it seems that is the page cache loading from memory which needs to be refreshed. But I don't want the user to have to manually refresh.
Any workaround to that, or a completely different solution would be great.
In angular, you can use #hostListner(angular decorator). that is used for handling dom events in angular.
in your project, you can help localStorage and #hostListner
store client information on local storage with javascript.
store local storage
and then in the log-in page
add #hostListner event in component.ts file
event handling
Implement session validation in each of your route $routeChangeStart event. Whenever user loggout clear the session data and redirect it default route which should be your login page.
I am retain earlier values in web page controls once user click on back button in browser .
I want to do that in Angular application.
Please suggest
There is no specific way to tell when a user presses the back button.
What you can do, is call an ngDestroy hook and set local Storage items in the hook, refer to this article on how to set local storage items:
https://medium.com/#tiagovalverde/how-to-save-your-app-state-in-localstorage-with-angular-ce3f49362e31
I want to pop a modal with "Cancel" and "Yes" buttons when a user attempts to leave the single-page app.
To provide some context, I am working on a single page app that appears on a larger site that is not part of the single page app (so, the header and footer is part of the larger site, and single-page-app is the content). When a user attempts to leave to another part of the site (by clicking somewhere in the nav for instance) that is not part of the single page app, I want a warning modal to display with a warning. A user can close or refresh the page as much as they want, and it shouldn't pop a modal. Same thing if a user hard-codes a url (say, google.com in the browser), the modal should not pop.
So far the other similar threads I found on stackoverflow either uses Prompt component, or window.onbeforeunload. Both of these have the issue of them popping a default text box with a warning, and not a custom modal, which is an important problem, but that isn't all of the issue.
Prompt, to my understanding triggers whenever a user redirects within the single page app, which is not the behavior that I want.
window.onbeforeunload, to my undertstanding triggers even when refresh or close, which is not the behavior I want.
Maybe this isn't such a common problem, since I can't seem to find an easy solution for this, but any and all ideas are greatly appreciated.
I was trying to understand how we can maintain the previous data when jump to another URL and come back again.
I have a single page application, let's say page1, where I have a search field and search result. There are come external links in the search data and if user clicks to that links, URL changes and user goes to different page. How can I maintain the same result data when the user wants to come back to the previous result page by hitting browser's back button?
Make sure all you need for a page to be displayed in a given state is part of its URL. Let's take your example:
Search page. Initially empty. URL = /cars
You fill the search form and press the search button. This navigates to URL /cars?color=blue&year=2015. Going to this URL changes the route, and the route searches the cars and displays them in the page.
You click on a car. This navigates to URL /cars/12345. Going to this URL changes the route, and the route loads the car 12345 and displays it in the page.
You press the back button. This navigates back to URL `/cars?color=blue&year=2015. Going to this URL changes the route, and the route searches the cars and display them in the page, again.
In short, your app should work the same way as if it was not a single-page app, and if the server used the URL to generate a HTML page dynamically.
I have a design where login screen looks completely different from the dashboard UI.
Once the user logs in he is shown a dashboard where he can control things.
Now,the login screen just occupies the whole view with a form box in centre.
once user logs in, then he is taken to the dashboard.
In our current approach we have kept login as a separate angular app and dashboard as separate as I am planning to use a view that changes except the sidebar and header as the ng-view for teh dashboard.
Currently the whole login screen is a separate app, which i feel is little weird when it comes to dealing with things, so is it possible to have an overlay which occupies the whole screen and goes away when the user logs in ?
Of course it is. There are a couple options here. Some folks simply force you to the /login route until a successful login has been completed, token stored, etc. The other option is that you use a full-sized, absolutely-positioned container, with highest z-index, and place it on your main index.html. Until something changes, that's all you'll see. Then, use ng-If to remove that container once login is complete and a property of the view-model has been updated, such as navModel.loginComplete=true;