Nacho’s Guide to Drupal + Angular

“They think I do not know a buttload of crap about Angular, but I do!”

Joe Tippetts9/24/15

“Get that corn out of my face!”• Why does

Angular matter?

Why does Angular matter?User experience can get messy when you’re trying to provide a lot of interactivity and fast response… and nutrients.

Why does Angular matter?

• Using the DOM (form elements) to hold state• Wiring up event listeners to respond to all the

potential user interactions.

OurImpact.net• Want a lot of

interactivity on certain pages without giving up out-of-the-box Drupal UI.

OurImpact.net• https://www.ourimpact

.net/deck/uwnu/6

Before Angular• Before Angular

– Give elements an #id, possibly group like elements with .classes.

– Write event handlers for each #id or .class.

– Psuedocode:• Onclick,

– Change the form value– Change the text display

With Angular• Create a model – the single

truth for a value• Bind the model to the view• Psuedocode:

– Onclick,• Form button knows which model

element it’s bound to and automatically changes it.

• Text display is already listening to the model it’s also bound to and changes.

NewRelic• Graph, data table,

selection widgets all operating on one data model

• Views automatically change when the model is change via any user interaction

NewRelic• https://rpm.ne

wrelic.com/accounts/738425/applications/7609730

• (private link)

Nacho: I was wondering if you would like to join me in my quarters this night... for some toast.

Using Angular in Drupal• Install AngularJS module• Pick version and CDN• Put needed data in Drupal.settings• Attach to your view• Initialize with angularjs_init_application()• Write your javascript

Sample code• The angularjs

module has some examples included.