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.
Related
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'm wondering if I can have a JavaScript-based application which has a main "template" as a background/main app of some sorts mixed with some URL routing to show dialogs and such? say, here's a short example:
Main app displays google map and whatnot. URL: /#
User clicks some menu item and it displays an options dialog. URL: /#options
User goes to a sub-options menu. URL: /#options/advanced
User closes the main option dialog, back to main app. URL: /#
User puts some coordinates in URL and the map locates it. URL:/#coords/100/100
The main idea here is to keep the map visible (and other stuff that I want to show in that template, too) in the background while using the URL to either display dialogs, forms or even to control the google map itself - BUT that if the user goes to, for example, /#options on first load, the app should load everything and then show the options dialog, okay?
Basically, I'd like to have a "main state" page which contains the most important part of my app, but I'd like to use url-routing for displaying dialogs and executing actions, that users can bookmark in the future and share and so on. I dunno how is this idea/concept called, so that's why I'm asking.
Also, what can I use to archieve something like this? I know this is kind of an open question, but I'm aiming for a JavaScript-based app/framework (TypeScript works too). I don't know if Angular2 + ui-router can do this, or even how should I google this?...
If Angular2+ui-router can do it, then great! but how?. If there are any other frameworks or combinations please provide an example! I've read about vue.js, react.js and so on, but vue.js seemed too simple and react.js still makes me feel uneasy mixing HTML inside the JS files, it just feels unnatural. Thanks in advance for any pointers you can provide! :)
Angular 2 can accomplish this. One way would be to have just one component. This component shows your map.
Your logic can watch for changes to the URI parameters and show/hide options accordingly. Since these parameters are not always present, you would use optional parameters.
While your app is running, you can add event listeners to buttons and links that should change the view state. When the user clicks a Select City button, the event listener could direct him to a URI with the appropriate parameter: ;view=dialog;target=city (Angular 2 uses matrix uri notation by default)
The component would be listening for changes in the parameters and react accordingly.
ngOnInit() {
this.route.params.forEach((params: Params) => {
// this is executed every time new URI parameters arrive
this.viewType = params['view'];
this.target = params['target'];
//todo: update the model to match new parameters
});
}
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 not sure if I have used the technical term, or so I will describe what I am wanting to do with my backbone routes. In my application a user logs into a dashboard and they can see all the activity that is related to them, clicking on an activity link create modal for them to edit that activity.
On landing in the dashboard the URL is http://app.dev/#dashboard on clicking a link I want the modal to overlay the dashboard, but for the URL to change to http://app.dev/#activity/edit/:id without losing the activity view that should site behind model, currently the app navigations to edit route and re-renders everything, is there another way to preserve a view but change the URL?
You need to create a subview which will render the edit view (or just create an overlay popup).
Either way, you cannot do this using a <a href> tag, but you will need to do this via javascript.
Backbone.js has a way for you to easily navigate through routes using:
router.navigate(fragment, options) - see Backbone Navigate
Using {trigger:true} you can call the router function (which is basically what happens now) and that will re-render the view using the router function (as if the user landed on that page). By default, and if you pass {trigger:false}, Backbone will only change your url, but will not trigger the router function, so it will be transparent to the user, besides the fact that will see the url change, and he can see the change in his history (if you used Backbone.history.start())
Bottom line: To just change the url, without going through router, call router.navigate(requestedUrl, { trigger: false}) and don't forget to actually show him the new view (popup, overlay, nested view, etc...)
So. I've been messing around in AngularJS (which continues to amaze me every minute I work with it) and I was wondering, when using $routeProvider and $routeParams, is there any way to force the current url/location/deep-link in the location bar in the browser to automatically update when certain models change on the page?
Here is the app that I'm messing around with.
Its the app from the tutorial on angular's site except I've screwed around with it and added in some features like pagination. If you notice, upon visiting this link you're redirected to #/phones//age/5/0. The first segment is the controller, while the last 4 describe filters, respectively, a text query, the "column" to sort by, number of items per page, and page number.
The controller for this takes these in through $routeParams and updates the models/views like normal but how can I force the url to change automatically when the user changes the models/views? So if you were to type xoom in the query box on the page when you first visit, the url in the location bar would change to http://brandonep.org/angular-test-phonecat/#/phones/xoom/age/5/0 as soon as you type it.
Thanks in advance! And sorry if I'm unclear but I tried my best :P
I would use parameters on your url (/?a=1&b=2), and then inject $routeParams into your controller to interpret the parameters on controller load.
Then you can use $watch to watch your model, and each time it changes set window.location.url. Here's an example: http://jsfiddle.net/andytjoslin/eYJmR/