Recently I am studying Angular in my spare time and I have written one post Compare Event handling mechanism: SAPUI5 and Angular.

And now l would like to share with you what I have learned from Angular about its data binding design.

I first list a comparison from my point of view and will illustrate it in detail.

UI5

Angular

1. should explicitly create or obtain Model

object to finish data binding

1. Could leverage HTML native elment as data model

2. Binding mode: one way, two way, one time

2. two way

3. Use object instance like

JSONPropertyBinding to hold binding path

information

3. Use Watcher object instance to hold binding

path information

4. grammar in xml view: {|model name|>/|field path|},

for example {json>/ImgSrc}

4. grammar in html page: see example below

For UI5 data binding, I have already written two self study blogs: Part6 control data binding and Part7 Implementations for different binding mode: OneWay, TwoWay, OneTime.

I use the following simple Angular application which only contains 11 lines to demonstrate the data binding implementation of Angular.

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="angular/angular.js"></script>
  </head>
  <body>
    Name:<input ng-model="name" type="text"/>
    Hello {{name}}
  </body>
</html>

Here I have a input element marked with attribute ‘ng-model=”name”‘, which means I tell Angular that I have declared a data model with name “name”. Then for “Hello {{name}}”, it is actually a template and I tell Angular to render the page with static text “Hello” plus the actual content of input field.

You can test the application here. Every time you type something in the input field, the characters you have typed will be displayed after “Hello”:

/wp-content/uploads/2016/06/clipboard1_986492.png

In this blog, I will explain how these 11 lines of codes have implemented the data binding feature, with the help of Angular framework code.

When you launch the application for the first time, the application will look like below. Although you only saw blank field in input field and initial value after “Hello”, some logic has already been executed under the hood. I will first introduce how the initial value is rendered in html page.

How initial value is rendered in html page

1. Like UI5, Angular has also its bootstrap phase. During this phase, Angular will traverse the HTML DOM tree. Once it detects the input element marked with attribute “ng-model”, it will create a watch object for current scope:

/wp-content/uploads/2016/06/clipboard1_986492.png

The watcher object is just an object consisting of several functions. So far the last attribute points to a function, and the function get is used to extract value from data model.

/wp-content/uploads/2016/06/clipboard1_986492.png

/wp-content/uploads/2016/06/clipboard2_986501.png

2. And you have already noticed that although we do not explicitly specify event handler for input field, however it can still react to our input. Why? Angular framework has registered a listener on input event for us. We will go through the implementation of listener later. So now for the input element, we have one watcher and one listener.

/wp-content/uploads/2016/06/clipboard1_986492.png

3. Again a second watcher is created for text node, “Hello {{name}}”. So now we have two watchers created ans stored in watchers array of current scope object.

/wp-content/uploads/2016/06/clipboard1_986492.png

4. Still in bootstrap phase, the function $apply of scope is called.

/wp-content/uploads/2016/06/clipboard1_986492.png

Within this function, there is a DO loop to handle all watcher object of current scope one by one:

/wp-content/uploads/2016/06/clipboard2_986501.png

Since I haven’t typed anything in input field, I have only the static text “Hello” to be displayed:

/wp-content/uploads/2016/06/clipboard3_986509.png

/wp-content/uploads/2016/06/clipboard4_986510.png

Before line 5624 is executed:

/wp-content/uploads/2016/06/clipboard1_986492.png

After executed:

/wp-content/uploads/2016/06/clipboard2_986501.png

So far, the initial page display logic is introduced.

How the value from Input field can flow to Hello text field

Now I have typed “A” in input field:

/wp-content/uploads/2016/06/clipboard3_986509.png

Since I have explained previously that Angular has registered a listener for input field, so now it is called:

/wp-content/uploads/2016/06/clipboard1_986492.png

In this event handler, scope.$apply will be called.

/wp-content/uploads/2016/06/clipboard2_986501.png

You still remember the fact that all watchers will be handled within scope.$apply? This time, the input character “A” is extracted from input field as model:

/wp-content/uploads/2016/06/clipboard1_986492.png

/wp-content/uploads/2016/06/clipboard2_986501.png

Since now the template “Hello {{name}}” has already been filled with actual value, it is ready to render it:

/wp-content/uploads/2016/06/clipboard3_986509.png

After line 5624 is executed, you will see “Hello A” in UI:

/wp-content/uploads/2016/06/clipboard4_986510.png

/wp-content/uploads/2016/06/clipboard5_986526.png

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply