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>

GFG1.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= 
"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

HTML

<!--Template1.html-->
<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>Template 1</h1> 
    <p>This is the content of template 1</p> 
</body> 
  
</html>

template2.html

HTML

<!--Template2.html-->
<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>Template 2</h1> 
    <p>This is the content of template 2</p> 
</body> 
  
</html>

template3.html

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

Angular PrimeNG Tree Templates

pradeepkumarppk2003

Improve

Article Tags :

AngularJS $templateRequest Service

HTML

HTML

HTML

HTML

HTML

HTML

Similar Reads

Thank You!

What kind of Experience do you want to share?