CODEWITHSUNDEEP
javascriptangularjsajaxangular-routingng-view
Gyanesh Gouraw
Gyanesh Gouraw

Reputation: 2021

Loading Angular View

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

Upvotes: 6

Views: 89

Answers (3)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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.

Upvotes: 2

MorayM
MorayM

Reputation: 2687

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.

Upvotes: 1

Dennis
Dennis

Reputation: 368

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

Upvotes: 1

Related Questions