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).
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 have 2 routes defined as homepage and page1. I am going to page1 from homepage by this.router.navigation(with some queryparams).Now once i go to page1, i have some filters,which i can add to get particular data from api.Once i add those filter i change the page1 url by this.router.navigation(with some queryparams).After adding/deleting multiple filter , my url changes many times..Now i have a back button which upon click should navigate me to Homepage.
1.I have tried using history.back/location.back.But i have to click multiple times.(i see that navigationstart gets called multiple times)
2.i have tried a solution using rxjs pairwise
But i am not able to get the previous page(homepage).
3.This is just a situation.Basically i have to get the route of the preious page.I can't hard code the path in backFunc,Because this has to be generic for all of my other similar types of pages.I can come to page1 from any other page, and should be able to go back to the respective page.
Am i missing something very obvious , does Angular 4 provides any way to tackle this?
I'm slightly confused by the question but it should be as simple as just navigating to the homepage by using router.navigate. Failing that, try using https://angular.io/api/common/Location service's back function.
router.navigate has extra parameters like "replaceUrl".
If you set it to true (when you change query params), the browser will consider you don't change page. So an history.back will works.
Have a look at https://angular.io/api/router/NavigationExtras.
this.router.navigate(['/page1'], {replaceUrl: true, queryParams:{...}});
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.
I need to keep controllers' state in angular ,for improving some user experiences, during user is visiting different pages.
For instance I have a list, which is created via a directive, and it has a pagination section, so imagine when a user go to page 20 and choose an item, they'll be redirected to the detail page, but when they click back button and return to the previous page they see the first page of the list which is not convenient and they expect to be on page 20 again.
I've come up with several options:
Using a dialog to display second page (item detail), so they can close that modal and return to the previous form without any change.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
Keeping some crucial variable globally to store controller state and using them when user comes back.
But I think there should be better ideas like keeping controllers' state during redirection.
Any idea would be appreciated.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
I prefer this because you get the added benefit of staying on page 20 when you do a page refresh. Options 1 and 3 do not give you this added benefit. Path params are also bookmark friendly.
Another alternative for you to look into that is almost as good is localstorage
or cookies. I dont think these options are better than your 2 though.
I have multiple pages in my Angular app that the user can change quite a bit, i.e. open tabs and pills, modals, etc. Let's say, for example, they open a modal and then click a link in that modal which leads them to another page. On that other page, when they go back in their browser history, I'd want them to see the first page the way they left it, i.e. with the modal open, not how it looks when you reload it.
I am using ui-router with Angular 1.4.3.
So far I have looked into the following links:
https://github.com/angular-ui/ui-router/issues/63
https://github.com/angular-ui/ui-router/issues/562
...but they don't seem to be quite what I need. And I'm not even sure how to google this.
Another example for this is when a user enters something in a search bar, then clicks on a result which leads to a new page. When they go back, they would have to enter the search again, which is not the greatest experience.
Use a service to store page state
Rather than storing page state and user input on the $scope, store it on a persistent service that is injected into the page controller along with the $scope.
Store a reference to the service on the $scope:
myApp.service('MyPageStateService', function() {
this.someProperty = 'some initial state';
});
myApp.controller('MyPageController', function($scope, MyPageStateService) {
$scope.state = MyPageStateService;
});
and from the page template access data stored on the persistent state service:
<div ng-controller="MyPageController">
<p>My page state is {{state.someProperty}}</p>
</div>
When navigating back to this page within the app, the controller will get a new $scope but the same instance of MyPageStateService.
You may take a look at sticky states. They are not limited to forward/back navigation, this gives some consistency to them.
If this behaviour is not desirable anywhere but forward/back, I guess it can be done by doing $stickyState.reset('...') on $stateChangeStart for everything except the adjacent state.