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.
//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,
Blogger Comment
Facebook Comment