EDIT: I am rephrasing my question again :)
I have an Web Application that uses AngularJS as a client framework. I am currently loading a set of reference data (dependant data sets like Country, State, Region, Codes etc) on every page load. Is there a better way to make the server calls and store the data in a cache. At what point in the Angular life cycle do I make these calls to retrieve and store data?
There are many possible ways to do that. You can make a init call to your api as your page gets loads, and then save the data wherever you want.You can save them using localstorage,sessionstorage, factory, service,constants etc.
Related
I have the following problem in Angular. If I have two pages A and B each containing a table. Then I make changes to Page A in the table, and then navigate to Page B. Now I expect that when I navigate back to Page A, the changes are still there. I don't want to send the changes to the database until I click a save button. What is the best way to solve this in angular?
If you are only wanting to preserve the data for this one instance, then definitely look to using a Service and writing your data to localstorage for it to persist across page refreshes.
If you are developing a SPA, then I'm not sure why you need it to persist across a page refresh since moving between components does not actually send a new HTTP request. You state should be preserved in your Service.
If you find yourself needing to manage state across your entire application and want to do it reactively, I recommend checking out NGRX.
https://ngrx.io/
Another alternative that maybe has a little less boilerplate is NGXS, which does the same thing as NGRX.
https://www.ngxs.io/
I don't recommend to use localStorage for your task if you develop SPA application, because localStorage/sessionStorage is limited and it is designed for another purposes - like authentication etc. But of course if you need to preserve your data - like cookie/JWT token etc. even after refreshing the page you can use localStorage.
I recommend to use Angular services for this: please see examples at docs Services/DI docs. Once you registered service as a singleton Singleton services, you can inject it via built-in DI(Dependency Injection) in component which renders your table at page A. But of course, you are not limited in injection only in component which located at page A, you can inject it even in page B etc.
I have struggled to find many resources on this online. I am developing an application that multiple users will be using at the same time. This means that one user may edit the database after another user has loaded the data from database. This means that this second user will not have an up to date view of the current state of the database. What is the best way to subscribe to database changes and deal with them. I am using a MEAN stack.
If you are trying to develop a real time system where changes are reflected instantly upon changes in database, you need to make use of web sockets. Since you are using Node.js as backend, see Socket.io
A good resource for implementation can be found here
However, if you plan on implementing web sockets, you will have to make significant changes to both your Node.js and Angular code.
Another method (which I would not recommend) is to make periodic api calls for those views which you want to reflect real time changes. You can make use of setInterval for this
In learning Angular 2, I've seen multiple examples where application data is stored in services.
For example: in a todo-list app, you'd find a "todo" service that would define a "todo entries" list that would become accessible to any consumer of that service.
My question is: Is there a better way of defining application data? Should it be separated from services?
In my particular case, I'd like to make use of localstorage to save a bunch of application data. Eventually, I might refactor this to instead save and load data from a database. Would it make more sense for me to be creating some sort of "data-storage" service that could be used by other services to save and retrieve data, or should data always live with the service that uses it? How might one choose to structure this in the "todo" example above?
LocalStorage is only for improving user experience (caching for speed, or similar) but it's not a place to persist data that must not be lost. For this case you need a server where you can send the data to and which stores it in a database. https://www.firebase.com/ might be convenient for a start.
It is a good idea to separate data from the service that fetches or persists these data. If you use Angulars Http service to fetch and persist data from/to a server, this might be separation enough though. When your application becomes more complex you probably want more abstraction but this would need a more concrete example of what you actually try to accomplish.
I have an ajax call that I'm making on page load. The ajax returns a bunch of json from an API that I wrote.
This data is meant to be used as a base for a table on the website. I can alter the table and add rows to it based on the data from the API... however, what I'd really like to do is store this data (globally?) and use it while the user uses the page.
Subsets of the data should be able to be viewed based on what the user has filtered on some filters.
This is probably a very common use case... I'd like to not query my API every time the user filters something on the page, and I'd like to do it all on the client side.
I can manipulate the DOM, but it's just the pattern of storing the data and accessing it that I'm having issues with.
I have a page which store data in CouchDB. The page accesses the database directly via javascript, so not much of the logic is hidden from the browser. When creating a new document there is some logic which extracts elements of the data into separate fields so that they can be searched on.
Is it possible to do this logic on the server when creating or updating the documents, or am I stuck doing it before hitting the database?
You have a couple of options.
First, see this question about CouchDB update functions. Update functions receive a request from the browser and can modify them in any way before finally storing them in CouchDB. For example, some people use them to automatically add a timestamp. Also see the wiki page on CouchDB document update handlers.
Another option is to receive CouchDB change notifications. In this case, a separate program (either your own browser, or even better, a standalone program that you run) can query CouchDB for _changes. CouchDB will notify this program after the document is saved. Next, the program can fetch the document and then store any new revisions that are necessary.
To me, it sounds like you should try the _update function first.