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>
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.
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.
Last updated: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 1st May, 2024 In this post, you will learn the concepts related to…