Simple Data Binding (JQuery versus AngularJS)

I've been using AngularJS this past year and I'm impressed with it's capabilities. Here are some of the reasons why.

Data Binding:

I'm finding that the two-way data binding capabilities of AngularJS are saving me considerable amounts of coding time.  By eliminating lots of mundane "boilerplate" coding, I can focus on the specific application logic of the feature I'm developing.

Templates and Directives:

These extend what you can do in HTML so you're basically describing how the model should be projected into the view. When Angular compiles, it uses these rendering instructions called directives to set up the data binding in your application. And you can create your own..which lets you easily create custom components which are described simply within the HTML markup.

MVC:

AngularJS basically uses the MVC design pattern which promotes separation of concerns. Actually it's more like the Model-View-ViewModel pattern popularized by Microsoft.

Dependency Injection:

AngularJS has a dependency injection subsystem which reduces the chances that refactoring will cause code breakage. This allows your code to ask for it's dependencies instead of defining them. This abstraction allows those dependencies to be injected into the underlying code therefore making them easier to change without the risk of code breakage.

Data Binding Example:

Here's an extremely simple example of data binding AngularJS. First though we'll look at how this same data binding would be done in plain old JavaScript, JQuery and then finally we'll see how much simpler it gets done in AngularJS.