AngularJS templates refer to view which contain HTML elements enriched by Angular elements like directive and attributes. Templates are used to display the information from the model and controller that a user sees in his browser. An angular templates can have Directive, HTML markup, CSS, Filters, Expressions and Form controls.
A simple Angular Template
<html ng-app>
<body ng-controller="MyController">
<input ng-model="name" value="dotnet-tricks.com">
<br/>
Input Value is : {{name}}
<button ng-click="changeValue()">Click me!</button>
<script src="angular.js">
</body>
</html>
Types of Templates
Static Templates
A static template is defined by using script tag. It must has an id attribute with a unique value and a type attribute with value text/ng-template. Also, a static template must be inside the scope of the ng-app directive otherwise it will be ignored by Angular.
<script type="text/ng-template" id="person.html">
{{person.name}} : {{person.address}}
</script>
A static template can be rendered by using ng-include directive.
<div ng-include="'person.html'"></div>
Example of Static Template
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<title>AngularJS Static Templates</title>
<script type="text/javascript">
//defining module
var app = angular.module("app", []);
//defining controller1
app.controller("Ctrl1", function ($scope) {
$scope.person = { name: "Deepak Chauhan", address: "Delhi" };
});
//defining controller2
app.controller("Ctrl2", function ($scope) {
$scope.persons = [{ name: "Deepak Chauhan", address: "Delhi" },
{ name: "Shailendra Chauhan", address: "Noida" },
{ name: "Kuldeep Chauhan", address: "Gurgaon" }];
});
</script>
</head>
<body ng-app="app">
<h1>AngularJS Static Templates</h1>
<!--It should be the part of ng-app directive-->
<script type="text/ng-template" id="person.html">
{{person.name}} : {{person.address}}
</script>
<div ng-controller="Ctrl1">
<h2>Controller1</h2>
<!--The value of the ng-include is an expression and person.html is a string value, so put single quotes around it.-->
<div ng-include="'person.html'"></div>
</div>
<div ng-controller="Ctrl2">
<h2>Controller2</h2>
<div ng-repeat="person in persons" ng-include="'person.html'"></div>
</div>
</body>
</html>
AngularJS Static Templates
Controller1
Deepak Chauhan : Delhi
Controller2
Deepak Chauhan : Delhi
Shailendra Chauhan : Noida
Kuldeep Chauhan : Gurgaon
Dynamic Templates
A dynamic template is an html page which is compiled and rendered by Angular on demand. The above static template can be created as a HTML page within templates folder of your app like as:
person.html
{{person.name}} : {{person.address}}
A dynamic template can be rendered by using ng-include directive.
<div ng-include="'templates/person.html'"></div>
Example of Dynamic Template
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<title>AngularJS Dynamic Templates</title>
<script type="text/javascript">
//defining module
var app = angular.module("app", []);
//defining controller1
app.controller("Ctrl1", function ($scope) {
$scope.person = { name: "Deepak Chauhan", address: "Delhi" };
});
//defining controller2
app.controller("Ctrl2", function ($scope) {
$scope.persons = [{ name: "Deepak Chauhan", address: "Delhi" },
{ name: "Shailendra Chauhan", address: "Noida" },
{ name: "Kuldeep Chauhan", address: "Gurgaon" }];
});
</script>
</head>
<body ng-app="app">
<h1>AngularJS Dynamic Templates</h1>
<div ng-controller="Ctrl1">
<h2>Controller1</h2>
<!--Provides the full path of your template file i.e. person.html-->
<!--Note : Here, I am using JS Bin generated path for person.html file-->
<div ng-include="'http://jsbin.com/hohuto/2/'"></div>
</div>
<div ng-controller="Ctrl2">
<h2>Controller2</h2>
<div ng-repeat="person in persons" ng-include="'http://jsbin.com/hohuto/2/'"></div>
</div>
</body>
</html>
AngularJS Dynamic Templates
Controller1
Deepak Chauhan : Delhi
Controller2
Deepak Chauhan : Delhi
Shailendra Chauhan : Noida
Kuldeep Chauhan : Gurgaon
Note
Always put the single quotes around the name of template
with ng-include directive, since it accept an expression. Hence to
indicate to Angular that template (person.html) is a string value you
have to put single quotes around it's name.
No comments:
Post a Comment