Data Binding and Your First AngularJS Web Application

Hello World

The quintessential place to start writing an AngularJS app is with a hello world application. To write our hello world application, we’ll start with the simplest, most basic HTML we can possibly write.

We’ll take a more in-depth look into AngularJS as we dive into the framework. For now, let’s build our hello world application.

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Simple app</title>
  <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js">
  </script>
</head>
<body>
  <input ng-model="name" type="text" placeholder="Your name">
  <h1>Hello {{ name }}</h1>
</body>
</html>

logo

Although this demo isn’t incredibly interesting or exciting, it does show one of the most basic and impressive features of AngularJS: data binding.

Introducing Data Binding in AngularJS

In classic web frameworks, such as Rails, the controller combines data from models and mashes them together with templates to deliver a view to the user. This combination produces a single-way view. Without building any custom JavaScript components, the view will only reflect the data the model exposes at the time of the view rendering. At the time of this writing, there are several JavaScript frameworks that promise automatic data binding of the view and the model.

AngularJS takes a different approach. Instead of merging data into a template and replacing a DOM element, AngularJS creates live templates as a view. Individual components of the views are dynamically interpolated live. This feature is arguably one of the most important in AngularJS and allows us to write the hello world app we just wrote in only 10 lines of code without a single line of JavaScript.

This feature works by simply including angular.js in our HTML and explicitly setting the ng-app attribute on an element in the DOM. The ng-app attribute declares that everything inside of it belongs to this Angular app; that’s how we can nest an Angular app inside of a web app. The only components that will be affected by Angular are the DOM elements that we declare inside of the one with the ng-app attribute.

Views are interpolated when the view is evaluated with one or more variable substitutions; the result is that the variables in our string are replaced with values.

For instance, if there is a variable named name and it is equal to “Ari”, string interpolation on a view of "Hello {{ name }}" will return “Hello Ari”.

Automatic data binding gives us the ability to consider the view to be a projection of the model state. Any time the model is changed in the client-side model, the view reflects these changes without writing any custom code. It just works.

In the Model View Controller (or MVC) view of the world, the controller doesn’t have to worry about being in the mix of rendering the view. This fact virtually eliminates the concern of separating view and controller logic, and it has the corollary effect of making testing simple and enjoyable.

MVC is a software architecture pattern that separates representation from user interaction. Generally, the model consists of application data and functions that interact with it, while the view presents this data to the user; the controller mediates between the two.

This separated presentation makes a clear division between objects in our web app so that the view doesn’t need to know how to save an object – it just needs to know how to display it. Meanwhile, the model doesn’t need to interact with the view – it just needs to contain the data and methods to manipulate the view. The controller is where we’ll place the logic to bind the two together.

Without getting into the source (available at AngularJS.org), Angular simply remembers the value that the model contains at any given time (in our example from hello world, the value of name).

When Angular thinks that a value might change, it will run its own event loop to check if the value is dirty. A value is considered dirty if it has changed since the last time the event loop ran. This is how Angular is able to track and respond to changes in the app

The event loop is called the $digest() loop, which is covered in detail in the digest loop chapter.

This process is dirty checking. Dirty checking is a relatively efficient approach to checking for changes on a model. Every time there could be a potential change, Angular will do a dirty check inside its event loop (discussed in depth in the under the hood chapter) to ensure everything is consistent.

When using frameworks like KnockoutJS, which attaches a function (known as a change listener) to the change event, the process is significantly more complex and relatively more inefficient. Dealing with change management, dependency tracking, and the multitude of event firing is complex and often causes problems in performance of application UI.

Although there are more efficient ways to do it, dirty checking always works in every browser and is predictable. Additionally, a lot of software that needs speed and efficiency uses the dirty checking approach.

AngularJS removes the need to build complex and novel features in JavaScript in order to build fake automatic synchronization in views.

To denote internals and other built-in library functions, Angular uses the $ to prepend objects. Although this might look similar to the global jQuery object $, it is completely unrelated. Whenever we encounter a $ symbol, we can just think of it as an angular object.

Simple Data Binding

To review the code we wrote above, what we did was bind the “name” property to the input field using the ng-model directive on the containing model object ($scope).

All that means is that whatever value is placed in the input field will be reflected in the model object.

The model object that we are referring to is the $scope object. The $scope object is simply a JavaScript object whose properties are all available to the view and with which the controller can interact. Don’t worry if this concept doesn’t make sense quite yet: It’ll make sense with a few examples.

Bi-directional in this context means that if the view changes the value, the model observes the change through dirty checking, and if the model changes the value, the view updates with the change.

To set up this binding, we used the ng-model function on the input, like so:

<input ng-model="person.name" type="text" placeholder="Your name">
<h1>Hello {{ person.name }}</h1>

Now that we have a binding set up (yes, it’s that easy), we can see how the view changes the model. When the value in the input field changes, the person.name will be updated and the view will reflect the change.

Now we can see that we’re setting up a bi-directional binding purely in the view. To illustrate the bi-directional binding from the other way (back end to front end), we’ll have to dive into Controllers, which we’ll cover shortly.

Naming our app

We can give our app a name by assigning a value to the ng-app attribute. Notice in the code below that we have changed the ng-app attribute in our html tag to ng-app="myApp"

Technically when we say ng-app="myApp" we’re telling Angular which module we want to use here. More on modules later.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Simple app</title>
  <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js">
  </script>
</head>
<body>
  <input ng-model="name" type="text" placeholder="Your name">
  <h1>Hello {{ name }}</h1>
</body>
</html>

Just as ng-app declares that all elements inside of the DOM element upon which it is declared belong to the Angular app, declaring the ng-controller attribute on a DOM element says that all of the elements inside of it belong to the controller.

To declare our above example to be inside of a controller, we use the ng-controller attribute:

<div ng-controller='MyController'>
  <input ng-model="name" type="text" placeholder="Your name">
  <h1>Hello {{ name }}</h1>
</div>

This page is a preview of ng-book.
Get the rest of this chapter plus 600 pages of the best Angular content on the web.

Ready to master AngularJS?

What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall? Imagine how quickly you could work if you knew the best practices and the best tools?
Stop wasting your time searching and have everything you need to be productive in one, well-organized place, with complete examples to get your project up without needing to resort to endless hours of research.
You will learn what you need to know to work professionally with ng-book: The Complete Book on AngularJS or get your money back.

Get it now