The Cheeky Monkey Media Blog
A few words from the apes, monkeys, and various primates that make up the Cheeky Monkey Super Squad.
An Introduction To AngularJS and Drupal
July 2, 2015 / Treena Bjarnason
If you are looking to create a rich and dynamic web app that has little to no latency, Drupal and AngularJS is the answer as they go hand in hand. In this article I will show you a brief intro of what AngularJS is. There is a bit of a learning curve in this awesome architecture, but if you know some basic JavaScript you will be ok.
AngularJS is a front-end JavaScript framework for making web apps and is created by our good pal Google.
A few cool facts about AngularJS:
- Open Source
- MVC pattern (ASP.NET developer soft spot)
- Handles task like DOM manipulation, updating UI based on data or input, registering callbacks
- Has CRUD application library for: Data-binding, basic templating directives, form validation, routing, deep-linking, reusable components and dependency injection.
- Declarative programming
Benefits of AngularJS
1. Maximizes Performance
We all know that Drupal has a heavy server-side PHP framework. Adding AngularJS to your Drupal website application is really beneficial by adding some of that business logic onto the clients side. Drupal could be used as the backend data source, and AngularJS for presentation/theming in some instances.
Your own coding performance will improve also due to less code needed to do certain things. For example, data-binding is a breeze.
2. Easy to Troubleshoot
Angular uses declarative programming. So when looking at an HTML document, you can get a quick sense of:
- What is static and dynamic.
- What are the variable names.
- What/Where the code is executing.
Here is a picture that compares AngularJS and jQuery:
As we can see in the Angular example, the controllers/function and variables are displayed right in our faces.
For jQuery though you have to do a bit more research inside the JS files and decipher what is going on in the page.
3. Plenty of Resources
Angular has good backing by the web development community. It has 100,000 tagged issues on stackoverflow.com, videos on YouTube and excellent documentation on Angular’s own website.
Now that you have a seen a bit of what Angular has to offer, the best way to learn is to get your hands dirty. It’s impossible to teach you everything in one article, so here is a good list of resources that could help you learn:
- https://docs.angularjs.org/guide (Angular developer)
- https://www.youtube.com/user/angularjs (Angular youtube channel)
- https://www.drupal.org/project/angularjs (Angular module for Drupal)
- https://www.youtube.com/watch?v=NJ4FYsRV3nU (Awesome LevelUpTuts video series of AngularJS)
- http://ng-drupal.org/ (“Drupal meets AngularJS” website with clear examples of AngularJS)
- http://www.w3schools.com/angular/angular_examples.asp (W3schools)
Did you know that the Cheeky Monkey Drupal development team is available to help out with other agencies on big projects? Give us a call if you need some extra experts on your project to help you out.