Let's Angle To Angular JS: Data Binding in angular JS

Data binding :

In angular JS, the term data binding meant that establishing the connection between the mark up page or HTML content like view and the controller or the scope.

Technically in angular JS it was defined as like the synchronization happening between the models and views. Here synchronization means like changes reflecting from one to another.

One-way data binding :

In one-way data binding the traverse of data will be from the model to the view. In angular words here model can be as like scope or controller, means the data passes from the scope/controller to the markup page. The changes done over the scope or in model will reflects at the view.

In angular JS, the two-way data binding can be achieved by ng-bind directive which has to be attached to the only readable controls like span, div, italic, strong… etc. we can also achieve one way data binding by usi ng expression {{}}.

Example :

var app = angular.module('apptest', []);

app.controller('ctrl', function ($scope) {

$scope.value1 = "Value from model";

});

In the above if we observe, we defined “value1” to scope by assigning some data.

</div>

</body>

In the above piece of code, we used ng-bind with value1 to the span as attribute. If we run the code, we get the value1 data to the span, that means the data is traversing from the model to the view and here the reverse criteria is not possible.

Two way data binding :

In two-way data binding the traverse of data will be from the model to view also from the view to model here model can be as like scope or controller, means the data modifications done at the controller or to scope will automatically reflects or sync to the view also and also the changes made over the view can be reflecte in the controller or to scope which can be called like model.

In angular JS, the two-way data binding can be achieved by ng-model directive. which has to be attached to input controls like textbox, textarea,… etc.

var app = angular.module('apptest', []);

app.controller('ctrl', function ($scope) {

$scope.value1 = "Value from model";

});

In the above if we observe, we defined “value1” to scope by assigning some data.

</div>

</body>

In the above code, I had taken input type as text of one control with ng-model attribute and one span tag with the attribute of ng-bind for both the controls, I used the scope variable as “value1” only.

So, In the output of the above code If I modify anything in the textbox it will be automatically reflected in view which we can see in below span changes with same as textbox value.

Binding once :

Binding once in angular JS means the data is going to be bind only once per the instance, after binding once, even any of the model or view changes will not reflect over that consumed part.

Binding once in angular JS can be achieved by using :: precedence to the variable means if our scope variable is “empno” then the place where we want not to be changed will be as “::empno”.

</div>

</body>

If we observe the above code, the ng-bind directive was with the value of “::value1” if any value prefixed with double colons even though we change the value from the input textbox the change will not be reflected once it was effected.

Let's Angle To Angular JS

Pages

Facebook

Monday, 25 September 2017

Data Binding in angular JS

2 comments: