templateUrl

templateUrl is a configuration option used in some JavaScript frameworks to specify the location of an external HTML template that should be used to render a component or directive. It is most commonly encountered in Angular-based projects, including AngularJS 1.x and Angular 2+.

In AngularJS 1.x, templateUrl is a property of a directive or component definition. The framework will fetch the HTML file at the given URL and use it as the directive’s template. For example: angular.module('app').directive('userCard', function(){ return { restrict: 'E', templateUrl: 'templates/user-card.html' }; });

In Angular (versions 2 and later), templateUrl is part of a component’s metadata. The @Component decorator accepts templateUrl, which points to an external HTML file that defines the component’s view. For example: @Component({ selector: 'app-user-card', templateUrl: './user-card.component.html' }) export class UserCardComponent { … }. The framework compiles the template together with the component class.

Considerations and best practices include path resolution and build strategy. Template URLs are resolved relative to the application base or a configured base path, and in many setups the template file is fetched as a separate HTTP request. Modern toolchains (such as the Angular CLI) can inline templates during the build process to reduce requests. Nothing in templateUrl prevents using inline templates (template) when a project prefers to keep templates embedded in the component file.

See also: template, directive, component, ng-template.