Chapter 1. AngularJS Rationale and Data Binding
AngularJS is described as a "Superheroic JavaScript MVW Framework" (where MVW stands for Model-View-Whatever). Google search's content description for AngularJS is as follows:
"AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection, and great testability story all implemented with pure client-side JavaScript!"
Tip
MVVM is a pattern used in building Windows Presentation Foundation (WPF) applications. A ViewModel represents the model for the view and is bound to various UI elements. This is called data binding. Typically, if the ViewModel changes, the UI elements update themselves, and if a value is changed in any of the UI elements (because of user interaction or otherwise), the underlying ViewModel gets updated. This is called two-way data binding. This is a very powerful concept, as we'll see in the later chapters. The developer does not have to update the UI whenever there is a change in the ViewModel and vice versa. This two-way data binding leads to the elimination of a lot of boilerplate code.
So, what do we gain by having MVVM and MVC in the same framework? As explained earlier, MVVM gives AngularJS the data binding power, and MVC helps you build applications that follow a clean separation of concerns. Testing monolithic applications is very difficult. MVC gives a proper structure to your applications, and different components can be tested individually.
Since AngularJS supports MVC and MVVM architectural patterns, it's described as the MVW (Model-View-Whatever) or MV* framework.
Note
AngularJS or Angular (for brevity) will be used interchangeably in this book.
In this chapter, we will:
- Compare and contrast frameworks and libraries
- Compare and contrast Angular with server-side MVC frameworks
- Compare and contrast Angular with other client-side MVC frameworks
- Find out why to choose Angular over other alternatives
- Learn about data binding (and two-way data binding)
- Learn how to bind a collection of data
- Find out some naming conventions and learn how to organize Angular applications
