How do you send payload data with initial request? - javascript

Lets say, for example, we have a page that has a table with list of users. I could render the HTML with the table of users, but that isn't very friendly with Angular. I can also AJAX back to the server for the data, but then I have to wait for the initial page to render and make an additional HTTP request, which adds additional delay.
Is there a way to send my payload data along with my initial request so I don't have to AJAX for the data and I can still use angular binding (e.g. ng-repeat)?

The only way to access server data without executing Javascript is to have the server include that data in the initial request for the web page. This would require using a server side language such as PHP, Ruby, or ASP.NET that can query the data, add it to your web page, and send the updated web page in it's inital http resonse.
However, this concept completely undermines the purpose of using a client side framework such as AngularJS. Angular wants to be in charge of your data access, and I would recommend letting it be. Angular doesn't know about Data that it didn't retrieve, so you are going to have to also dynamically modify your page scripts to tell Angular about the data that the server retrieved. This is all going down a dark road that you do not want to go down. you will simply be doing double work.
If your concern is that your users will be see a brief delay between the page load and the initial data loading, you even have the option to keep the screen blank until the initial data loads using things directives like ng-cloak and ng-bind. If you are concerned about the delays in retrieving data after the initial page load, remember that a full-page HTTP request and full page reload takes much longer than an ajax call that only updates a single part of your page.
If you don't want to be using Ajax calls, you don't want to be using AngularJS.

Related

Loose data on refresh page Angular js

I have an AngularJS app like this one:
http://next.plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview&preview
and the $scope data that I have, is from an API,
When the page first loaded I call to this API and I save the data that returned in the session,
Now I can't understand why when I refresh the page I Losing information and all the data,
How can I use the data dynamic that when I refresh the page I don't loos data?
First of all, are you using routing in your app? Here is simple example :
http://next.plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview&preview
With routing you do not need to refresh your page.
As to the problem itself (don't loss data after refresh):
if you want to keep your data even when you refresh your browser use localStorage. There're lots of handy localStorage angularJS modules to use - ex.
https://github.com/grevory/angular-local-storage
if you don't want to store data on the client side, you could request your API for the data you need to store each time your angular app is getting loaded. This data seems to be static, as you are storing it on client side and reuse then, so you could configure API endpoint to throw this data really fast.

Display loading screen while loading page with some heavy back end work?

I'm trying to display a loading page while loading up a dashboard page with some graphs and charts (I'm using the Telerik RadHtmlChart Controls for this). The data for these graphs and charts are fetched from a remote API and the queries into the db is quite Heavy, so the API calls can take upwards of 5-6 seconds Before I receive them. All this is done in code behind on the page. So, I would like to implement some form of loading screen while the page is loading. I've tried some jQuery implementations, however the page won't be sent to the user Before the Page_Load event is done, which is when all the data has been fetched, which in turn means that there will be no loading image, just a 5-6 wait for the user Before the page shows up.
Is there a nice way around this? Is there a way to render the page and THEN call a function in code behind and have it run and render the charts and graphs then?
You should use AJAX (A developer dream, as w3schools says xD).
First you should send the page content, without any query done, so the page is sent immediately. Then, the page should make an AJAX query to your server (to an special url for this, or whatever) asking for the info it wants. Meanwhile you could show a loading icon. When the AJAX call returns data, then you can initialize your chart widgets with it.
Depending on how you have your front-end developed, this will be (not) trivial to do, btw.
You can start here: https://www.w3schools.com/xml/ajax_intro.asp
To clarify:
You have to change your method that serves the page to not do any query.
Then create a page that makes the long-query and outputs it without any HTML markup. Just the formatted data to work with your widgets, for example.
In the front you should move all the script that initializes the widgets to a function.
Finally, you should add an AJAX query at startup that will call the newly created page, process the data (jQuery has AJAX methods to load JSON directly) and initialize your widgets with this data.

Javascript/Python/d3JS: refresh html page when underlying JSON changes

I'm controlling a d3JS interface from another platform. The workflow: Data->Python to create JSON->d3JS to generate graphic->load the html page locally in a browser.
Is anyone aware of a way within this workflow to force a page reload when the JSON data is updated?
This is essentially a problem of how to push updates from the server to the client.
There are two approaches:
Fake it. You could use AJAX polling to periodically ask the server whether new data is available.
Do it for real. You could use WebSockets to push the data from the server to the client when an update occurs.
With the new data in hand, it should be simple to bind in D3 via the General Update Pattern. See http://bl.ocks.org/mbostock/3808218
If you must reload the page, you can also use either of these approaches to trigger it.

Backbone.js and CakePHP

I'm interested in implementing Backbone.js for some of the more repetitive in-page CRUD structures in our application (which is built on the CakePHP framework). I've been trying to get a hold on Backbone while figuring out how it would work in conjunction with Cake, and I"m a bit lost when it comes to separating the duties of the two sides.
Am I trying to jimmy something into my site that doesn't need to be there? Is there precedence for this kind of stack structure? I'm all ears at this point.
I'm actually working through the same situation right now (though with Python/Flask, but the same concepts should apply to any serverside language). Here is how the workflow for a page goes in my application. Just a note that I do NOT follow the single page application format; in my app, each major page is a full reload.
User requests a page, say a list of companies, /companies/listing/
Server does the routing, loading the correct controller
Controller loads first X companies from DB
Companies are encoded as JSON
Other meta data is loaded (such as total number of companies) and turned into JSON
The list page template is loaded and the JSON popped into a <script> tag within the template. Note here I do not fill in the listing table or anything along those lines, I let Backbone do all of that. I fill in the JSON here so the client doesn't have to make a second request for the initial set of companies
The list page is sent to the client. The server is done for now
The client has all the data it needs to start, so I take the JSON and pass it to my Backbone.View for the listing page
The view creates a collection for the models and manages a set of sub-views that represent the entries in the list
Any other processing/view creation happens such as the creation of pages, prev/next buttons, etc.
If the user clicks to the next page of companies, I fire an AJAX query to the server (/companies/listing/page/1 or something) which returns a new JSON string with a new set of models
Send the new set of models to my Backbone.View which refreshes everything
So really, the server is used for nothing but the actual loading of data, and the initial send of the template. I like this because it'll allow me to easily hook up new frontends (say, an iPad app or something).
For a form, in really broad strokes, I do something like this:
User requests form, /companies/edit/1
Server does permissions checking, loads entry, sends template/JSON to client. Server does not fill out the form with the data
Client uses JSON to fill out the form
Client modifies form, hits submit
All of their changes are applied to the model, the model is turned into JSON and sent to the server using AJAX
Server does validation and either sends error messages (in JSON) to client or updates the database and sends a success message
So, again, those are really broad strokes on how I've done it. In general, I use the server to grab data from the database, do server side validation (can't trust the client heh), and update the database.
If you have some specific questions, I'd be happy to try to share what I've learned so far.

Changing ajax to request that fills a div with html content to be embedded into the html page itself

I am having a trouble embedding ajax html into the html page itself, I need to make this ajax response be apparent in the page source.
I have 2 servers, one that runs the web application and the other is responsible for performing search queries (searcher). Now the application server sends the html page to the client's browser, which will request some search queries to searcher through ajax, after the successful reply the browser will put the html result into the page.
The problem is that search results do not exist in the html source which is not good for SEO, google crawlers will have no idea what is being searched for.
The other problem is if I made the application server make a request and wait for searcher results, the page will take tons of seconds to load.
I am not sure what to do.. I really need to make the website SEO friendly and also need the page to load quickly!!
Any pointers or ideas will be appreciated.
Thanks a lot,
Wa'el
It's impossible to get Ajax provided data to be present in the "source" in this case as the source is always the original page requested from the server before any client side changes.
And any kind of client that does NOT support javascipt, like search engine crawlers, will never se any ajax loaded data.
If you need the information to be indexable you need to
1: serve the page as in from the server, no client side loading
2: Not use posted forms fo reach the data, search engines do not folow posts, only get links.

Categories