Data Binding in AngularJS

Instructor: Martin Gibbs

Martin has 16 years experience in Human Resources Information Systems and has a PhD in Information Technology Management. He is an adjunct professor of computer science and computer programming.

Data binding is often a one-way street. With AngularJS, however, you can take advantage of two-way data binding to develop server-side applications. This lesson will discuss the features of data binding in AngularJS, providing working code examples.

Data Binding

Data binding is the connection between data or business rules and their presentation to the end user. For example, you can have a field for the make/model of a vehicle. To do this in a web application, you create a template to capture data from the user.

Many applications use one-way data binding. This means that you need to merge the data model and the template so that you can generate a view to the end user. AngularJS, however, is able to support two-way data binding. The template, a fancy word for your HTML page, is constructed while the view and the model are kept in sync continuously. The model is the data that the user is interacting with.

Take a look at the following graphic, which shows the difference between one-way and two-way binding:


Data binding models


As its name implies, one-way binding is really a one-way street. A value is read from the data and placed inside your web form. You can't go back. Two-way binding, on the other hand, is a busy four-lane highway going in both directions. The view constantly reflects the model. If you change the model, the view changes.

AngularJS

Doesn't the second option look a little easier to deal with? Thankfully, AngularJS is a tool that can provide just the solution. In order to use AngularJS, all you need is to create a special script call in your web application:


AngularJS Script call


Now you can build a dynamic application on the fly without needing to install any special software or worry about trying to keep your data model and template in sync.

Let's try it out and see how it works. Since we are binding data, we will need a data element or two to bind. Take a look at the following code. Write the code in a plain text editor, such as Notepad. Save as type.html, for example, coolFile.html. Then simply open the file in a web browser.


AngularJS simple data bind


When you open the page, the following output will be seen:


AngularJS simple data bind output


Take another look at the code above. Notice that the variable carBrand is enclosed in double brackets. This indicates that we are binding data. The variable in the model is also carBrand. We declared the variable as part of the model by using the keyword ng-model='carBrand'. We also initialized the variable using ng-init, but defaulted the value to blank.

Let's look at one more example, this time with a little more complexity.


Angular JS two variables


To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account
Support