I just started writing an application with AngularJS and I have a couple questions about data persistence across routes. Here a plunker of a simple list application that demonstrates my question. Right now, each time a controller is loaded an HTTP request is being made. I only want a single HTTP request to be sent when the app is loaded and then be able to use that data in both of my views.
Question 1: When I click on a list item, how can I use the data that was loaded in ListCtrl rather than issuing another request to pull that same data(but for a single item)?
Question 2: If I've click on an item and then click the back button, how can I make it so that ListCtrl doesn't re-issue a request to get all the list items?
You are probably looking for the $cacheFactory. You can use it to construct cache objects to store your data.
Also, this guy has a pretty good post on using it for what you are looking for, so I won't reinvent the wheel here.
http://www.phase2technology.com/blog/caching-json-arrays-using-cachefactory-in-angularjs-1-2-x/
Answer 1 : You can save the data on $rootScope so the data accessible by all $scope.
Answer 2 : You can cache your ajax so AngularJS will only request the data at first service call, and use it for the rest service call.
Related
everyone. I am making a website with t-shirts. I dynamically generate preview cards for products using a JSON file but I also need to generate content for an HTML file when clicking on the card. So, when I click on it, a new HTML page opens like product.html?product_id=id. I do not understand how to check for id or this part ?prodcut_id=id, and based on id it generates content for the page. Can anyone please link some guides or good solutions, I don't understand anything :(.
It sounds like you want the user's browser to ask the server to load a particular page based on the value of a variable called product_id.
The way a browser talks to a server is an HTTP Request, about which you can learn all the basics on javascipt.info and/or MDN.
The ?product_id=id is called the 'query' part of the URL, about which you can learn more on MDN and Wikipedia.
A request that gets a page with this kind of URL from the server is usually a GET request, which is simpler and requires less security than the more common and versatile POST request type.
You may notice some of the resources talking about AJAX requests (which are used to update part of the current page without reloading the whole thing), but you won't need to worry about this since you're just trying to have the browser navigate to a new page.
Your server needs to have some code to handle any such requests, basically saying:
"If anybody sends an HTTP GET request here, look at the value of the product_id variable and compare it to my available HTML files. If there's a match, send a response with the matching file, and if there's no match, send a page that says 'Error 404'."
That's the quick overview anyway. The resources will tell you much more about the details.
There are some solutions, how you can get the parameters from the url:
Get ID from URL with jQuery
It would also makes sense to understand what is a REST Api and how to build a own one, because i think you dont have a backend at the moment.
Here some refs:
https://www.conceptatech.com/blog/difference-front-end-back-end-development
https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm
I am trying to use backbone.js model, collection and view alongwith my rest api. I wanted to ask how can I perform the PUT, DELETE and POST operations in backbone model and how to pass parameters to these requests dynamically?
The ajax setup passes the store the data globally but these are not applied to my PUT and POST requests. Also when I tracked the network traffic I can see that the request still carries the request payload. Can you please let me know how can I get rid of this?
I have some data from first page (or "Data Form" page) that needs to be loaded on next page (or "Add More Info" page) with same ID from first page before any controller is executed in my ionic application with sqlite database. In next page (or "Add More Info" page), I want add some new data to previous data with same ID before return again to first page.
You can check my flowchart below:
How can I achieve that?
You can check out my repo on github to fix this problem.
You have several options of that :
EASIEST BUT "dirty"
You can use $rootScope to store all you data and initialise them on each of controller.
Clean Solution parameters
You can define ui-router parameters for each of the variables you want to send.
See ui-router doc : https://github.com/angular-ui/ui-router/wiki/URL-Routing
using LocalStorage
For persistance, you can use localStorage. It is clean and won't impact your routing ruleS.
Better solution, using a service
See that explanation concerning data persistance and services :
https://stackoverflow.com/a/12574818/3687474
I'll personnaly go for the service solution that is scalable, portable and testable
I have a theory as to how to approach them, and was looking for some guidance on how to solve this problem and see if I am on the right path, because I am not sure.
I have a web app for a project I am building, and I have a database that I need to query for specific information. I have a search button that is attached to a function in my MainController, and I need to have my data passed on to my result.html file, which displays information from a ResultsController.
This is my theory for how to get this working using fake data, and an html request (which uses promises I imagine?)
for fake/test data, I stored an array with objects that represents JSON data in my services file that was basically the parent to ResultsController and MainController, and ResultsController would take in that information and display it on the screen.
For querying a database, my search function would search the database, and fill/replace the array in my services file with additional information. By virtue of changing that array of objects in my services, my results.html should pull down new data automatically when I click search, since the ResultsController has access to that same JSON data. (also, clicking search submits the query and then does $location.path("/results") after to get to the results page).
For querying a database and dynamically changing the information on a page, are these the right steps to submitting a request to a database in pulling information down upon each "search" request?
You are on the right track in using a service to share logic and data between the two controllers. This is generally seen as best practice - and it is better than the approach that is sometimes used of putting the logic and data in a parent controller, and using scope to access it in child controller.
The style guide linked to above is worth a read if you are looking for some guidance on best practice in setting up an angular app (https://github.com/johnpapa/angular-styleguide).
Suppose I have a single page application that makes AJAX requests to http://www.somesite.com/resources?lang=en.
Now, let's say that my application has a special variable for the request's languages, that is, if the variable's value is en, then the AJAX request will send a query param lang=en.
For now, the two possible values are en and es.
This variable's value can be changed dynamically by the user (clicking a button).
So, if we are using the application with language = en, then the application will send the lang=en query parameter. If the user changes the language to es, then I want the application to resend all the AJAX requests but now with lang=es query parameter.
It would be like refreshing the website, but asynchronously via AJAX requests.
I have been thinking this yesterday and I can't find a way to handle this logic in an AngularJS application.
I'm not an expert in AngularJS, but I understand the concepts of modules, directives, services and controllers.
What would be the best approach to handle this scenario? That is, I would like to avoid having to call each AJAX request manually, I'd rather create an automatic way of doing this.
Have you tried any AngularJS plugins?
First that comes to mind is Angular translate
Best way to concate the ajax url with lang parameter and request again.
So you will get all new data base on lang parameter, won't forget to handle cache before requesting the ajax call.