AngularJS Introduction

Brief introduction to key concepts in AngularJS.

This goes along with the example repo found here:
https://github.com/callseng/angular_v_jquery_1

Transcript

1. AngularJS Overview Gilman Callsen @gcallsen gilman.callsen@gmail.com
2. Introduction •  What is the point? –  Client-side web applications •  How can web apps be built? –  No Framework (raw JS, jQuery or other libraries) –  MV* Frameworks (Backbone, Ember, Knockout…) •  Why use a framework? •  The ‘Angular’ Way •  Tonight’s Goal: –  Give you the tools to evaluate Angular for future projects 3/27/13 @gcallsen 1
3. Ever run into zombie events in a Backbone application? No? You've either not used it for anything big, have Rain Man-like ability to craft software, or are fucking shitting me. Describing the merits of Ember.js https://gist.github.com/trek/3514718 3/27/13 @gcallsen 2
4. What ‘is’ Angular •  MV* Framework •  Ideal for comprehensive Applications –  Not a library •  Focus is on binding data and it Extends HTML •  Plays nice with libraries –  (Seems to prefer jQuery) 3/27/13 @gcallsen 3
5. Key Concepts •  Templating & Data Binding •  Controllers •  Directives •  Services •  Dependency Injection •  Filters •  Routing •  Testability 3/27/13 @gcallsen 4
6. Key Concepts – for this talk •  Templating & Data Binding •  Controllers •  Directives •  Services •  Dependency Injection •  Filters •  Routing •  Testability 3/27/13 @gcallsen 5 (super  fast)  
7. Quick Apples-to-Apples Learn by Example 3/27/13 @gcallsen 6
8. 3/27/13 @gcallsen 7 h-p://yosafatariprimana.files.wordpress.com/2011/08/helloworld-­‐wallpaper.jpg  
9. Hello World: jQuery vs Angular •  Step 01 - Hello World Apps •  Setup: –  Working directory with •  ./static/js à jQuery and Angular •  ./static/css à main.css and Twitter Bootstrap •  ./static/img à Twitter Boostrap 3/27/13 @gcallsen 8 How  would  you  use  jQuery  to  update  a  div  to  say  “Hello  World!”?  
10. jQuery vs Angular •  Step 01 - Hello World Apps •  Setup: –  Working directory with •  ./static/js à jQuery and Angular •  ./static/css à main.css and Twitter Bootstrap •  ./static/img à Twitter Boostrap 3/27/13 @gcallsen 9 jQuery: •  Tag speci"c part of the DOM (ID or Class) •  Wait for document to load •  Find DOM element, replace with desired text
11. jQuery vs Angular •  Step 01 - Hello World Apps •  Setup: –  Working directory with •  ./static/js à jQuery and Angular •  ./static/css à main.css and Twitter Bootstrap •  ./static/img à Twitter Boostrap 3/27/13 @gcallsen 10 jQuery: •  Tag speci"c part of the DOM (ID or Class) •  Wait for document to load •  Find DOM element, replace with desired text Angular: •  Bind a variable to a part of the template and de"ne the controller •  De"ne value of that variable •  Wait for document to load and for Angular to kick in
12. Take Away •  Both methods seem pretty similar right now –  You’ll see the magic soon (hint: DATA vs DOM) •  Focus is on Binding Data versus Selecting the DOM 3/27/13 @gcallsen 11
13. Templating and Data Binding Where all the data at? 3/27/13 @gcallsen 12
14. 3/27/13 @gcallsen 13 h-p://www.theblackguywhoLps.com/wp-­‐content/uploads/2013/03/old-­‐man-­‐at-­‐computer.jpg  
15. Data is Key •  Step 02 - How do we handle data? •  Question: –  How do you make User Input update a portion of the page? 3/27/13 @gcallsen 14
16. Data is Key •  Step 02 - How do we handle data? •  Question: –  How do you make User Input update a portion of the page? 3/27/13 @gcallsen 15 •  jQuery  does  not  assign  user  input  to  any  sort  of  data  model   •  It  finds  an  element’s  value  and  replaces  another  element’s  val   •  All  of  this  within  the  scope  of  the  DOM  
17. Data is Key •  Step 02 - How do we handle data? •  Question: –  How do you make User Input update a portion of the page? 3/27/13 @gcallsen 16 •  Angular  binds  user  input  to  the  template  through  a  data  model   •  Assigns  user  input  to  a  data  model   •  Template  reflects  current  value  of  that  data  model   •  (Also  faster!)   •  jQuery  does  not  assign  user  input  to  any  sort  of  data  model   •  It  finds  an  element’s  value  and  replaces  another  element’s  val   •  All  of  this  within  the  scope  of  the  DOM  
18. Take Away •  Design revolves around data – not arbitrary user interaction bindings (keyup, change, etc.) or DOM lookups and replacements No  ID/Class  required   (leave  that  for  styling!)   Bind  data  to  template.     Angular  handles  DOM  updates.     3/27/13 @gcallsen 17
19. Directives Extending HTML with Reusable Components 3/27/13 @gcallsen 18
20. 3/27/13 @gcallsen 19 h-p://www.flashvideodownloader.org/fvd-­‐suite/opera-­‐fun/7.jpg  
21. Reusable Components – New HTML •  Step 03 •  How do you currently approach ‘widgets’? –  Includes –  iFrames –  ? 3/27/13 @gcallsen 20
22. Reusable Components – New HTML •  Step 03 •  How do you currently approach ‘widgets’? –  Includes –  iFrames –  ? •  What if you could create your own widget as a tag? 3/27/13 @gcallsen 21 <my-­‐new-­‐widget>    With  awesome  capabiliLes   </my-­‐new-­‐widget>  
23. Reusable Components – New HTML •  Step 03 •  How do you currently approach ‘widgets’? –  Includes –  iFrames –  ? •  What if you could create your own widget as a tag? 3/27/13 @gcallsen 22 <my-­‐new-­‐widget>    With  awesome  capabiliLes   </my-­‐new-­‐widget>   •  Example Requirements: •  Reusable component •  Holiday Spirit! - Custom seasonal greetings for each ‘widget’ •  All widgets re#ect the same user input
24. Directives Part Deux Let’s add some logic 3/27/13 @gcallsen 23
25. More than just a new way to Include •  Step 04 •  Directives don’t simply de"ne templates and insert the HTML •  They allow data-speci"c logic 3/27/13 @gcallsen 24
26. More than just a new way to Include •  Step 04 •  Directives don’t simply de"ne templates and insert the HTML •  They allow data-speci"c logic 3/27/13 @gcallsen 25 •  Multiple ‘Widgets’ Selective Behavior •  Contrived, but, let’s make each widget appropriately colored
27. What’s Going On 3/27/13 @gcallsen 26 •  Directive-speci"c Logic •  scope.$watch()
28. Testing Who wants a little TDD? 3/27/13 @gcallsen 27
29. 3/27/13 @gcallsen 28 h-p://lostechies.com/derekgreer/files/2011/03/TestDrivenDevelopment_155FE599.png  
30. Testing Built Right In •  Uses Jasmine •  Uses Testacular •  Provides framework for: –  Unit Tests –  E2E Tests 3/27/13 @gcallsen 29
31. Testing Built Right In •  Uses Jasmine •  Requires Testacular •  Provides framework for: –  Unit Tests –  E2E Tests 3/27/13 @gcallsen 30 •  Angular’s tutorial provides excellent examples of unit and end 2 end testing
32. Take Away •  Testing is not a second class citizen •  If TDD is important to you, Angular makes it seamless 3/27/13 @gcallsen 31
33. Resources & Contact •  Angularjs.org •  OneHungryMind.com •  Egghead.io *Fantastic video tutorials 3/27/13 @gcallsen 32 Gilman  Callsen   @gcallsen   gilman.callsen@gmail.com   Examples  from  this  presentaLon:     h-ps://github.com/callseng/angular_v_jquery_1