AngularJs Data Driven (via Data Binding)

1 Sep by vichu

AngularJs Data Driven (via Data Binding)

Reading Time: 3 minutes

In a traditional server-side application, we create the user interface by merging HTML with our local data. Of course, this means that whenever we need to change part of the UI, the server has to send the entire HTML and data to the client yet again, even if the client already has most of the HTML.

With client-side Single Page Applications (SPAs), we have an advantage. We only have to send from the server to the client the data that has changed. But the clientside code still has to update the UI as per the new data. This results in boilerplate that might look something like the following (if we were using jQuery). First, let’s look at some very simple HTML:

Hello

The JavaScript that makes this work might look something like this:

var updateNameInUI = function(name) { 
$('#name').text(name);
};

// Lots of code here...
// On initial data load
updateNameInUI(user.name);

// Then when the data changes somehow
updateNameInUI(updatedName);

The preceding code defines a updateNameInUI function, which takes in the name of the user, and then finds the UI element and updates its innerText. Of course, we would have to be sure to call this function whenever the name value changes, like the initial load, and maybe when the user logs out and logs back in, or if he edits his name. And this is just one field. Now imagine dozens of such lines across your entire codebase. These kinds of operations are very common in a CRUD (Create-Retrieve-Update-Delete) model like this.
<form name=”myForm”><input type=”text”/>
<input form=”” type=”text” /></form>

Now, on the other hand, the AngularJS approach is driven by the model backing it. AngularJS’s core feature—one that can save thousands of lines of boilerplate code is its data-binding (both one-way and two-way). We don’t have to waste time funneling data back and forth between the UI and the JavaScript in an AngularJS application. We just bind to the data in our HTML and AngularJS takes care of getting its value into the UI. Not only that, but it also takes care of updating the UI whenever the data changes.

The exact same functionality in an AngularJS application would look something
like this:

Hello {{name}}

Now, in the JavaScript, all that we need to do is set the value of the name variable. AngularJS will take care of figuring out that it has changed and update the UI automatically.

This is one-way data-binding, where we take data coming from the server (or any other source), and update the Document Object Model (DOM). But what about the reverse? The traditional way when working with forms—where we need to get the data from the user, run some processing, and then send it to the server—would look something like the following. The HTML first might look like this:

<form id=”nameField” name=”myForm”><input id=”emailField” type=”text” /></form>

The JavaScript that makes this work might look like this:

// Set data in the form

function setUserDetails(userDetails) {
$('#nameField').value(userDetails.name);
$('#emailField').value(userDetails.email);
}

function getUserDetails() {
return {
name: $('#nameField').value(),
email: $('#emailField').value()
};
}

var submitData = function() {
// Assuming there is a function which makes XHR request
// Make POST request with JSON data

makeXhrRequest('http://my/url', getUserDetails());
};

In addition to the layout and templating, we have to manage the data flow between our business logic and controller code to the UI and back. Any time the data changes, we need to update the UI, and whenever the user submits or we need to run validation, we need to call the getUserDetails() function and then do our actual core logic on the data.

AngularJS provides two-way data-binding, which allows us to skip writing this boilerplate code as well. The two-way data-binding ensures that our controller and the UI share the same model, so that updates to one (either from the UI or in our code) update the other automatically. So, the same functionality as before in AngularJS might have the HTML as follows:

Each input tag in the HTML is bound to an AngularJS model declared by the ngmodel attribute (called directives in AngularJS). When the form is submitted, AngularJS hooks on by triggering a function in the controller called submitData. The JavaScript for this might look like:

// Inside my controller code

this.submitData = function() {
// Make Server POST request with JSON object

$http.post('http://my/url', this.user);
};

AngularJS takes care of the two-way data-binding, which entails getting the latest values from the UI and updating the name and email in the user object automatically. It also ensures that any changes made to the name or email values in the user object are reflected in the DOM automatically.

A Simple Data Binding Example

See the Pen Simple One Way DataBinding in Angularjs by Vishal Srinivasan (@vishal_srini) on CodePen.0

Because of data-binding, in an AngularJS application, you can focus on your core business logic and functionality and let AngularJS do the heavy lifting of updating the UI. It also means that it requires a shift in our mindset to develop an AngularJS application. Need to update the UI? Change the model and let AngularJS update the UI.

Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

Leave a Reply

Your email address will not be published. Required fields are marked *