Loading Angular View

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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.