Professional AngularJS

4 Data Binding

WHAT YOU WILL LEARN IN THIS CHAPTER:            

• How to create and use data bindings
• Best practices for performance with data bindings
• How to tie filters into data binding

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER

You can find the wrox.com code downloads for this chapter at http://www.wrox.com/go/proangularjs on the Download Code tab.

WHAT IS DATA BINDING?

Data binding is the feature that’s at the heart of all AngularJS functionality. In Chapter 2, “Intelligent Workflow and Build Systems,” you saw some basic data binding using the {{ }} symbol.

At a high level, data binding is the ability to tie two JavaScript values together. When the first variable changes, the second is updated to reflect the changes to the first. The most common use case of data binding is to tie your user interface (UI), which is often called a view, to a set of UI-independent values, which are often referred to as your model. Your model will consist of simple strings, numbers, and other primitive JavaScript types. Using data binding, your view defines how to render the model.

NOTE   You may have heard the terms model and view before in the context of the well-known pattern known as Model-View-Controller (MVC). You can think of data binding as being a general replacement for the C in MVC. AngularJS has been referred to as a client-side Model-View-ViewManager (MVVM) or Model-View-Whatever (MVW) framework for this exact reason. Yes, Model-View-Whatever is actually a technical term. ...