How does angular know where ng-include file is located?

Question

I'm looking at this sample Angular App.

In the main html file called [index.html][2], there is this line:

<div ng-include="'header.tpl.html'"></div>

However, there is not file header.tpl.html in the same directory.

How then does Angular know where to find this file?

Answer 1

The linked sample app is built using Grunt, so the file/folder structure of the built application differs from the one you see in the repository.

For example, the templates you are asking about, are collected by html2js (Grunt task) and compiled into a single JavaScript file containing code that adds all templates to $templateCache (causing them all to be included on app initialization instead of being lazily loaded when required). When the ng-include starts looking for files, its first step is looking into the $templateCache. Only when it cannot find the template there, it tries to load it from the server (and save it to $templateCache for subsequent uses).

See Gruntfile.js in the repository for build process details.