AngularJs's templateUrl : Url or ID?

AngularJS docs provide a templateUrl example :

using :

  //ngApp...
 <div ng-controller="Ctrl">
      <div my-customer></div>
    </div>

And in the controller :

....directive('myCustomer', function() {
    return {
      templateUrl: 'my-customer.html'
    };
  })

Where my-customer.html is an external file :

All ok. but they provide the option to edit it (via jsfiddle) :

But there- it is as a template tag ! :

<div ng-app="docsTemplateUrlDirective">
  <div ng-controller="Ctrl">
    <div my-customer></div>
  </div>



      <!-- my-customer.html -->
      <script type="text/ng-template" id="my-customer.html">
        Name: {{customer.name}} Address: {{customer.address}}
      </script>
    </div>

Question :

How does NG knows if it's an external file or is it an Tag element ID ? and how can I force it to a certain type ?

(p.s. - didn't find it in the docs).

Answers


I will add to what @QuarK started with, perhaps filling in a bit more detail.

The $templateCache is used as a repository for templates once they have been resolved (inline or from a file).

The source of the script tag with text/ng-templates looks like this:

var scriptDirective = ['$templateCache', function($templateCache) {
  return {
    restrict: 'E',
    terminal: true,
    compile: function(element, attr) {
      if (attr.type == 'text/ng-template') {
        var templateUrl = attr.id,
            // IE is not consistent, in scripts we have to read .text but in other nodes we have to read .textContent
            text = element[0].text;

        $templateCache.put(templateUrl, text);
      }
    }
  };
}];

You can see that if a script tag is found, and the attr.type is text/ng-template, then angular puts the content into the $templateCache indexed by the templateUrl.

Using script tags like this has only been introduced recently to Angular. So, this is an option that allows an inline definition without requiring an external file. However, underneath, once resolved, both use the same mechanism to be read and compiled ($templateCache).

Hope this helps.


This is through $templateCache, you can find the documentation in it's API:

http://docs.angularjs.org/api/ng.$templateCache


Need Your Help

Update panel in Tab Container

c# asp.net asp.net-ajax updatepanel

I have a tab container with 5 tabs, each tab contains an update panel.

Automated naming of AF_UNIX local datagram sockets?

unix sockets bind local datagram

I'm implementing a simple service using datagrams over unix local sockets (AF_UNIX address family, i.e. not UDP). The server is bound to a public address, and it receives requests just fine.