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.
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: It is the synchronization between the data and model and view components.
There are two ways of Data Binding in AngularJS :
Basic Data-Binding /one-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.
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: