What happens in the templateUrl directive?

Question

JavaScript

For the project, I put all the views into separate html files and pull them up through templateUrl.
But how and when are they loaded?
And I also have differences in structure due to templateUrl .. Using angular with requirejs breaks the harmony of the idea of ​​​​angular itself. So the production will look like? app.js, style.css and a whole bunch of view.html? isn't that stupid? Or is it somehow different?

Answer 1

Loading occurs the first time the template is accessed.
Those. as soon as you compile a template with a directive, the template of this directive is loaded.
To eagerly load templates in production use $templateCache. The point is that when searching for a template, $templateCache is first checked for the presence of a template with the specified name (in the case of the directive name == the value of the templateUrl attribute).
If it is there, then it is simply taken from there, otherwise an attempt is made to download it.

mod.run(function($templateCahce) {
  $templateCache.put('components/button/template.html', '<div></div>');
});

// Директива
return {
  templateUrl: 'components/button/template.html',
  ...
}

In this example, angular will simply take the template from the cache that was installed when the program started.
Of course, no one manually inserts templates into the code. To do this, there are plugins for various build systems, for example
https://www.npmjs.com/package/gulp-angular-templat...