AngularJS - the framework for web apps

2014-02-19

If you're like me, you always want to improve your toolbox to make your life easier. Especially in the business of writing web applications, I always found the tools I've used cumbersome and not a good fit for building modern web applications.

What I wanted was some sort of JavaScript Framework that helped me to write all the UI logic on the client-side without doing any UI related tasks on the server-side.

About two years ago I finally came across the AngularJS project and since then it is an essential and reliable part of my toolbox for building web applications. Here are some points that convince me about using AngularJS.

Real HTML Templates & Data Binding

AngularJS templates are just HTML documents spiced up with some custom elements and attributes. In the terms of AngularJS they're called directives. Furthermore you can embed expressions that are evaluated by AngularJS

A simple example for an AngularJS template looks like this:

<body ng-controller="ItemCtrl">
  <input type="text" ng-model="newItem">
  <button ng-click="addItem(newItem)">Add</button>
  <ul>
    <li ng-repeat="item in items">{{ item.name }}</li>
  </ul>
</body>

AngularJS provides a HTML compiler which traverses the DOM (and not just characters) after the browser parsed the markup and transforms it to the final DOM. Most of the time the transformation process is transparent to the application developer.

Furthermore AngularJS watches your model for changes and re-renders related parts of the UI automatically. In the other way round, input values entered by the user are immediately reflected into the model until they pass validation. And all this by specifying an attribute ng-model. It's all about reducing boilerplate code.

Functionality for the UI

Since AngularJS brings the MVC model (Model-View-Controller) to the browser you implement your functionality in Controllers. Controllers provide the model and functions to the view. All values and functions can be exposed by a special variable $scope which is provided by AngularJS during Controller instantiation.

For an example let's see a basic implementation of the ItemCtrl:

angular.module('myAppModule').controller('ItemCtrl', function ($scope) {
	$scope.items = ['Java', 'Scala', 'Clojure', 'Ruby', 'JavaScript'];
	
	$scope.addItem = function (item) {
		$scope.items.push(item);
	};	
});

That's really straight forward. Remember the Data-Binding?!? When we modify the items array in the addItem function a re-rendering of the UI is triggered transparently. AngularJS takes care of that for us.

Extending HTML to your needs

To write a web application you need higher building blocks than the normal HTML standard provides. With AngularJS it is quite easy to extend the HTML subset to your needs.

For example if you'd like to have an application specific element like <my-shopping-cart items="myItems" /> you can define it like this:

angular.module('myAppModule').directive('myShoppingCart', function() {
	return {
		restrict: 'E',
		scope: { 
			items: '='
		},
		templateUrl: '/myShoppingCart.html'
	};
});

The ability to write your own directives gives you a really powerful tool to your hand to modularize your view code and to avoid repeating yourself. And there is a growing number of AngularJS modules that implement common UI components (i.e. "bootstrap-ui") and are ready to use in your AngularJS project.

More Features

This is just a high level introduction of what AngularJS is about and should give you some inspiration for your next web application project.

AngularJS provides much more concepts to help you to structure your code by modularization and dependency injection. AngularJS is scalable and still a good fit if the code base growth.

See the Developer Guide to learn more about AngularJS.


me

Marco Rico Gomez is a passionate software developer located in Germany who likes to share his thoughts and experiences about software development and technologies with others.


blog comments powered by Disqus