Intro to AngularJS (JakartaJS Dec 2013)

Intro to AngularJS (JakartaJS Dec 2013)

0fe18dfd87b3e48c0a45280e07cf96c6?s=128

Giovanni Sakti

December 18, 2013
Tweet

Transcript

  1. Hi, my name is Giovanni

  2. I Work for…

  3. None
  4. I am a Milanisti Ultras

  5. That’s why technologies that I use mostly use a red

    logo
  6. Because it’s blue and cr*ppy green I made the logo

    small
  7. Thanks!!

  8. Today

  9. we’ll have fun with…

  10. Before we start, I want to ask a question.

  11. Did anyone here use..

  12. None
  13. Great! Let’s compare later..

  14. None
  15. Angular JS is a client-side, JS MVC framework for creating

    rich, “single page application” A.K.A SPA
  16. Angular JS is backed by..

  17. Philosophy Business logic should be written imperatively User experience should

    be written declaratively
  18. Imperative ?

  19. None
  20. $(“#change-­‐me”).html(“I  am  changed!”) Hey “change-me” you should turn yourself into

    “I am changed” <div  id=‘change-­‐me’>     I  will  not  yield!   </div> <div  id=‘change-­‐me’>     I  am  changed!   </div>
  21. Declarative ?

  22. None
  23. $scope.secretData=‘I  am  the  guardian  of  a  secret   data’ I

    must follow whatever ‘secretData’ variable has in store <div  id=‘change-­‐me’>     {{secretData}}   </div> <div  id=‘change-­‐me’>     I  am  the  guardian  of  a  secret  data   </div>
  24. $scope.secretData=‘JakartaJS  will  be  held  at  Dec,   17th’ <div  id=‘change-­‐me’

     ng-­‐model=‘secretData’>     JakartaJS  will  be  held  at  Dec,  17th   </div>
  25. Features Highlight

  26. Bi-directional data binding

  27. LOL at the smiley face :)))))

  28. Directives custom HTML tags

  29. ng-­‐app   ng-­‐controller   ng-­‐repeat   ng-­‐model   ng-­‐class  

    ng-­‐if   ng-­‐click   ng-­‐include
  30. Build your own directives !

  31.    .directive('activeLink',  ['$location',  function(location)  {          return

     {              restrict:  'A',              link:  function(scope,  element,  attrs)  {   !                var  path  =  attrs.ngHref;   !                //hack  because  path  does  not  return  including  hashbang                  path  =  path.substring(1);                  if  (path  ===  '')  {  path  =  '/';  }   !                scope.location  =  location;                  scope.$watch('location.path()',  function(newPath)  {                      if  (path  ===  newPath)  {                          element.parent().addClass('active');                      }  else  {                          element.parent().removeClass('active');                      }                  });              }          };      }]); "only do DOM manipulation in a directive if and only if absolutely necessary” -a wise man
  32. Scopes context where the model is stored

  33. rootScope scope scope scope scope <html>     <head></head>  

      <body  ng-­‐app=“jakartajs”>       <div  ng-­‐controller=“first”>       </div>       <div  ng-­‐controller=“second”>         <tree  treeData=“data”>         <input  ng-­‐model=“name”>       </div>     </body>   </html>
  34. Dependency Injection

  35.    .directive('activeLink',  ['$location',  function(location)  {          return

     {              restrict:  'A',              link:  function(scope,  element,  attrs)  {   !                var  path  =  attrs.ngHref;   !                //hack  because  path  does  not  return  including  hashbang                  path  =  path.substring(1);                  if  (path  ===  '')  {  path  =  '/';  }   !                scope.location  =  location;                  scope.$watch('location.path()',  function(newPath)  {                      if  (path  ===  newPath)  {                          element.parent().addClass('active');                      }  else  {                          element.parent().removeClass('active');                      }                  });              }          };      }]);
  36. Other usual suspects..

  37. Support for RESTful resources

  38. User.get({id:  1})     .$then(function(response)  {       console.log(response)

        },  function(error)  {       console.log(error)     }); User.save({id:  1},  {first_name:  “Giovanni”})     .$then(function(response)  {       console.log(response)     },  function(error)  {       console.log(error)     }); query,  get,  new,  create,  edit,  update,  delete   7  default  action,  can  be  added  if  necessary
  39. Routing

  40.    .config(['$routeProvider',  function  ($routeProvider)  {          $routeProvider

                 .when('/',  {                  templateUrl:  'views/main.html',                  controller:  'MainCtrl'              })              .when('/databinding',  {                  templateUrl:  'views/databinding.html',                  controller:  'DatabindingCtrl'              })              .when('/directive',  {                  templateUrl:  'views/directive.html',                  controller:  'DirectiveCtrl'              })              .otherwise({                  redirectTo:  '/'              });      }]);
  41. Testability

  42. None
  43. Structuring your angular app

  44. npm  install  -­‐g  yo  grunt-­‐cli  bower   npm  install  -­‐g

     generator-­‐angular   yo  angular *assumming you have installed npm
  45. app/   node_modules/   test/   .bowerrc   .editorconfig  

    .gitattributes   .gitignore   .jshintrc   Gruntfile.js   bower.json   karma-­‐e2e.conf.js   karma.conf.js   package.json  
  46. app/     bower_components/     images/     scripts/

          configs/       controllers/       directives/       resources/       services/       app.js     styles/     views/     404.html     favicon.ico     index.html     robots.txt  
  47. test/     spec/       configs/    

      controllers/         main.js       directives/       resources/       services/   karma-­‐e2e.conf.js   karma.conf.js  
  48. Things to note / What’s next

  49. “AngularJS official documentation is poor” But the fault partly lies

    with us, the community. -a wise man
  50. “But, community support is overwhelming!” -random cockatoo

  51. None
  52. Nah.. I’m just kidding..

  53. We must remove the urge to write code imperatively. !

    e.g. jQuery usage should be replaced if possible by databinding and directive.
  54. authentication authorization

  55. Any API Server loosely-coupled

  56. 1. Authentication should be done remotely to receive ‘token’ !

    2. ‘token’ is sent in every request for authenticating our users ! 3. Authorization must be done both in API and your AngularJS app
  57. http://docs.angularjs.org/guide/concepts ! http://jimhoskins.com/2012/12/17/angularjs-and-apply.html ! http://www.sitepoint.com/kickstart-your-angularjs- development-with-yeoman-grunt-and-bower/ ! http://en.wikipedia.org/wiki/AngularJS References

  58. Thanks!! Okay, that’s all lads.. @giosakti - mightygio.com - starqle.com

  59. Question?