In this article I will explain with simple example, how to use ng-bind and templates in AngularJS.
Both ng-bind directive and templates are used to display data in AngularJS.
AngularJS ng-bind and Template
ng-bind
This directive binds the model value to the HTML element.
Template
Templates are wrapped within curly braces {{ }}. It is used to bind expressions to HTML.
Displaying data using ng-bind and templates in AngularJS
Following is a simple example to display data using ng-bind and templates in AngularJS. In this example, I have set the ng-model directive for the TextBox.
There are two HTML SPAN elements of which one is set with a template expression while other is specified with the ng-bind directive.
As we type in the TextBox, both the HTML SPAN elements display the value of the TextBox dynamically and that too without writing a single line of JavaScript code.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="">
UserName :
<input type="text" ng-model="UserName">
<hr />
Hello <span>{{UserName}}</span>
<br />
Hello <span ng-bind="UserName"></span>
</div>
</body>
</html>
Screenshot
Demo
Downloads