Data not populating into view - angularjs

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.

Related

Persisting redux state vs dynamic urls

In the app I am working on I have a state that is chosen in a dropdown by the user. I would like this state to still be the same after the user refreshes the page
Two options:
Store the state in the url by adding "/:state"
We must hit the api endpoint again to get the data based on the state. So it is always fresh
The url can be stored in history and copied/bookmarked
Everytime the state is changed by the user, the url changes causing a reload of the page
Store the state in redux and persist it
Have to install a package like redux-persist which takes some configuration
data persists on page reload so we don't need another api call
data may be outdated and need to be re-pulled
Which option is better? What scenarios break either option?

Everytime the state is changed by the user, the url changes causing a reload of the page
If you use something like react-router, app doesn't reload each time you change url.
Decision where to store some setting depends on the case. I usually prefer to store in url only things that are related to navigation: changing views/pages, opened modals, search/filters. Usually you want to store it in url when you want this url to be shareable with other users. So it you want to put some dropdown value in url, consider: Do you want browser navigation to change this value? Does this dropdown change some view?
Also, sometimes you have to store this selection on backend. Usually when it is a property of some entity or it's a setting. You have to consider whether you want this dropdown's value to be shared between multiple sessions on different devices.

Links very slow to display 'large' components

I am working on a React app, and within it there is a page with a lot of graphs and large list component, which takes some time to load (performance dependant). This is fine for now, but the issue comes from the following:
at the first render, there is an API call (App wide as different pages use the same data). A loading spinner shows while the API data is fetched
Once the data is fetched, it is Redux manages the state, and each component just takes what it needs from there (no more loading).
My issue is that when I navigate between pages trough links (react-router), after I click on the link it takes a while for the page to show and the menu to update the current page. None of the state data has changed in that timeframe, so I assumed a PureComponent would prevent re-render, but it doesn't work.
Is there any way to not re-render the page? I would expect to click on a link an immediately see the page that was already loaded before.
Sorry if the question is obvious, I got quite confused while researching this, with cold splitting, lazy loading, etc. which seems to be more about initial load vs. navigation?

If you have a large component dataset to mount and your state does not changes or affects re-renders you could prevent component from unmounting entirely.
If you are using react-router you can rely on setRouteLeaveHook.
If your unmount depends on conditional rendering, it is easier as you can hide your component in various way, including css display:none

There are several ways you can do this
The first one would be to not unmount the component, just hide it with CSS and display: none, but that's a shit solution if you ask me, since you'll still have the component in the DOM.
Another solution that you can use is the one that the guys from the Facebook team used when creating the official website for React. Once you hover over the link to the page, send a request to prefetch the data for that page. So, before the user even clicked, you will have the request already sent.
Another solution you can use is to cache the data. If you are not worried about users with older browsers waiting a bit for the component to load again. You can keep the data for the component in localStorage, then, when you are about to mount the component, check if the data is already in localStorage if it's there, just render the component, if not, just grab the data again.
A combination of the first and the second option would make your component pretty much always instantly render.

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?)

When should I load the state specific data in AngularJS, on loading of application or when user navigates to the particular state?

I am developing an SPA using AngularJS. I have a Home state which is the default state and loads as first state when application loads. On Home state I have provided the links to other states. In all other states some data is common which is to be bound to drop-down lists in those states e.g. All states has Region drop-down and country drop-down and data to bind to these drop-down would always be the same. Each state also has one more drop-down list for user preference and data bound to this drop-down list is different for each state. I am getting all the data from Database.
As region and country data is common for all the states hence on the load of Home state, this data is loaded from database and saved in cache and then it is used in any other state from cache only and we save Server and Database hit.
But I am confused for User-Preference data, as it is state specific so should I also load all of it while Home state is loading and cache it or should I load it only when user navigates to some other state and then just load the User-preference data for that state only and cache it?.
I am more inclined in the direction of "as and when required loading of data" from Database. But some others in my team are of opinion that as this data is not much and would even take less than 5 seconds to get all the user preferences for all the states from database then we should load all while loading the home state and cache it (i.e. on application load itself).
Please suggest what should be better approach and will be happy if you provide your reasoning too for favouring the one over other.

Saving state of application accross views

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?

Resources