In AngularJS directives, we use template and templateUrl to define the HTML structure that the directive will render.
Both options help in rendering UI components, but they have different use cases and performance impacts.
template→ Defines the HTML inline as a string inside the directive.templateUrl→ Loads the HTML from an external file.
Let’s explore both in detail with examples, use cases, and best practices.
1. Using template (Inline HTML)
The template property allows us to embed HTML directly inside the directive as a string.
Example – Using template in a Directive
Directive Code (JavaScript)
var app = angular.module("myApp", []);
app.directive("inlineTemplate", function () {
return {
restrict: "E",
template: "<div><h3>Inline Template</h3><p>This template is defined inside the directive.</p></div>"
};
});
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<inline-template></inline-template>
</body>
</html>
Explanation:
✔ The template property contains HTML as a string inside the directive.
✔ When the directive is used (<inline-template></inline-template>), it renders the HTML inside it.
Advantages of template:
Simple & Quick → No need to create a separate file.
Best for small templates that have minimal HTML.
Disadvantages of template:
Not Maintainable → If the HTML is complex, it becomes hard to read and manage.
Cannot Use External Files → Large HTML structures should not be kept inside JavaScript.
2. Using templateUrl (External File)
The templateUrl property allows us to load HTML from an external file, making the directive modular and maintainable.
Example – Using templateUrl in a Directive
Directive Code (JavaScript)
app.directive("externalTemplate", function () {
return {
restrict: "E",
templateUrl: "template.html"
};
});
HTML File (template.html)
<div>
<h3>External Template</h3>
<p>This template is loaded from an external file.</p>
</div>
Main HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<external-template></external-template>
</body>
</html>
Explanation:
✔ templateUrl: "template.html" loads the HTML from a separate file.
✔ The directive renders <h3>External Template</h3><p>...</p> inside <external-template>.
Advantages of templateUrl:
Better Maintainability → HTML is kept separately, making the code cleaner.
Best for Large Templates → Ideal for UI components with complex structures.
Easier to Test & Modify → Updates to template.html do not require changes in the directive code.
Disadvantages of templateUrl:
Extra HTTP Request → The browser needs to fetch the HTML file, which can impact performance.
Not Ideal for Small Templates → If the HTML is minimal, an extra file is unnecessary.
3. Performance Comparison (template vs templateUrl)
| Feature | template (Inline) | templateUrl (External File) |
|---|---|---|
| Readability | Hard to read for large templates | Easier to manage complex HTML |
| Performance | Faster (No extra HTTP request) | Slower (Fetches an external file) |
| Maintainability | Poor (HTML mixed with JS) | Good (Separate HTML file) |
| Use Case | Small templates | Large templates |
Best Practice:
- Use
templatefor small components (like buttons, labels). - Use
templateUrlfor complex UI elements (like forms, dashboards).
4. Advanced Example – Dynamic UI with templateUrl
Let’s build a User Profile Card directive using templateUrl.
Directive Code (JavaScript)
app.directive("userProfile", function () {
return {
restrict: "E",
templateUrl: "user-profile.html",
scope: {
name: "@",
age: "@"
}
};
});
HTML File (user-profile.html)
<div style="border: 1px solid #ddd; padding: 10px; width: 200px;">
<h3>User Profile</h3>
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
</div>
Main HTML File
<div ng-controller="MainController">
<user-profile name="John Doe" age="30"></user-profile>
</div>
Why Use templateUrl Here?
✔ The user profile layout is separate from JavaScript, making it more manageable.
✔ Any design changes can be made directly in user-profile.html without modifying JS.