6

Whenever we load .html files serving some controller in angular. Does angular makes an ajax call to retrive that html.

Like this piecec of code.

 .state('home', {
              url: '/',
              templateUrl: '/Modules/Signin/signin.html',
              controller: 'SigninCtrl'
          })

I mean to ask while fetching signin.html

  • Is an ajax call made?
  • Or are they loaded as normal resources?
  • If an ajax call is made where can i find some documentation written about it.
Gyanesh Gouraw
  • 1,991
  • 4
  • 23
  • 31

3 Answers3

2

When your that code executes, Angular first lookup the HTML template in $templateCache with the id /Modules/Signin/signin.html.

If it doesn't find that in the $templateCache then yes, Angular will do an AJAX call using $http to get the HTML content and it will be loaded as normal resource which should be located at the URL like:

http://example.com/Modules/Signin/signin.html

You can verify it in your browser's developer's console that an AJAX call was performed.

Read more about $templateCache.

Basically, every template get's stored in the $templateCache when it is not stored already in the cache. So if you define the following in your index.html or any place (like where your angular is installed):

<script type="text/ng-template" id="/Modules/Signin/signin.html">
  <p>This is the content of the template</p>
</script>

Now as your Angular bootstraps, there will be a data in your $templateCache with id /Modules/Signin/signin.html so now your state code will not make any AJAX instead it will simply load the content defined above.

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
1

I think a call is made, when I look into my own project. You have in the inspect element the network tab, as you reload you can see that every html part is loaded separately

Dennis
  • 368
  • 1
  • 13
1

In ui-router at least (assuming the view is not in the templateCache) view HTML files are retrieved with a GET to the URL of the file, rather than with an AJAX call to an endpoint. In your case, it'll be a GET to <your root URL>/Modules/Signin/signin.html - you can see this in your browser's development tools.

Mourndark
  • 2,526
  • 5
  • 28
  • 52