With the new emphasis on web technologies from companies such as Google and Facebook, and the maturing Node.js framework, web technologies have taken centre stage and are maturing rapidly. Web development is on the verge of a huge shift. When we build a web application today, we are forced to separate the structure from interactivity, and build the application in two stages.
AngularJS enables developers to combine these two equally important components, taking advantage of the fact that web browsers are becoming more intelligent and widely distributed, and we no longer need to be as sensitive to less advanced browsers. In this short introduction to AngularJS, I'll examine how the framework is altering the face of web development today.
Traditional web application development
Fundamentally, browsers are event-driven applications. We write our interactivity by targeting DOM elements in our HTML using JavaScript selector functions, and adding event listeners to the element.
For instance, when we want to run a function on an element with the id of buybutton , we add a click event listener with a handler function to an event. Our HTML might look like this:
<button id="buybutton">Buy now</button>To add event handling, our JavaScript might look something like so:
document.findElementById('buybutton')
.addEventListener('click', function(event) {
// The button with the id of buybutton
// has been clicked
});While effective for simple applications, this method can prove troublesome in more complex applications. Even with this simple example, there is a tight coupling between the document structure and the JavaScript. That is, the element with the buybutton id tag must not change.
When design changes, or the name or DOM structure of the button changes, our brittle JavaScript is likely to stop working. Unless we have effective frontend integration tests, broken interactivity can easily be missed.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Enter Angular
Angular, on the other hand, declaratively integrates interactivity alongside the element description. We can rewrite the above example within the HTML file:
<button ng-click="buyFn()">Buy now</button>Rather than concerning ourselves with how the element is found in the page, we can let Angular worry about attaching events to the elements while we figure out the business logic of our application. It frees us developers from worrying about the work it takes to apply the JavaScript, and build our application. The confusion of how elements work is shrunk significantly as the interactivity is written into the web application itself.
Rather than building upon the DOM, we can build upon our application's data
As the nature of embedding interactivity into our HTML declaratively defines the purpose of the DOM element, Angular changes how we teach web development. Rather than building upon the DOM, we build upon our application's data. Instead of studying on how the browser works and what CSS selectors are, we focus upon expanding knowledge of the functionality of the application.
Getting Started
It is extremely easy to get started with Angular. There are two components required:
- Integrating the angular.js library file in our HTML
- Bootstrapping our application
We can integrate the angular.js library in the same way we can integrate any JavaScript library with a script tag:
<html>
<head><title>Our first angular application</title></head>
<body>
<script src="scripts/angular.js"></script>
</body>
</html>To bootstrap our Angular application, we'll need to tell Angular where to set the root of our application. We can add an attribute to an element on the page called ng-app. This enables us to embed our application anywhere, and not take over the entire application. This allows Angular to play nicely with other web frameworks.
When we want our Angular application to control the entire page, we can place it on the root element:
<html ng-app>
<!-- ... -->With that, our Angular application is ready to go. When the browser loads the library, it will hook into the onready event fired by the browser, start parsing the DOM tree and automatically start our app. Once it is running, we have a fully functional Angular environment to interact with.
We can bind both data and functions to our HTML document by using simple directives. A directive is a function that is run on an element to give it superpowers – for example, augmenting that element's functionality. ng-click, for instance, adds the ability to run a function when the element is clicked.
An adding calculator might be written like so:
<button ng-click='total = total + 1'>+1</button>
Total: {{ total }}
<button ng-click='total = total - 1'>-1</button>Building bi-directional data bindings in Angular is as easy and natural as it should be. We simply describe the data and functional interactivity as we want it to appear and Angular takes care of the rest.
Not yet convinced? Angular enables us to create custom elements easily, as well as modularising our functionality. We can write a complex web application like so (this is a simplified snippet of one of our production Angular applications):
<header user="currentUser"></header>
<product-list ng-model="products"></product-list>
<checkout ng-model="shoppingCart"></checkout>The cost of development
With the growth of Angular around the web development community, it is becoming easier to find and hire Angular developers to build complex web applications. Angular strips away the work required to build boilerplate functionality, and makes it easy to build engaging web experiences in a fraction of the time it might usually take.
The community is growing larger every day and open source components are appearing in the community faster than ever. In fact, the growth of Angular is showing similarities with Ruby on Rails between 2004 through 2006.
Angular is the way of the future
It's easy to see how Angular itself could change the face of web design. Dedicate a part of your team to building a part or the whole of your application in Angular – I promise, you'll never look back.
Words: Ari Lerner
Ari Lerner is a distributed computing and advanced frontend developer. This article originally appeared in net magazine issue 257.
