This article represents two different techniques using which application data (model) could be bound to HTML element in AngularJS. Either of the technique is used to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
Following are the key points described later in this article:
- Bind data using {{ expression }} syntax
- Bind data using ng-bind directive
- Recommended way of binding data
Bind Data using {{ expression }} Syntax
Following is the sample code representing curly-braces way:
<h1>Hello, {{name}}</h1>
Pay attention to curly braces used to bind the data. You could copy and paste the code below consisting of above code snippet and test in your browser.
<html>
<head>
<title>AngularJS - Form Template</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body class="container" ng-app="HelloApp" ng-controller="HelloCtrl">
<h1>Hello, {{name}}</h1>
<hr/>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" ng-model="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script type="text/javascript">
angular.module('HelloApp', [])
.controller('HelloCtrl', ['$scope', function($scope){
$scope.name = "Calvin";
}])
</script>
</body>
</html>
Bind Data using ng-bind Directive
Following represents the technique used to bind the data using ng-bind directive:
<h1>Hello, <span ng-bind="name"></span></h1>
You could replace the above code snippet data in the HTML page code given above and test for yourself.
Recommended way of Binding Data
At times, when loading the page, the expression is displayed in its raw form before Angular compiles the expression. To avoid this scenario, it is recommended to use ngBind instead of {{ expression }}. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.
Hope this article helped you in getting an understanding on how to bind data to HTML. Please feel free to comment or share.
I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com
Latest posts by Ajitesh Kumar (see all)
- MSE vs RMSE vs MAE vs MAPE vs R-Squared: When to Use? - April 25, 2024
- Gradient Descent in Machine Learning: Python Examples - April 22, 2024
- Loss Function vs Cost Function vs Objective Function: Examples - April 19, 2024
Leave a Reply