$templateCache In AngularJS

Anubhav Chaudhary
8y
11.4k
0
1

Article

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.

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

Step 2

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

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

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.

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

$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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="RoutingController.js"></script>
</head>
<body ng-app="NewModule" ng-controller="myController">
<fieldset>
<legend>Data From Controller</legend>
<div>
Name: <input type="text" ng-model="name" />
<br />
Mail ID: <input type="text" ng-model="mail" />
</div>
</fieldset>
<fieldset>
<legend>I am getting value from template cache</legend>
<div ng-include="'loadMe.html'">
</div>
</fieldset>
</body>
</html>