The “ng-template” directive

The “ng-template” directive is used to load the content of a <script> element into $templateCache, and this is done to further used by ng-Include, ng-View, template etc.

There is one rule which we must have to follow when we use ng-template directive and that is the type of the <script> element must be specified astext/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive's templateUrl.

The example code as given below,

//The AngularJs code sample

var app = angular.module("AngularApp", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
       $routeProvider.when('/test1', { templateUrl: 'test1.html' })
                    .when('/test2', { templateUrl: 'test2.html' })
                    .when('/test3', { templateUrl: 'test3.html' });
      }
]);

app.controller('exampleController', function ($scope) {
      $scope.text = 'Hello';
});

//The HTML code sample

<div ng-app="AngularApp">
    <div ng-controller="exampleController">
        <script type="text/ng-template" id="test1.html">
This list denotes the first list element.
        </script>
        <script type="text/ng-template" id="test2.html">
<h3>This is the header of the second list.</h3>
        </script>
        <script type="text/ng-template" id="test3.html">
<b>The ng-template directive is magical</b>
        </script>
        <ul>
            <li><a href="#/test1">list1</a></li>
            <li><a href="#/test2">list2</a></li>
            <li><a href="#/test3">list3</a></li>
        </ul>
        <div ng-view>
            Loading...
        </div>
    </div>
</div>

//In the above example we have used ng-template in script tag to load the HTML.
//It contains "id" attribute which is used by $routeProvider to map the view with a controller.

The output as below,

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more... http://www.code-sample.com http://www.code-sample.xyz