Angular.js is the hot new thing right now for designing applications in the client. Well, it’s not so new anymore but is sure as hell still hot, especially now that it’s being used and backed by Google. It takes the idea of a JavaScript framework to a whole new level and provides a great basis for developing rich and dynamic apps that can run in the browser or as hybrid mobile apps.
In this article I am going to show you a neat little way of using some of its magic within a Drupal 7 site. A simple piece of functionality but one that is enough to demonstrate how powerful Angular.js is and the potential use cases even within heavy server-side PHP frameworks such as Drupal. So what are we doing?
We are going to create a block that lists some node titles. Big whoop. However, these node titles are going to be loaded asynchronously using Angular.js and there will be a textfield above them to filter/search for nodes (also done asyncronously). As a bonus, we will also use a small open source Angular.js module that will allow us to view some of the node info in a dialog when we click on the titles.
Just a note to anyone looking to use this code… This is for demonstration purposes and if you’re going to build something like this for real, make sure you build it to appropriate standards.
The ang_node_api() function queries the node table directly without invoking Drupal’s internal APIs. If you’re running any type of advanced node access modules (nodeaccess, taxonomy_access, og, etc), those restrictions will not be taken into consideration.
It’s also going to display unpublished content to all users, and not filter the body contents.
I agree and thanks for pointing that out. As I briefly mentioned after the callback (perhaps too briefly), the code is for demonstration purposes only. Mocking quickly some data in the API for brevity. For any production ready code, error handling needs to be done, you need to make sure you only return the nodes you want (status check, etc), implement node access checks (using the database abstraction layer), etc.
I would like to extend the scope of the article. Instead of only showing how to use angular why not extend it to js frameworks.
I made a mithril example without the drupal code at http://embed.plnkr.co/pOvB7Zn3tH73O84R90L2/preview.
The learning curve for mithril is less steep than angulars, which makes it easier to learn in a multi programming language environment like drupal.
There is no template content because everything is javascript. It might seem strange to some but as I see it it’s not that different from using jade as a template language.
Nice. Sounds good. I like writing and seeing integrations of other technologies (be them front end or back end) with Drupal. It’s important Drupal developers learn that not everything needs to be done in Drupal and other modern technologies can be used for certain functional components in an integrated manner.
Let me know if you need any help with the Drupal part.
Thanks very much @upchuk for the valuable information. I think Angular JS can prove very useful at the end user’s side, whereas Drupal’s powerful build up is truly inevitable for the system / content manager. All the best, thanks.
