Data Binding in AngularJS

Introduction

In my previous article “AngularJs Overview” we saw an overview of AngularJs features and a hello world application. This article explains data binding in AngularJs.

Data binding is a very powerful feature of the software development technologies. Data bind is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.



                                       Figure 1: One-Way and Two-Way Data Binding

Most templating systems work with one-way databinding. They merge the model component and template together into a view. When the merge occurrs, the model data is bound to the view. After that, if the model changes are not automatically reflected to the view, same as any changes done by the user on view are not reflected to the model.

AngularJs templates module work differently. First of all the template is compiled in the browser. During the compilation, it produces the live view that work as two-way binding, in other words any changes made to the view are immediately reflected in the model and vice-versa.

Before understanding the data bound in AngularJs, we need to understand the scope object in AngularJs.

$Scope

The application model is referring to the scope object in AngularJs. Scope plays an important role to follow the MV* pattern. Scope is the object that bridges the connection between an AngularJs controller and a view. It can watch the expression and propagate the event.

The following are the features of the Scope object:

• It has the $watch API to observe model changes.
• It has the $apply API to propagate any model changes by the system to the view.
• It can be nested to isolate functionality and model properties.
• It is able to evaluate the expressions.

Binding Directives in AngularJs

AngularJs provides many predefined data binding directives.

ng-bind

This directive updates the text content of the specified HTML element with the value of the given expression and the text content is changing on expression changes. It is very similar to double curly markup ( {{expression }}) but less verbose.

Syntax

<ANY ELEMENT ng-bind="expression"> </ANY ELEMENT>

Example

< h4 > ng - bind Example < /h4>
<div ng-controller="HelloController" >
   <label>Enter the Text: <input type="text" ng-model="mytext">   </label > < br / > < br / > You have entered: < span ng - bind = "mytext" > < /span>
</div >

< script > angular.module("myapp", [])
    .controller("HelloController", function($scope) {
       $scope.mytext = 'Hi this is Jignesh';
   });
< /script>

Output


      Figure 2: ng-bind Output

ng-bind-html

It (whatever it is) evaluates the expression and inserts the HTML content into the element in a secure way. It uses the $sanitize service, so to use this functionality, be sure that $sanitize is available.

Syntax

<ANY ELEMENT ng-bind-html=" expression "> </ANY ELEMENT>

Example

<h4>ng-bind-html Example</h4>
<div ng-controller="HelloController" >
   <p ng-bind-html="myHTML"></p>
</div>

<script>
   angular.module("myapp", ['ngSanitize'])
   .controller("HelloController", function($scope) {
      $scope.myHTML = 'Hi, This is <a href="#"><b>Jignesh</b></a>.';
   } );
</script>

Output



Figure 3: ng-bind-html output

ng-bind-template

It (whatever it is) replaces the element text content with the interpolation of the template. It can contain multiple double curly markups.

Syntax:

<ANY ELEMENT ng-bind-template=" {{expression1}} {{expression2}} … {{expressionn}} "> </ANY ELEMENT>

Example

<h4>ng-bind-template Example</h4>
<div ng-controller="HelloController" >
   <label>Enter First Name: <input type="text" ng-model="firstname"></label><br/>
   <label>Enter Last Name: <input type="text" ng-model="lastname"></label><br/><br/>
   Your Full Name: <span ng-bind-template="{{firstname}} {{lastname}}"></span>
</div>

<script>
   angular.module("myapp", ['ngSanitize'])
   .controller("HelloController", function($scope) {
      $scope.firstname = 'Jignesh';
      $scope.lastname = 'Trivedi';
   } );
</script>

Output



Figure 4: ng-bind-template Output

ng-non-bindable

This (whatever "this" is) directive informs AngularJs to not compile or bind the contents of the current DOM element This element is useful when we want to display the expression but it should not be executed by AngularJs.

Syntax

<ANY ELEMENT ng-non-bindable > </ANY ELEMENT>

Example

<h4>ng-non-bindable Example</h4>
<div ng-controller="HelloController" >
   <div>Evaluate the expression : {{1+2}}<div><br/>
<   div ng-non-bindable>Not evaluate the expression : {{1+2}}<div><br/>
</div>

Output

Figure 5: ng-non-bindable Output

ng-model

This (whatever "this" is) directive can be bound with input, select, text area or any custom form control. It provides two-way binding. It also provides validation behavior. It also keeps the state of the control (valid/invalid, dirty/pristine, touched/untouched and so on).

Syntax

<input ng-bind="expression"/>

Example

<h4>ng-model Example</h4>
<div ng-controller="HelloController" >
   <label>Enter value1:</label><input type="text" ng-model="myData"><br/><br/>
   <label>Enter value2:</label><input type="text" ng-model="myData"><br/><br/>
</div>

<script>
   angular.module("myapp", ['ngSanitize'])
   .controller("HelloController", function($scope) {
      $scope.myData = 'Test Data';
   } );
</script>

Output



Figure 6: ng-model Output

Conclusion

This article helps us to understand Data Binding approaches in AngularJs.