Web apps are becoming more and more complicated these days as 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, complex web app quickly ends up with a code base that’s difficult to maintain.
Fortunately, a new generation of frameworks is being built to meet these challenges, and AngularJS is one! I’m thrilled to announce the release of AngularJS Succinctly, an e-book sponsored by Syncfusion. I wrote it in a cookbook style that helps you get started with Angular quickly, solving common problems while keeping the best practices in mind.
Let me introduce you to some of the major benefits of using Angular.
Declarative user interface and data binding
Angular uses HTML to define the user interface, which is more intuitive than defining the interface procedurally in JavaScript. Here’s a quick example (give it a try using JSFiddle):
Insert your name:
{{user.name}}
Notice how changing the input value also changes the name in the paragraph. This is due to Angular’s powerful data binding. The ng-model attribute is mapping the user.name directly to the {{user.name}} expression.
$(document).ready(function() {
$("input").keypress(function() {
$("p").text($(this).val());
});
});
jQuery registers a keypress listener to the input and changes the paragraph’s text accordingly. Using Angular, we saved ourselves the document-ready check, the CSS selector for the input, the 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 behavior using an Angular controller.
Extend HTML using directives
Directives are Angular’s way to simplify DOM manipulation and create new HTML elements. In the old days, we used existing HTML elements, for example <input>. Since its behavior is fixed, we used JavaScript to change the behavior. Imagine being able to use a <lightbox> or a <datepicker> element instead with Angular directives. Similar to how we used to pick off-the-shelf jQuery plugins, we can now use third-party HTML elements, or even build our own and use them in our HTML.
To give you an idea how this is done, let’s implement a simple directive. 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:
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: 'Hello World!
‘ }; });
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 yourself in this JSFiddle!
Built-in testing and dependency Injection
Angular’s various pieces of code and your web-app code are linked together using a technique called dependency injection (DI). This lets you define which other modules a module depends on. Look at a 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 them as a parameter to the controller function. If you implement a unit test, you could easily use DI to inject a mock user to simplify unit testing of the same controller. If you are curious, and would like to look into a complete unit test example, here’s a JSFiddle that tests a controller using Jasmine.
The developers behind Angular also created Karma, a unit test runner, and Protractor, an end-to-end test framework for Angular apps.
I could go on and on, listing even more awesome features of Angular, but let’s talk quickly about the community.
Community
It certainly helps Angular to have the Google stamp of approval and a dedicated team of Googlers contributing to its development, but what makes it special is the large community that has embraced the framework. The Angular core team has done a great job getting other developers involved in the development process using GitHub. The number of contributors outside Google has increased steadily. Recently the team started publishing weekly meeting notes.
The modularization of the framework is another important step. The current version of Angular is split into multiple modules, and Angular 2.0 will take it even further. This makes it possible for the community to pick the modules it wants and replace others with modules of its own. The best ideas of the community are adopted by the framework; we are already seeing the beginnings of an ecosystem of small modules.
Take a look at ui-router, a replacement for Angular’s own router module, or the Ionic framework for building mobile apps using HTML 5.
Future
Recently the core team released plans for Angular 2.0. I’m especially excited about the focus on mobile apps, the promise of web components, and the usage of ECMAScript 6. So go ahead, download the e-book and start using Angular today. The best is yet to come!
