Data Binding feature in AngularJS

AngularJs is open source and structural framework for dynamic web apps. This uses HTML as its template language. It is basically used to develop the large-scale and high-performance web applications.

AngularJs is a powerful JavaScript framework, It is used to develop RICH and out of box internet application. It facilitates to write the client side application in an MVC architecture. Data  Binding is one of the key features of AngularJS, as it is the automatic synchronization of data between the model and view components.

Below we have mentioned some important key features of AngularJS, but here we are going in Depth of Data-Binding and Controllers.  

Features of AngularJS

• Data-Binding

• Controller

• Filters

• Dependency injection

• MVC

Data-Binding: It is the synchronization between the data and model and view components.

There are two ways of Data Binding in AngularJS :

1. Basic Data-Binding /one-way Data-Binding

2. Two-way Data-Binding

Basic Data-Binding /One-way Data-Binding: It is the one in which a value is taken from the data model and inserted into an HTML element. Basically, the binding is static in nature.

AngularJS provides predefined data-binding directives as shown below:

- ng-bind – Binds the inner Text property of an HTML element.

- ng-bind-template – It is same as ng-bind and allows for multiple templates.

- ng-non-bindable - Declares a region of content for which data binding will be skipped.

- ng-bind-HTML - Creates data bindings using the innerHTML property of an HTML element.

- ng-model - Creates a two-way data binding.

Below is an example for one way Data Binding in AngularJS. It uses ng-app directives.

Two-way Data-Binding: In two-way data binding when there is a change in the model, the data values change is reflected in the view. This is also referred as “Dynamic Data Binding in AngularJS”.

Below is the example for Two-way Data-Binding.

We have discussed both one-way binding and two binding, the main difference we should notice here is the usage of ng-controller in two-way binding. Controllers in AngularJS play a very important role in giving the dynamic view to the elements.

Controllers

In AngularJs, Controller is one of the important features. Controllers are basically the JavaScript objects. A controller is defined by a JavaScript constructor function that is used to the argument the angular scope. The  ng-controller   directive defines the Application controller. Angular will instantiate a new controller object.

Use controllers to:

• Set up the initial state of the $scope object.

• Add behavior to the $scope object.

Let’s check out some of the differences between One-way binding and Two-way binding: