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

1. Nacho’s Guide
to Drupal +
Angular
“They think I do not
know a buttload of
crap about Angular,
but I do!”
Joe Tippetts
9/24/15

2. “Get that corn out of my face!”
• Why does
Angular
matter?

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

4. Why does Angular matter?
• Using the DOM (form elements) to hold state
• Wiring up event listeners to respond to all the
potential user interactions.

5. OurImpact.net
• Want a lot of
interactivity on certain
pages without giving up
out-of-the-box Drupal
UI.

6. OurImpact.net
• https://www.ourimpact
.net/deck/uwnu/6

7. 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

8. 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.

9. NewRelic
• Graph, data table,
selection widgets
all operating on
one data model
• Views
automatically
change when the
model is change
via any user
interaction

10. NewRelic
• https://rpm.n
ewrelic.com/a
ccounts/73842
5/applications
/7609730
• (private link)

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

12. 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

13. Sample code
• The angularjs
module has some
examples included.