Saving state of application accross views - angularjs

I have simple app and one view that is about to change via navigation bar.
Default angular's behaviour is to call controller code every time I am navigating. This arise problem of saving state when changing views (i.e calendar state, checkboxes etc.)
I search for most common well known solution, that is why I am asking below questions:
Should I encapsulate state data in service and load every time controller is called? And this is fine?
Should I prevent situation of calling controller every time I am switching to different menu view?
Does angular-route handle for me preventing of calling controller every time view changed.
Does ui-router handle same as pt. 3?

Related

Data not populating into view

I am using state provider to route ,when i switch between pages sometimes data loads on view sometimes it's not ,though i can successfully get data from my db but it's not population in my view file to populate the data I need to refresh the page every time
When you switch page, components that were shown previously get disposed.
So any propriety of the scope or any propriety of the previous components gets desroyed.
The simplest solution is refetch needed data in the component(s) that you are showing in the "next" page, best practice is to do that in $oninit function.
Another option is to build a service that stores data between routes and components. This solution is more complicated.

ExtJS Multi-ids stateful components

My problem is the following.
I have a component that I want to be stateful, and the state based on some ids (per user and per task basically) and this state is saved in my database.
Following some tutorials I managed to do a stateprovider that requests information through ajax requests.
Though I still have a problem since the restore event is only triggered when reloading the page, but not on task change.
Would there be anyways to trigger state change when tasks are opened.
Because the problem I have right now is if I force the restore, it happens but the task will somehow still be opened with the previous state (I guess because of the fact that the provider is asynchronous?)

Can we make controller as singleton in angularjs? And view of visited state should be same as i left?

In my project i want that , if i change state and come back to visited state, so controller should not be reinitialize . And as well as view of that state should be same as i left.
So how we can do it in angular??
Controllers don't act as singleton. But you can preserve state in a service/factory which behaves as singleton https://docs.angularjs.org/guide/services. But keep in mind that state in service will lose after the user clicks on browser refresh button and the whole angular app will be restarted. You can use local storage/cookies if you want to keep state also between page refreshes.

How can I resolve an async request before conditionally routing in AngularJS UI Router?

This is a problem I've seen discussed in a few posts around Stack, but I haven't found a clear answer that actually works for me. I expect this to be a common problem, so alternate approaches would be fine too.
Basic concept is that I wish to conditionally display one of two states when a user visits the site. I have an API call to my external server to check if the user's session is active. If so, I can route to the 'home' page, otherwise I route to the 'welcome' page.
The problem is that I don't know how to achieve this.
My initial idea was to create a resolve object in the home state, and resolve the api.isLoggedIn call there first. That would stall the transition so that I could check the state $stateChangeStart event, and then call event.preventDefault if necessary.
The problem with this is that onStateChangeStart is called before the resolve method, so I cannot know whether the user is logged in before the state change.
At the moment I'm thinking that the only way I can achieve this is by presenting an initial state whose controller will check if the user is logged in and then manually call a state change based on the response.
Is there a more idiomatic solution?

Changing a view in the ui router $stateChangeStart event

I have a site with a main state and view that can contain a number of sub views for each route. I'm implementing authentication and I'm using the $stateChangedStart event to check whether a user should be able to see the page. If the user is not permitted to view the page, I still want them to be redirected, but I want to change the main view to a forbidden view.
In the $stateChangeStart event I have access to the "toState" object which I can then modify the views of. Unfortunately, this doesn't seem to have any effect.
Here's a plunker to explain: http://plnkr.co/edit/7pvIEQ6e4zitp6ANJJ9h?p=preview
I've realised that I'm thinking about this the wrong way. I don't need to intercept the state change event because I'm awlays going to state change to that page anyway. What I need to do is handle the permissions issue on the page itself.

Resources