Angularjs Examples

AJS Examples


AngularJS $templateCache Service

The AngularJS $templateCache service can be used to put the template code inside the $templateCache identified by a key "demo.html" for quick retrieval and use it later from template cache. Templates can be load directly into the cache in a script tag, or by retrieving from $templateCache service directly.

Syntax

$templateCache.put('demo.html', 'Hello from templateCache');

AngularJS $templateCache Service Example

<!DOCTYPE html>          
<html>          
<head> <!-- www.techstrikers.com -->          
<title>AngularJS $templateCache Example</title>          
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> 
 <script>   
    var app = angular.module("AnchorScrollInitialization",[]); 
   app.run(function($templateCache){
   $templateCache.put("demo.html",'<p style="font-family:Arial;color:yellow;
   background:steelblue;padding:3px;width:350px;">Hello from templateCache </p>');  
     });  
   app.directive("demo", function($templateCache){
         return{
           restrict : "E",
           templateUrl : "demo.html",
           link : function(scope,element,attrs){
             scope.showdata = true;
             scope.togglecontent = function()
             {
               scope.showdata =! scope.showdata;
             }
           }
         }
     });
</script>          
</head>          
<body style="background-color:#DDE4E9;font-family:arial;" ng-app="AnchorScrollInitialization">          
  <fieldset style="background-color:#DDE4E9;">            
    <legend>AngulerJS $templateCache Service Example</legend>            
<div ng-controller="AnchorScrollController">
  <demo title="Hello"></demo>
    </div>  
 </fieldset>           
</body>          
</html>    
See Live Example