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...
“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
respo...
Why does Angular matter?
• Using the DOM (form elements) to hold state
• Wiring up event listeners to respond to all the
p...
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...
With Angular
• Create a model – the single
truth for a value
• Bind the model to the view
• Psuedocode:
– Onclick,
• Form ...
NewRelic
• Graph, data table,
selection widgets
all operating on
one data model
• Views
automatically
change when the
mode...
NewRelic
• https://rpm.n
ewrelic.com/a
ccounts/73842
5/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...
Sample code
• The angularjs
module has some
examples included.
Nacho's Guide to Drupal+Angular
of 14

Nacho's Guide to Drupal+Angular

"They think I do not know a buttload of crap about Angular, but I do!"
Published on: Mar 3, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Nacho's Guide to Drupal+Angular

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

Related Documents