1024px-Flatirons_Winter_Sunrise_edit_2

Before we get into the details of two way data binding, let’s talk about the life cycle of an AngularJS application. So what happens when an AngularJS App loads in the browser? Well, there are three phases that it goes through:

  • The Bootstrap Phase – This is the first phase which starts when the AngularJS library (JS File) is downloaded to the browser. Now AngularJS initializes its modules and necessary components. The dependencies injected inside the module are made available to it.
  • The Compilation Phase – During the compilation phase, AngularJS replaces the static DOM (Document Object Model) with a dynamic DOM. This involves traversal of static DOM for collecting the directives, in order to link them with the scope for dynamic view.
  • The Runtime Phase – This is the final phase which lasts until the browser window is refreshed or closed. The first two phases are hardly visible to the user, and most of the time we use an Angular application, it’s in the runtime phase.

So the magic happens during the second phase i.e. during the compilation. As soon as AngularJS loads up, it scans the HTML to find all the directives present in the page. Whenever it encounters a directive responsible for showing Data in the View (user interface), AngularJS adds a watcher over it. A watcher is nothing but a way of AngularJS to get notified when the value in that directive changes.

[cta id=”3157″ align=”none”]

AngularJS knows that the data stored in the $scope can change only in response to certain events, e.g. user clicking on the UI, a server request being made etc. As soon as any of these occur, AngularJS triggers a digest cycle. This checks whether any of the watchers have their value changed. If it checks because of this change, has any other change has happened? So it runs another digest until it ensures that the data model is stable. At this point it updates the entire UI, all at once. This occurs in fraction of seconds.

Explore Angular Courses

Now, let’s try to create a simple example of data binding using AngularJS. Here we have three input fields which take the values of First Name, Second Name, and age from the user. These inputs are bound to the $scope. When the user types in the values, the binding can be viewed in real time below.

Here’s a code snippet of the above example.

These are nothing but three input fields, which have been bound with the $scope using their respective models, viz. firstName, secondName and age. As we discussed earlier, AngularJS has applied watcher over them.

Hi!

 

I’m {{firstName}} {{secondName}}.

 

I’m {{age}}.

 

The same models have been bound to the view using the double curly braces (also known as moustache) notation of AngularJS. So every time any of the inputs get changed, the DOM is updated on the live view. So that’s how data binding works in AngularJS.

Explore Angular Courses

Looking to learn more about AngularJS for your team? Check out our custom group training options today.

Comments