custom ng-template Directive using AngularJS Examples

custom ng-template Directive using AngularJS Examples

ng-template Directive Using AngularJS Example

in angularjs,ngTemplate is a simple light-weight HTML DOM-based custom template engine, inspired by Google AngularJS.ng-template simple directive is used to new create an DOM html Browser side view using simple js script tag and It Based simple “id” format attribute which is simple used by support angularjs $routeProvider to map a call simple routing to view with a each controller.uses : Define a simple script block with form type as and script to ng-template within the simple main modulecustom ng-template Directive using AngularJS Examples.

Welcome on infinityknow.com,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS ng-template Directive with Example tutorial

READ :  AngularJS ForEach Function - Angular Foreach Examples

In this post we will show you Best way to implementfile upload using AngularJS ng-template Directive with Example, hear for AngularJS ng-template Directive with Example Step By Step with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

AngularJS ng-template Directive Syntax

<div ng-app = "liveApp">
   ...some code.....
	
   <script type = "text/ng-template" id = "CreateStudents.htm">
      <h2> Create Student </h2>
      {{comments}}
   </script>

</div>    

Load the simple content of a <script> element into $templateCache using AngularJS ng-template Directive Examples

Full Example of simple ng-template Directive in AngularJS Examples

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple AngularJs create a ng-template Directive Example</title>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script >
var liveApp = angular.module("livetemplateApp", ['ngRoute']);
liveApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/homepage', { templateUrl: 'homepage.html' })
.when('/contactpage', { templateUrl: 'contactpage.html' })
.when('/aboutuspage', { templateUrl: 'aboutuspage.html' });
}
]);
liveApp.controller('latestLiveCtrl', function ($scope) {
$scope.text = 'Hello';
});
</script>
</head>
<body ng-app="livetemplateApp">
<h2> AngularJS simple custom ng-template Directive with Example </h2>
<div ng-controller="latestLiveCtrl">

<script type="text/ng-template" id="homepage.html">
This list denotes the first list element.
</script>

<script type="text/ng-template" id="contactpage.html">
<h3>This is the header of the second list.</h3>
</script>

<script type="text/ng-template" id="aboutuspage.html">
<b>The ng-template directive is magical</b>
</script>

<ul>
<li><a href="#/homepage">Home</a></li>
<li><a href="#/contactpage">Contact</a></li>
<li><a href="#/aboutuspage">About Us</a></li>
</ul>
<div ng-view>
</div>
</div>
</body>
</html>
 

Example

READ :  PHP Print number Pattern Program with Example

I hope you have Got What is AngularJS ng-template Directive with Example And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

Add a Comment

Your email address will not be published. Required fields are marked *