I am working on a project where we have a subscriptions plans container at the home page of the app.....when we are the at the other route where the user need to buy subscription....so there we provide the button to buy subscription....but what i want is when the user click that button i want to route the user to the specific part where the component of the subscriptions plans is......To make this work what i tried is....i gave the parent component of that area an id of subscriptions....then when the user is at different route and he click that button there i also gave a tag with a href of that id i.e. #subscriptions.....but its not working........and i hope you'll understand what i am trying to say.
here if the user havn't bought the subscription i want him to route to home page to buy subscription
This is the area where i want the user to route to. (Not the top of the page like a normal react-router do)
Related
For example i have a page /profile on there, the user isshowed his profile picture. When the respected user clicks on it, it changes to /profile/avatar. But, i dont want to change the page but show a component which otherwise will not be shown in /profile. Think of it as when you click on another's avatar in twitter, it changes to /#elonmusk/pfp a modal shows the image but it doesnt unmount the previous page
How can i implement that?
In React application I had implemented routing.
In login component -> Accepting Username and Password.
If valid -> bookticket component -> Two buttons in this page - Viewshows and BookTicks.
Viewshows will display movie details.
BookTicks will route to BookTicks component.
After clicking on Viewshows, am clicking on book ticket button, so it will route to accept some user info for booking.
So my problem is I want to go back to bookticket component where only those two default buttons should be there. The table and other details should not be there.
I tried with history object but this is displaying buttons and also the details which I had viewed earlier.
this.props.history.push('/bookticket');
If a tag is used, its getting into 404 error, because it is deployed in IIS.
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
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;