AngularJS is a level of abstraction above the old JQuery and Backbone style of app. It frees the developer from worrying about the tedious details of updating the DOM. For example, a typical old style app would do something like this:
function updateCheckoutButton(cart) {
if (cart.length === 0) {
$('#checkoutButton').addClass('light-blue');
$('#checkoutButton').prop('disabled', true);
else {
$('#checkoutButton').addClass('dark-blue');
$('#checkoutButton').prop('disabled', false);
}
}
1) Code reduction - The C language was invented to be an abstraction above assembly. Assembly code has a lot of low level details of moving values from registers, adding them, etc. The C language abstracts that away. In a similar way, AngularJS abstracts away the low level details of DOM manipulation.
2) Data binding - In the first example, it's important that updateCheckoutButton() is called wherever it's necessary for it to be called. Otherwise bugs could appear when the button is not updating when it should. AngularJS simplifies this to just listening for changes in the scope. It's possible to achieve the same thing using events, but again that's a lot of low level details of managing events and event propagation.
3) Declarative UI - <button id="checkoutButton"></button> tells me nothing about how this button behaves. The AngularJS example is immediately obvious on the button's behavior.
4) Unit testing - I can write a unit test to ensure that the value of scope.isCartEmpty is updating correctly. This test can be pure JS without any DOM support. It's much harder to test the DOM manipulation code style.
(In the controller code)
(In the HTML) The AngularJS style has the following advantages:1) Code reduction - The C language was invented to be an abstraction above assembly. Assembly code has a lot of low level details of moving values from registers, adding them, etc. The C language abstracts that away. In a similar way, AngularJS abstracts away the low level details of DOM manipulation.
2) Data binding - In the first example, it's important that updateCheckoutButton() is called wherever it's necessary for it to be called. Otherwise bugs could appear when the button is not updating when it should. AngularJS simplifies this to just listening for changes in the scope. It's possible to achieve the same thing using events, but again that's a lot of low level details of managing events and event propagation.
3) Declarative UI - <button id="checkoutButton"></button> tells me nothing about how this button behaves. The AngularJS example is immediately obvious on the button's behavior.
4) Unit testing - I can write a unit test to ensure that the value of scope.isCartEmpty is updating correctly. This test can be pure JS without any DOM support. It's much harder to test the DOM manipulation code style.