AngularJS Tips&Tricks

Technical talk about AngularJS @ Rubyslava #26
http://lanyrd.com/2013/rubyslava-march/scfdkd/

Transcript

1. AngularJS Tips&Tricks (with  a  bit  of  Rails) @petrbela #angularjs #rails #karma #jenkins #sugarjs #zeus #chucknorris
2. What? www.kdyjedes.cz  -­‐>  www.KJ.cz
3. Plan 1.  Rails  +  AngularJS 2.  TesEng  in  AngularJS 3.  AngularJS  Components 4.  Extras 5.  Q&A
4. 1.  Rails  +  AngularJS >  app      >  assets            >  javascripts                  >  controllers                  >  direcEves                  >  filters                  >  models                  >  services                  app.js Structure  your  client-­‐side  app  similarly  as  a  Rails  app. Declare  your  module  in  app.js  and  put  the  files  inside  dirs. Or  see  github.com/angular/angular-­‐seed  for  a  server-­‐less  setup.
5. 2.  How  we  test “A code that cannot be tested is flawed.” – Anonymous Thanks  to  Dependency  InjecEon,  tesEng  in  Angular  is  easy. Not  many  client-­‐side  JavaScript  libraries  can  say  that. You  should  be  thankful  and  do  it. “If you don’t like unit testing your product, most likely your customers won’t like to test it either.” - Anonymous
6. Testacular  Karma Spectacular  tesEng  framework A.  Unit  tesEng Test  runner  made  by  @vojtajina  from  Angular’s  core  team. Runs  Jasmine  (et  al.)  unit  tests  upon  each  file  save. h\ps://github.com/karma-­‐runner/karma
7. Testacular  Karma Spectacular  tesEng  framework B.  E2E  tesEng Karma  can  be  used  also  for  integraEon  tesEng.  Usage  is  similar to  Selenium,  with  async  calls  in  Angular  handled  automaEcally. h\p://docs.angularjs.org/guide/dev_guide.e2e-­‐tesEng
8. Jenkins  CI Cloudbees.com It’s  easy  to  setup  AngularJS  tesEng  env  on  a  CI  server. E.g.  Cloudbees  provides  a  ready-­‐made  environment  package  at h\ps://github.com/CloudBees-­‐community/angular-­‐js-­‐clickstart
9. 3.  Components  Modules  we  use angular.module('kdyjedes',   ['ngResource',  'rails',  'ui',   'ui.bootstrap']) >  app      >  assets            >  javascripts                  app.js You  can  load  exisEng  modules  (reusable  components)  inside  your applicaEon  by  declaring  them  in  the  module  constructor. Find  community-­‐submi\ed  modules  at  h\p://ngmodules.org/.
10. $resource  vs  railsResource angular.module('kdyjedes') .factory('Registrar',    ['railsResourceFactory',  (railsResourceFactory)  -­‐>      Registrar  =  railsResourceFactory({url:  '/registrars',  name:  'registrar'})      #  API  compaEbility  with  $resource-­‐based  service      Registrar.prototype.$save  =  (success)  -­‐>            this.create().then  (result)  -­‐>                  success(result)                  return  Registrar ]) $resource  is  a  wrapper  for  REST  API  calls  provided  by  Angular. railsResource  adds  Promises,  data  manipulaEon  and  interceptors. h\ps://github.com/tpodom/angularjs-­‐rails-­‐resource
11. DIY angular.module("myModule").factory  "socket",  ($rootScope)  -­‐>    socket  =  io.connect()    return  {        on:  (eventName,  callback)  -­‐>            socket.on  eventName,  -­‐>                args  =  arguments                $rootScope.$apply  -­‐>                    callback.apply(socket,  args)                emit:  (eventName,  data,  callback)  -­‐>            socket.emit  eventName,  data,  -­‐>                args  =  arguments                $rootScope.$apply  -­‐>                    callback.apply(socket,  args)    if  callback    } Use  $rootScope.$apply  block  to  automaEcally  run  Angular’s digesEng  cycle  that  updates  view  based  on  model  changes.
12. 4.  Extras
13. SugarJS JavaScript  on  steroids.  Safely  injects  convenient  methods into  naEve  JS  objects,  strings  and  arrays. h\p://sugarjs.com/ Like  Underscore,  just  be\er ['one','two','three'].first(); [1,65,2,77,34].average(); (5).daysAfter('Wednesday'); 'hello'.capitalize(); [[1], 2, [3]].flatten();
14. Zeus Run  an  always-­‐up  environment  to  instantly  start  console, server,  tests  or  rake  tasks. h\ps://github.com/burke/zeus Like  Spork,  just  be\er (Linux/Mac  only)
15. 5.  Q&A Thank  You! @petrbela @kdyjedes @getChute @StudenEve @StartupKidsCZSK
16. Credits 1Sock http://www.flickr.com/photos/64025277@N00/333979587/ alisdair http://www.flickr.com/photos/41143865@N00/135306281/