Data Binding

data-binding in angular is the synchronization between the model and the view which happens automatically.

The view is a projection of the model at all times, and if the model changes, it will be auto updated in the view, and vice versa.

the uncompiled HTML in the template is compiled in the browser, which produces a live view.

With the view only being a project of the model, the controller is completely separated from the view and unaware of it. This makes testing easy because it allows you to single out the controller to test.

data-binding example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>angular binding</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
</head>
<body>

  <div ng-app>
    <h1>Binding</h1>
    <input type="text" ng-model="message">
    <p>Binding : </p>
    <p></p>
    <p></p>
    <p></p>
    <p>1</p>
  </div>

</body>
</html>

another way to bind in angular is with ng-bind="...". This maybe useful in preventing the browser from initially flashing which sometimes we may not want.

example:

<div ng-app>
  <h2>Using ng-bind</h2>
  <p ng-bind="message"></p>
  <p ng-bind="message + message"></p>
  <p ng-bind="message === 'hello'"></p>
  <p ng-bind="message.length"></p>
  <p ng-bind="3 + 4"></p>
</div>

we can also do one-way binding: <p ng-bind="::message === 'hello'"></p>