Angularjs: Number of HTTP requests when loading an HTML template?

Question

I just started learning angular so it might be a silly question or I am just missing something.

Say, I have a main template index.html and I want to insert a partial template (which is a table) at some point in time. So I make one HTTP request to load the partial with ajax and then I also make another request to get the JSON data to fill up the table partial. Is this how it works?

When you deal with it on the server side, you get the data and sprinkle your template with variables before you respond. So there is only one request and client gets the partial already filled up with data.

Am I missing something or that's how it is and you get two trips to the server: one to get the data and the other to get the template?

Thanks

does the data that is been filled within the table is based on any parameters?? — Nidhish Krishnan, Apr 03 '14 at 05:49
Well, you would at least need the table name which you load the data from ... AT the moment, in my simple test app, I have three routes: "getIndex", "getTable" and "getJson". The last one gets the data for the table partial . Hence the question .. — r.sendecky, Apr 03 '14 at 06:02

score 3 · Accepted Answer · answered Apr 03 '14 at 06:07

3

Yes, that is how it works out of the box, but there are several ways to avoid having to do that extra request for the template. Angular has a template-cache where it will try to find the given template before it does a request. It's quite common that when an Angular app is packaged for production, a script is generated that puts all the templates into the cache and that script can then be appended to the rest of the application after everything is minimized.

There's grunt-plugins that can do this for you (for example this one). We're stuck with maven at the project I'm currently on so I made my own.

Another approach is to include the templates in your index.html file (this is shown with the <script type="text/ng-template" id="templateId.html"> block in the documentation for $templateCache.

answered Apr 03 '14 at 06:07

ivarni

17,658
17
76
92

Thanks. I suppose, this is my answer. I'll give it a tick in a bit... Initially, when I realised the double trip problem, I thought that the way to do it was to generate the partials with JavaScript and insert them on the fly. In this case you'd make just the data trips. – r.sendecky Apr 03 '14 at 06:20
I wouldn't go as far as calling it a "problem". It's only an issue if you let it work like that in production. For local development it doesn't really matter that there's extra requests to fetch templates. – ivarni Apr 03 '14 at 07:12
Fair enough.. Not a problem. Just a bit of a performance issue if used heavily. Now, a related confusion is this. When is the data request actually made? Say, I load the partial HTML via an event trigger but the data to fill up the template is fetched via an Ajax call placed in the main controller attached to the body in index.html So, does this mean that the data is loaded/cached when I first load the main page and then it just sits and waits there to fill the template when I actually load it? Or... does the data gets fetch at the same time when I load the partial with the relevant variables? – r.sendecky Apr 03 '14 at 07:46
If you put the request in the `controller`'s constructor-function the request will be made as soon as the `controller` is initialized, in your case it sounds like that will be as soon as you hit the application if it's attached to `index.html`. The template itself just fetches variables from its `$scope`, it does not care where those variables came from. – ivarni Apr 03 '14 at 09:56
If you're after some kind of lazy loading, you need to implement that yourself, either by reacting to some kind of event or by not attaching the `controller` untill it's needed. Note that `controller`s are not singletons, so if you want caching you'll most likely need to do the request from a `service`. – ivarni Apr 03 '14 at 09:58

score 1 · Answer 2 · answered Apr 03 '14 at 05:59

If it is only a table then you can do like this

Make that table within the main template (index.html) and make it hide using ng-show. when you need to display the table with the datas from the server, invoke an http from the angular to the server and fill the table and then display it. So there need only one server call i.e just for getting the data.

A sample code is given below

Working Demo

main html

<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
    <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
<table ng-show="visible">
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
    </tr>
</table>
</div>
</div>

script

var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
]));


var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

    $scope.people = [];

    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.people = data;
            $scope.visible=true;
        });

    };
}

Thanks for your answer. I am aware of the trick. +1 as it might be useful to others. In a little bit more then a very simple application it probably would not work. It defeats the point of having a partial if you cram-hide them all within the main page. My question was more generic though: in a situation when you need to load a partial from the disk would you pay for it with an extra trip to the server? — r.sendecky, Apr 03 '14 at 06:14

Angularjs: Number of HTTP requests when loading an HTML template?

2 Answers2

Linked