Post
Ask Question

$templateCache In AngularJS

Introduction

In this article I'll explain $templateCache in AngularJS.

Templates created on your UI can be cached using $templateCache provided by AngularJS, you can get and set the templates using $templateCache.

Here I will create a simple sample application which will load a string in div using templateCache, but it can be used for much larger changes and I will try to create such kind of changes in my upcoming articles. So this article can be considered as "To get started with $templateCache in AngularJS".

Step 1

Firstly, I am adding reference for AngularJS in the head section, and binding the body section with controller which will be created in upcoming steps.

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>  
  6. </head>  
  7.     <body ng-app="NewModule" ng-controller="myController">  
  8.     </body>  
  9. </html>  

Step 2

After this I am adding a new JavaScript file, where our AngularJS code will exist.

  1. var NewModule = angular.module('NewModule', []);  
  2.   
  3. NewModule.controller('myController', function ($scope) {  
  4.     $scope.name = "Anubhav";  
  5.     $scope.mail = "[email protected]";  
  6. });  

Here you can see that I had provided some properties inside scope. But still we had not provided anything for $templateCache, so let's create that also.

  1. var NewModule = angular.module('NewModule', []);  
  2.   
  3. NewModule.controller('myController', function ($scope) {  
  4.     $scope.name = "Anubhav";  
  5.     $scope.mail = "[email protected]";  
  6. });  
  7.   
  8. NewModule.run(function ($templateCache) {  
  9.     $templateCache.put('loadMe.html', '<b>Hey! I am loaded</b>');  
  10. });  

$templateCache need to be provided inside the "run" function, here I had passed a string which will be called using the name provided before the string i.e. "loadMe.html".

Step 3

Now we need to make changes on our HTML part so that scope values and $templateCache value can be used.

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>  
  6.     <script src="RoutingController.js"></script>  
  7. </head>  
  8.     <body ng-app="NewModule" ng-controller="myController">  
  9.         <fieldset>  
  10.             <legend>Data From Controller</legend>  
  11.             <div>  
  12.                 Name: <input type="text" ng-model="name" />  
  13.                 <br />  
  14.                 Mail ID: <input type="text" ng-model="mail" />  
  15.             </div>  
  16.         </fieldset>  
  17.         <fieldset>  
  18.             <legend>I am getting value from template cache</legend>  
  19.             <div ng-include="'loadMe.html'">  
  20.   
  21.             </div>  
  22.             </fieldset>  
  23.     </body>  
  24. </html>  

You can see that I had created a div in which cache value is included using ng-include.

Now our application is created and it's time to execute it and see the output.

Output

On running the application you can see that our string is available on the UI.



Similar Articles