AngularJs Tutorials
![say]()
Important News
Data Binding
Data binding is the synchronization between the model and the view.
Data Model
The data model is a collection of data available for the application.
var app = angular.module('appName', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "Mahtab";
$scope.lastname = "Nusrat";
});
HTML View
The HTML container where the AngularJS application is displayed, is called the view. The view has access to the model, and there are several ways of displaying model data in the view. You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "Mahtab";
$scope.lastname = "Nusrat";
});
</script>
<p>Use the ng-bind directive to bind the innerHTML of an element to a property in the data model.</p>
</body>
</html>
double braces {{ }}
You can also use double braces {{ }} to display content from the model
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>First name: {{firstname}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "Mahtab";
$scope.lastname = "Nusrat";
});
</script>
<p>You can use double braces to display content from the data model.</p>
</body>
</html>
The ng-model Directive
the ng-model directive to bind data from the model to the view on HTML controls (input, select, textarea)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="firstname">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>
<p>Use the ng-model directive on HTML controls (input, select, textarea) to bind data between the view and the data model.</p>
</body>
</html>