Drupal 8 and AngularJS

Drupal 8 and AngularJS are two cutting edge technologies that can work effectively together to allow creation of web applications and effective dynamic data views.

1. What is AngularJS?

AngularJS has received wide popularity recently. AngularJS is a JavaScript framework, that binds the data and the browser document elements in a very powerful dynamic way. With AngularJS, binding the DOM elements and the data models, and making them automatically react to the change, becomes easy and predictable. AngularJS has been taken up by Google, and now Google inputs liberally into the framework. AngularJS is available for free under the MIT license. Visit the AngularJS web site.

Technically speaking, AngularJS is a MVC (model-view-controller) framework, that adds this programming pattern to the usual HTML/CSS/JavaScript stack, turning it into a powerful web application platform. See a Wikipedia AngularJS article for more detail.

2. Where can AngularJS be used?

Non-technically speaking, AngularJS is used to build web applications. Anything that presents data and manipulates data. Lists of names and items, store products, dynamic widgets, smart form controls, miscellaneous interactive elements.

AngularJS is a powerful extension of AJAX. You probably have heard of AJAX already. Some 10 years ago, AJAX was a significant breakthrough in web technology, allowing the web browser to exchange data with the server without doing a page reload. That was the first significant step in turning a web browser into a web app platform. There was one problem though. AJAX requests were hard to implement in a controlled way and binding them to the browser DOM elements also meant a lot of meticulous work. Now, AngularJS has built on that technology, making AJAX and it’s data bindings powerful and seamless.

Some powerful use cases are listed at the Buildwith web site.

3. What are the similar JavaScript frameworks?

It would be wrong to say, that AngularJS appeared in vacuum. There are, in fact, many JavaScript frameworks, that do some things similar to AngularJS, and with some of them AngularJS plays quite well.

Two frameworks that come up most commonly, are the Underscore.js and jQuery.

Underscore.js a powerful data manipulation JavaScript library, and it can parse and filter and organize collections of data elements (objects) very efficiently. In quite a few aspects, Underscore.js and AngularJS intersect, but both can be used to complement one another in their strong sides.

jQuery has become a must-have library to use in a web site, with it’s powerful DOM manipulation and CSS interaction. AngularJS has some rough edges with jQuery, because AngularJS has a lighter version of jQuery in it, and it relies on it to do DOM manipulation and visual effects, while AngularJS itself does the rest. When the AngularJS meets with external (real) jQuery, there is a conflict between the jQuery’s $ function and the AngularJS’ $ function. The conflict requires a resolution, which is achieved with the noConflict() function, releasing the $. Another option is namespacing in JavaScript function declarations, which Drupal actually uses since version of Drupal 7.

4. How can AngularJS be used with Drupal?

AngularJS can be used with Drupal in a variety of ways. In web shops and web carts, where setting product options can calculate price in real-time. In all kinds of listings, like news listings, person databases, ticket systems. It can be used for live filtering of data. For all kinds of live update widgets, live weather widgets and various real-time tracking. And, of course, a sweet role with the smart forms, that evaluate values and adapt in real-time without having to reload the page.

With the Drupal 8’s built-in services support, AngularJS comes a very handy and helpful, and a promising companion.

5. A working sample module.

AngularJS can be daunting initially. It was for me. As I was making my first steps, and trying to make it work with Drupal 8, I have written a small module, containing a few samples of usage. The module can be found at my github page. Install it, and then navigate to the /angulars page. Play with the code and the output on the page.

6. Coverage in Drupal related blogsphere.

There have been some interesting blog posts about Drupal and AngularJS:

AngularJS Meets Drupal website
A lullabot blog post with a sample module
AngularJS on top of Drupal by Will Vincent
Lullabot’s Processing forms with AngularJS article