Web apps are getting more and more complicated these days. More and more business logic moves from the backend to the frontend. Libraries and frameworks of the past weren't built with these new requirements in mind. For example using jQuery to manage a large and complex web app quickly ends up in a very difficult to maintain code base.
Fortunately, a new generation of frameworks are being built to meet these challenges and Angular.js is one of them! Let me introduce you to some of the major benefits of using Angular.
Angular uses HTML to define the user interface, which is much more intuitive than defining the interface procedurally in Javascript.
Following a quick example. Give it a try using an interactive JSFiddle!
<body ng-app>
<span>Insert your name:</span>
<input type="text" ng-model="user.name" />
<p>{{user.name}}</p>
</body>
Notice how changing the input value also changes the name in the paragraph? This is the due to Angular's powerful databinding. The ng-model attribute is mapping the user.name directly to the {{user.name}} expression.
The same functionality using jQuery would look something along the line of:
$(document).ready(function() {
$("input").keypress(function() {
$("p").text($(this).val());
});
});
It registers a keypress listener to the input and changes the paragraph's text accordingly. Using Angular we just saved ourselves the document ready check, the CSS selector for the input and paragraph elements and the manual binding of the keypress event listener. That means less code!
Even more important is that one can understand the Angular example just by looking at the HTML template, there's no need to figure out where or if some jQuery code might affect it.
I've prepared another JSFiddle in case you want to see more examples with actual behaviour using an Angular controller.
Directives are Angular's way to simplify DOM manipulation and to create new HTML elements. In the old days we used existing HTML elements as for example <input>, but since it has a fixed behaviour we used Javascript to change the behaviour. Imagine with Angular directives to be able to use a <lightbox> or a <datepicker> element instead. Similar to how we used to pick of the shelf jQuery plugins we can now use third-party HTML elements or even build our own and use them in our HTML code.
Let us implement a very simple directive on our own to give you an idea how this is done. We want to introduce a new HTML element called hello-world which should output an h3 header with a friendly message.
The HTML template uses our new hello-world element:
<body ng-app="app">
<hello-world></hello-world>
</body>
And our directive with the same name, outputs a template with the greeting.
var app = angular.module('app', []);
app.directive('helloWorld', function() {
return {
restrict: 'E', // tells angular to only match elements (E = element)
replace: 'true',
template: '<h3>Hello World!</h3>'
};
});
Note, that the replace attribute ensures that the hello-world element is actually replaced instead of rendering the template inside the element. Play around with it for yourself in this JSFiddle!
Angular's various pieces of code and also your web app code are linked together using a technique called Dependency Injection (DI). It let's one define for each module which other modules it depends on.
Let's have a look at an typical Angular controller and inject our contrived User model via dependency injection:
var app = angular.module('app', []);
app.factory("User", function() {
return {
find: function(id) { return something; }
};
});
app.controller('UserShowCtrl', function($scope, User) {
// do something with the User model, as for example load the first user from our backend
$scope.user = User.find(1);
});
The User model and the $scope are simply injected by passing it as a parameter to the controller function. If we would implement a unit test one could easily use DI to inject a mock user to simplify unit testing of same controller. If you are curious now and like to look into a complete unit test example here's a JSFiddle which tests a controller using Jasmine.
The developers behind Angular also created Karma a unit test runner and Protractor a End-to-End test framework for Angular apps.
I could certainly go on and on and list even more awesome features of Angular, but let's talk quickly about the community.
It certainly helps Angular to have that Google stamp of approval and a dedicated team of Googlers contributing to its development. But what makes it special is the large community which has embraced the framework. The Angular core team has done a great job of getting other developers involved in the development process using Github. The number of contributors outside of Google has increased steadily and recently the team has started to publish weekly meeting notes.
Furthermore the modularization of the framework is another important step. The current version of Angular is already split into multiple modules and Angular 2.0 will take this idea even further. This makes it possible for the community to pick the modules they want to use and replace other modules with their own. The best ideas of the community get adopted by the framework and we are already seeing the beginnings of an ecosystem of small modules.
Take a look ui-router, a replacement for Angular's own router module or the Ionic Framework to build mobile apps using HTML5.
Just recently the core team released plans for Angular 2.0. And I'm especially excited about the focus on mobile apps, the promise of Web Components and the usage of ECMAScript 6. The best is yet to come!
I'm thrilled to announce the AngularJS Succinctly ebook sponsored by SyncFusion. It is a cookbook style book which helps you getting started with Angular quickly and solve common problems while keeping best practices in mind. So, go ahead and download the ebook and start using Angular today!