Nacho's Guide to Drupal+Angular
-
Upload
joe-tippetts -
Category
Technology
-
view
219 -
download
0
Transcript of Nacho's Guide to Drupal+Angular
![Page 1: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/1.jpg)
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
![Page 2: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/2.jpg)
“Get that corn out of my face!”• Why does
Angular matter?
![Page 3: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/3.jpg)
Why does Angular matter?User experience can get messy when you’re trying to provide a lot of interactivity and fast response… and nutrients.
![Page 4: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/4.jpg)
Why does Angular matter?
• Using the DOM (form elements) to hold state• Wiring up event listeners to respond to all the
potential user interactions.
![Page 5: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/5.jpg)
OurImpact.net• Want a lot of
interactivity on certain pages without giving up out-of-the-box Drupal UI.
![Page 6: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/6.jpg)
OurImpact.net• https://www.ourimpact
.net/deck/uwnu/6
![Page 7: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/7.jpg)
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
![Page 8: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/8.jpg)
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.
![Page 9: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/9.jpg)
NewRelic• Graph, data table,
selection widgets all operating on one data model
• Views automatically change when the model is change via any user interaction
![Page 10: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/10.jpg)
NewRelic• https://rpm.ne
wrelic.com/accounts/738425/applications/7609730
• (private link)
![Page 11: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/11.jpg)
Nacho: I was wondering if you would like to join me in my quarters this night... for some toast.
![Page 12: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/12.jpg)
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
![Page 13: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/13.jpg)
Sample code• The angularjs
module has some examples included.
![Page 14: Nacho's Guide to Drupal+Angular](https://reader036.fdocuments.us/reader036/viewer/2022062306/587d1a4f1a28abae148b77e9/html5/thumbnails/14.jpg)