Building Better Web Apps with Angular.js (SXSW 2014)

2,594 views

Published on

A 2.5 hour workshop at SXSW 2014 to teach Angular.js. Code and examples from the workshop can be found here: http://bit.ly/angularsx

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
  • An informative and useful presentation that guides the visitors step-by-step through AngularJS. You could also check out a book 'AngularJS Web application development Blueprints' on AngularJS authored by the Head of Commerce at RazorfishNeev at http://goo.gl/c5XNe8.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,594
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
83
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Building Better Web Apps with Angular.js (SXSW 2014)

  1. 1. Building Better Web Apps 
 with Angular.js
  2. 2. @KatrinaBekessy Director, Technology & Design! @IanMacDowell Sr. Open Standards Developer! ! #angularsx
  3. 3. http://bit.ly/angularsx
  4. 4. The Plan Angular: What’s the Deal? [20 min.]! Core Components of Angular [30 min.]! Let’s build something! [60 min.]! Make it real time [15 min.]! Wrap up [10 min.]!
  5. 5. How might you build a Mad Libs app?
  6. 6. Angular: what’s the deal?
  7. 7. Web Apps Have Evolved The web can do stuff. “Web 2.0!” A viable non-native option. An elegant non-native option.
  8. 8. Advanced front-end framework for building modern web applications! ! Created in 2009 by Google developers to solve their own problem! ! It’s smart. Truly leverages JavaScript’s prototypical nature to take care of things so your own code won’t have to.!
  9. 9. The MEAN Stack
 MongoDB, Express.js, Angular.js, Node.js!
  10. 10. SPAs
(Single Page Applications) Need some “magic” to make them work without a bunch of spaghetti code!
  11. 11. Dynamic Data Updating views every time data updates get clunky!
  12. 12. Utility Apps Managing states and frequent user input is hard with so much event handling!
  13. 13. 
 
 “As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).”

  14. 14. 
 
 “As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).”

  15. 15. 
 
 “As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).”

  16. 16. 
 
 “As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).”

  17. 17. 
 
 “As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).”

  18. 18. 
 
 “As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).”

  19. 19. 
 
 “As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).”

  20. 20. 
 
 “As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).”

  21. 21. Maintainability!
  22. 22. Angular’s Approach The Views call the shots. Angular gives HTML the power to drive the app.! ! Declarative programming (focus on the what, not the how)! ! Enforce modularity and separation of concerns, but make it easy for all the parts to work together.! ! Emphasis on testing, and making testing easy!
  23. 23. HTML on Steroids Angular extends the capabilities of HTML, by sprinkling new attributes throughout the DOM.! ! For example:! ! ! <body  ng-­‐app=“myApp”>          <div  ng-­‐controller=“myController”>                  <button  ng-­‐click=“doSomething()”>Click  me!</button>          </div>   </body>  
  24. 24. OK, but how?

  25. 25. With great power… http://www.bennadel.com/resources/uploads/2013/feelings_about_angularjs_over_time.png!
  26. 26. Magic Trick #1: 
 Two-Way Data Binding View! Merge Once! Template! Model! View! Template! Model! Constant Updates! One-Way Data Binding! Two-Way Data Binding!
  27. 27. Magic Trick #2:
 The Angular $scope •  The glue that holds it all together! •  Maintains states and keeps things contained throughout the DOM! •  Enables the View to function as the Model! ! ! In our controller:        $scope.myData  =  ‘someValue’;     In our view:        <input  type=“text”  ng-­‐model=“myData”  />          <p>{{myData}}</p>  
  28. 28. The magic $scope Source: http://devgirl.org/wp-content/uploads/2013/03/concepts-controller.png!
  29. 29. Scopes can be nested •  Apps have exactly one $rootScope to rule them all.! •  Views can have multiple children scopes. They can be nested and tend to follow the nesting of DOM elements.! ! ! <body  ng-­‐app=“myAppName”>   <div  ng-­‐controller=“myController”>          <ul>   <li  ng-­‐repeat=“item  in  items”>   <li  ng-­‐repeat=“item  in  items”>   <li  ng-­‐repeat=“item  in  items”>   $scope! $scope.items= […]! $scope.item=‘item1’! $scope.item=‘item2’! $scope.item=‘item3’!
  30. 30. Magic Trick #3:
 Dependency Injection •  State what you need, not how you need to get it.! •  Makes objects and modules easily interchangeable! ! !   var  app  =  angular.module(‘myAppName’,  [‘dependency1’,  ‘dependency2’,  …]);  
  31. 31. Key Components of Angular
  32. 32. Main Concepts Views and Routes: getting your app to load! ! Directives and Filters: sprinkling the DOM with special sauce! ! Angular Modules: giving the Views what they need! ! Angular’s Cycles: the “engine” that keeps it all running! ! !
  33. 33. Views and Routes
  34. 34. It starts with Views •  Angular extends HTML by providing new functionality with special DOM elements, attributes, and classes! •  View dictates the Model! •  Partial Views can be loaded in as needed and inherit the current $scope   In our index.html:! <body  ng-­‐app=“myAppName”>          <div  ng-­‐view></div>   </body>  
  35. 35. Routes •  Angular ships with a built-in $routeProvider! •  Supports apps by getting necessary files to assemble the layout based on URL! ! var  app  =  angular.module(‘myAppName’,  [‘ngRoute’]);     app.config([‘$routeProvider’,      function($routeProvider)  {          $routeProvider              .when(‘/foo’,  {                  templateUrl:  ‘views/foo.html’,                  controller:  ‘fooController’              })              .when(‘/bar’,  {                  templateUrl:  ‘views/bar.html’,                  controller:  ‘barController’              })   }]);  
  36. 36. Directives and Filters
  37. 37. Directives •  Directives are the markers in the DOM that allow the view to tell the controllers what they need (usually using the ‘ng’ prefix)! •  Handle behaviors and transformations of the DOM and connect the DOM to Angular’s capabilities.! •  Transform elements, attach events, and bind the Scope.! •  Easy to write custom Directives to manage behavior specific for your app.! !
  38. 38. a! form! input! input[checkbox]! input[email]! input[number]! input[radio]! input[text]! input[url]! ngAnimate! ngApp! ngBind! ngBindHtml! ngBindTemplate! ngBlur! ngChange! ngChecked! ngClass! ngClassEven! ngClassOdd! ngClick! ! ngCloak! ngController! ngCopy! ngCsp! ngCut! ngDblclick! ngDisabled! ngFocus! ngForm! ngHide! ngHref! ngInclude! ngInit! ngKeydown! ngKeypress! ngKeyup! ngList! ngModel! ngMousedown! ngMouseenter! ngMouseleave! ! ngMousemove! ngMouseover! ngMouseup! ngNonBindable! ngOpen! ngPaste! ngPluralize! ngReadonly! ngRepeat! ngSelected! ngShow! ngSrc! ngSrcset! ngStyle! ngSubmit! ngSwitch! ngTransclude! ngValue! script! select! textarea!
  39. 39. Filters •  Help with special formatting! •  Can be used in Views, Controllers, and Services! •  Easy to build custom filters! In the Controller:!        $scope.amount  =  4321.99;          $scope.name  =  ‘bobby’;     In  the  View:          <span>{{amount  |  currency}}</span>  //  $4,321.99          <span>{{name  |  uppercase}}</span>    //  BOBBY      
  40. 40. Angular Modules
  41. 41. Everything is a type of Module MODULES Config Factory Controllers Directives Filters Routes Service Provider Values/ Constants
  42. 42. Main App Wrapper Module •  Creates a shell that we can chain other modules to! •  Typically declare the app in the <html> or <body> tags, but can put it anywhere! ! In our View:          <html  ng-­‐app=‘myAppName’>   In our JS var  app  =  angular.module(‘myAppName’,  [‘dependency1’,‘dependency2’]);          
  43. 43. Other Modules attach to the app •  Register all other modules as part of your main app! •  Order or where the modules are located doesn’t matter! ! var  app  =  angular.module(‘myAppName’,  [‘ngRoute’,  ‘myService’]);   Register a Factory Module:        app.factory(‘myService’,  function  ()  {              return  something;          });     Register a Controller Module:!        app.controller(‘myController’,  [‘$scope’,    function  ($scope)  {...}          ]);  
  44. 44. Angular’s Cycles
  45. 45. Angular’s HTML Compiler •  Enables new capabilities of the DOM! •  Runs in 2 phases:! •  Compile: traverse the DOM and note all the directives! •  Link: hook up the directives with a scope, produce a live view!
  46. 46. Digest Cycles Angular runs its own digest cycles in addition to the browser’s event loop! ! 2 main steps:! •  $watch observes changes to the view and scope! •  $apply pushes changes that need to be made! ! http://docs.angularjs.org/img/guide/concepts-runtime.png!
  47. 47. Getting it all working is an art form. http://nathanleclaire.com/images/smooth-angular-tips/js-learning-curves.jpeg!
  48. 48. Let’s build something! !
  49. 49. Nerd Libs! •  Mad Libs game built as a SPA! •  Try it out: https://angularsxsw.firebaseapp.com!
  50. 50. Setup and Tooling •  Grab the code: http://bit.ly/angularsx! •  Install Batarang Chrome Extenstion! •  Make sure you have a local server ready (Node, Grunt, Mamp, etc.)!
  51. 51. How do I “think” in Angular? •  Start with your data and Models! •  Set up your Routes! •  Create your Services! •  Get Controllers for each View! •  Create Views (HTML templates)! •  Add directives and event handlers for behaviors! !
  52. 52. Getting Real (Time)
  53. 53. Firebase is Cool •  Database as a Service! •  3-Way data binding! •  Near real time updates! •  Built-in RESTful API! •  Firebase Forge!
  54. 54. Thank You.

×