AngularJS $templateRequest Service
Last Updated :
24 Apr, 2025
The AngularJS $templateRequest service is used to fetch the contents of an HTML template. It makes an HTTP GET request to the specified template URL and returns the template content as a string. The $templateRequest service is part of the ngRoute module, which must be included in your application in order to use this service.
The $templateRequest service returns a promise that is resolved with the template content when the HTTP GET request succeeds, or is rejected with an error if the request fails. The $templateRequest service is useful for loading templates dynamically, for example when using AngularJS routing to load different templates for different routes in a single-page application.
Syntax: It illustrates the basic use of the $templateRequest service:
angular.module('myApp', [])
.controller('MyController', ['$templateRequest', function($templateRequest) {
$templateRequest('template.html',options).then(function(template) {
// do something with the template
});
}]);
Parameters: The AngularJS $templateRequest service accepts the following arguments:
- templateUrl: A string that specifies the URL of the HTML template to be fetched.
- options (optional): An object that specifies additional options for the HTTP request. This object can contain the following properties:
- method: The HTTP method to be used for the request (e.g. 'GET', 'POST'). The default value is 'GET'.
- headers: An object containing the HTTP headers to be sent with the request.
- paramSerializer: A function that converts the request parameters to a string.
- cache: A boolean value that specifies whether to cache the response. The default value is true.
- timeout: The number of milliseconds to wait before canceling the request.
Return type: A promise for the HTTP response data will be returned for the given URL.
Example 1: This HTML file contains an AngularJS application that uses the $templateRequest service to retrieve the contents of an HTML template file. When the page is loaded, the $templateRequest service makes an HTTP GET request to the specified template URL (in this case, "GFG1.html"). If the request succeeds, the template content is written to the page using the document.write function.
- index.html(the template):
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-route.min.js">
</script>
<script>
angular.module('myApp', ['ngRoute'])
.controller('MyController',
['$templateRequest', function ($templateRequest) {
$templateRequest('GFG1.html').then(function (template) {
document.write(template);
});
}]);
</script>
</head>
<body ng-controller="MyController">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>$templateRequest service</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1> GeeksforGeeks</h1>
<h3> Hi Geeks</h3>
</center>
</body>
</html>
Output:
Example 2: This is another example that illustrates the implementation of the AngularJS $templateRequest service by creating different templates & trying to retrieve the contents of an HTML template file by using the $templateRequest service.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
select {
width: 200px;
height: 30px;
font-size: 16px;
padding: 5px;
}
h1 {
color: Green;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
</head>
<body>
<center>
<h1> GeeksforGeeks</h1>
<div ng-controller="MyController as vm">
<select ng-model="vm.templateUrl"
ng-change="vm.changeTemplate()"
ng-init="vm.changeTemplate()">
<option value="template1.html">
Template 1
</option>
<option value="template2.html">
Template 2
</option>
<option value="template3.html">
Template 3
</option>
</select>
<div id="template-container"></div>
</div>
</center>
<script>
angular.module('myApp', [])
.controller('MyController',
['$templateRequest', function ($templateRequest) {
var vm = this;
// Set default value for templateUrl
vm.templateUrl = 'template1.html';
vm.changeTemplate = function () {
$templateRequest(vm.templateUrl).then(function (template) {
document.getElementById('template-container').innerHTML
= template;
});
};
}]);
</script>
</body>
</html>
<!--Template1.html-->
<!DOCTYPE html>
<html>
<body>
<h1>Template 1</h1>
<p>This is the content of template 1</p>
</body>
</html>
<!--Template2.html-->
<!DOCTYPE html>
<html>
<body>
<h1>Template 2</h1>
<p>This is the content of template 2</p>
</body>
</html>
<!--Template3.html-->
<!DOCTYPE html>
<html>
<body>
<h1>Template 3</h1>
<p>This is the content of template 3</p>
</body>
</html>
Output:
Reference: https://docs.angularjs.org/api/ng/service/$templateRequest
Similar Reads
AngularJS $timeout Service
Web development is a rapidly growing field. A technology introduced today is bound to get outdated within a few months. Earlier, the websites used to be static, with little to no animation or CSS. However, the introduction of vanilla JavaScript completely revolutionized the way websites used to look
3 min read
Angular PrimeNG Tree Templates
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read
What are templates in AngularJS ?
Templates in AngularJS are simply HTML files filled or enriched with AngularJS stuff like attributes and directives. A directive is a marker element that is used to target a particular attribute or class to render its behavior according to the needs. Model and controller in Angular are combined with
3 min read
Angular PrimeNG Messages Templates
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn about Angular PrimeNG Messages Templates The messages component is us
3 min read
Angular PrimeNG Carousel Templates
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read
Angular PrimeNG Image Templates
Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will discuss Angular PrimeNG Image Templates. The Image Component is used to show an
3 min read
Angular PrimeNG Panel Templates
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Panel Templates in Angular PrimeNG. The Panel Component all
4 min read
Template Reference Variable in AngularJS
Template Reference Variable in angular is used to access all the properties of any element inside the DOM. It can also be a reference to an Angular component or directive or web component. Template Reference Variable can refer to the following: DOM elementDirectivesAngular ComponentWeb ComponentAppr
3 min read
Angular PrimeNG Card Templates
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Card Templates in Angular PrimeNG. The Card Component is us
3 min read
Angular PrimeNG Inplace Templates
Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see Inplace Templates in Angular PrimeNG. The Inplace component is used to edit and display the content in place o
3 min read