Historically, web pages have often been written as somewhat tangled messes of server database access code generating, and embedding into Javascript and HTML. What has been lacking until recent years has been a web page construction equivalent of the revolution that Object Orientation brought to application programming.
The holy grail has always been to implement a Model-View-Controller (MVC) framework for web development. The idea is to have the data separated into models, the presentation of the data (the web pages) separated into views, and the navigation separated into controllers. This was a tall order because the web pages presented to users still needed to be rendered in HTML, a language that was never intended for ideas such as MVC.
Frameworks such as the well adopted Backbone have offered something of a compromised approach to the MVC concept. Angular.js is a JavaScript framework that appeared late on the scene in 2012, learning from initial offerings, and with the backing of Google, able to change the playing field somewhat. The Google resources injected into its development were large, and resulted in a very powerful product with massive ongoing support.
However, the power and purity of MVC implementation came with a big price – complexity. Angular is not for the faint hearted, with some scary and often perverse syntax to stumble through.
AngularJS Framework
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?
The impedance mismatch between dynamic applications and static documents is often solved with:
- a library – a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.
- frameworks – a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. E.g., durandal, ember, etc.
AngularJS takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. AngularJS teaches the browser new syntax through a construct we call directives. Examples include:
- Data binding, as in {{}}.
- DOM control structures for repeating, showing and hiding DOM fragments.
- Support for forms and form validation.
- Attaching new behavior to DOM elements, such as DOM event handling.
- Grouping of HTML into reusable components.
