I have recently started working on angular JS.
Currently i am using $location.replace() method, but it clears only the current state. What i want to do is to clear entire history stack of my Angular Single Page Application: Example:
I have 3 routes on my Angular SPA application : #loginPage, #registerPage, and #homePage.
First my application lands on #loginPage, on that page after clicking register link #registerPage is called, on clicking submit button on successful registration #homePage is displayed.
Now, before clicking submit button i want to let user to traverse the back path i.e. #registerPage to #loginPage.
However, After successful registration, i want to restrict user from traversing the path.
So is there any way possible i could restrict user from traversing entire history at specific point.
Related
I’m trying to create multiple pages with forms. When I navigate from one page to another, I want the data that was filled by the user to be saved automatically (lets says, in the state of that component). Note the user has not submitted anything yet, nor there is any save button to fire any function.
The user has simply jumped from one page with form components(eg: ) to another page with other form components using react routers... And I want whatever the user entered saved automatically.
Can that be done? When the user goes back to the previous page, the user can pick up where he left off?
So in this example, when the user goes back to the previous page(using react routers) the component did not reset or refresh itself, and whatever was entered; the user would not have to enter again, hence picking up where he left off. There were talk about using iframes, but I'm not sure about that.
Of course all this eventually will go to the redux store. But I’m trying to solve the “saved” state of these form even after navigating to other components/pages using react routers
For that, you can take a look at redux.
If you don't want to use redux i will link my answer that uses react-router =>
With react-router, you can transfer "state"
this.props.history.push({
pathname: '/ShowRecommendation',
state: { taskid: Task_id }
})
and at the ShowRecommendation.js componenet you can get the value using
console.log(this.props.location.state)
can we pass a value when we move to next component using this.props.history.push("/next Component")?
I am working on an Ionic-1 App. I am terrible confused in managing the back history of my app. Consider this scenario:
Start from home page then
Does a 3 step user registration process
After the end of user registration redirect to records page
Now clicking back button (hard or soft back) I want to navigate back to home instead of cycling through user registration process. There are other scenarios like this where back behavior needs to be modified. Are there any references around to implement back behavior systematically? Should I manually define view hierarchy tree structure and somehow figure out where in tree current view is and then go to parent?
As per my suggestion you should pass parameter say 'extraparams' in your url and set it value to 'home'.And on record page controller then make a function on back button say 'goBack()' where you can check if value of 'extraparams' is 'home' and then use $state.go() to navigate to home view.
If you can keep and maintain each and every section using state approach then you can redirect to home page or what ever the page you prefer to redirect to.In that way you have to implement back button like this way, $state.go('homeSate');
or if you can keep 3 steps(registration) as sub states and have try by injecting $rootScope to your controller in which allows you to access your parent(home).
I have an angular page that I want to use a plugin like intro.js to demo the different features of the page. However, the issue is that not the entire page is displayed on load. The user is presented with an input box at first that they have to fill out with an id and hit submit. Once they hit submit, the page makes an $http post call and then displays the rest of the page with the data and the other features.
So in this situation, what is the best way to demo this page when only a part of it is display at the beginning? I had 2 ideas
Use a static image of the full page and do a demo on the image
Have a demo button that presents the first part of the page and then when the user submits the id, provide a separate button that demos the rest of the page features
Are those the only 2 ways to do it? Is there any other way?
there are 2 ways
once initial demo is complete, add a hint button (it is feature in intro.js) and restart demo once user click hint
use programmatic way to add steps. first display 2 steps, let user submit the form and on load of controller. restart introjs again
I have seen history.js, it seems just work on current page:
such as:
www.mysite.com
www.mysite.com/?state=1
www.mysite.com/?state=2
www.mysite.com/?state=3
www.mysite.com/?state=4
www.mysite.com/?state=3
It can make back button back follow state from large to small only on the same page.
What I want is:
www.mysite.com/center/?state=1
www.mysite.com/product-list/?state=2
www.mysite.com/product-detail-manage-form/?state=3
center can not return to product-list, and product-list can not return to product-detail-manage-form.
Because a user can edit or delete a product at product-detail-manage-form page, and server will redirect he to product-list page after form submit.
I don't want he return to product-detail-manage-form by clicking back button on product-list page.
Is there any easy way to achieve my purpose?
Try using javascript to manipulate the browser history: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
This way you can control the history stack and which pages the users can get to using the back button
The application has a Home item in the navigation bar (the item is in all the pages). I would like that when the home item is clicked, based upon the page number a warning box is shown to the user warning them, that all unsaved work will be lost. If the user presses yes, he or she will be taken to the application home page and nothing will be saved. If they press no, he or she will stay in the page.
Currently this dialog box shows up in every page. In Oracle Application Express, shared components > navigation bar > target area, these are my settings:
Target type = url
URL target =
javascript:if(confirm('All unsaved work will be lost?'))
{window.location.href ='f?p=&APP_ID.:1:&SESSION.:&APP_PAGE_ID.';}
I would like this behavior to only occur in a select number of pages. When a user clicks on the pages not included in this list, the warning box should not be shown and the user is taken to the application home page.
What you'd want is a dynamic action which targets the navigation bar entries. However, there is simply no easy way to selectively enable or disable this action on select items save for testing the text of the anchor tag. That would mean you'd be hardcoding values in your dynamic action to test the links, which i will not recommend.
There are no classes that can be assigned, and no onclick events.
You could use the code you posted, and have a javascript function which takes a page id as input parameter and then checks the page id against a list of pages which allow the action, but again complicated. It could be made dynamic with some ajax, but since you're unfamiliar with javascript it's better to first get accustomed with it before tackling that.
So, instead of inventing something like this, take a look at this save before exit plugin. It will check for unsaved changes, and you can add this just to the pages you want it on.