AngularJS $templateRequest Service
Last Updated :
01 Feb, 2023
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=
</script>
<script src=
</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>
|
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=
</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>
|
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Template 1</h1>
<p>This is the content of template 1</p>
</body>
</html>
|
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Template 2</h1>
<p>This is the content of template 2</p>
</body>
</html>
|
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
Share your thoughts in the comments
Please Login to comment...