Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS Tips&Tricks

2,461
views

Published on

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

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

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,461
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AngularJSTips&Tricks(with  a  bit  of  Rails)#angularjs #rails #karma #jenkins @petrbela#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.jsStructure  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“If you don’t like unit testing your product, most likely your customers won’t like to test it either.” -  Anonymous “A code that cannot be tested is flawed.” – AnonymousThanks  to  Dependency  InjecEon,  tesEng  in  Angular  is  easy.Not  many  client-­‐side  JavaScript  libraries  can  say  that.You  should  be  thankful  and  do  it.
  • 6. Testacular  Karma Spectacular  tesEng  frameworkA.  Unit  tesEngTest  runner  made  by  @vojtajina  from  Angular’s  core  team.Runs  Jasmine  (et  al.)  unit  tests  upon  each  file  save.hps://github.com/karma-­‐runner/karma
  • 7. Testacular  Karma Spectacular  tesEng  framework B.  E2E  tesEngKarma  can  be  used  also  for  integraEon  tesEng.  Usage  is  similarto  Selenium,  with  async  calls  in  Angular  handled  automaEcally.hp://docs.angularjs.org/guide/dev_guide.e2e-­‐tesEng
  • 8. Jenkins  CI Cloudbees.comIt’s  easy  to  setup  AngularJS  tesEng  env  on  a  CI  server.E.g.  Cloudbees  provides  a  ready-­‐made  environment  package  athps://github.com/CloudBees-­‐community/angular-­‐js-­‐clickstart
  • 9. 3.  Components  Modules  we  use>  app      >  assets            >  javascripts                  app.jsangular.module(kdyjedes,  [ngResource,  rails,  ui,  ui.bootstrap])You  can  load  exisEng  modules  (reusable  components)  inside  yourapplicaEon  by  declaring  them  in  the  module  constructor.Find  community-­‐submied  modules  at  hp://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.hps://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’sdigesEng  cycle  that  updates  view  based  on  model  changes.
  • 12. 4.  Extras
  • 13. SugarJSLike  Underscore,  just  beer [one,two,three].first(); [1,65,2,77,34].average(); (5).daysAfter(Wednesday); hello.capitalize(); [[1], 2, [3]].flatten();JavaScript  on  steroids.  Safely  injects  convenient  methodsinto  naEve  JS  objects,  strings  and  arrays.hp://sugarjs.com/
  • 14. Zeus Like  Spork,  just  beer (Linux/Mac  only)Run  an  always-­‐up  environment  to  instantly  start  console,server,  tests  or  rake  tasks.hps://github.com/burke/zeus
  • 15. 5.  Q&A @petrbela @kdyjedes @getChute @StudenEve @StartupKidsCZSK Thank  You!
  • 16. Credits 1Sock http://www.flickr.com/photos/64025277@N00/333979587/ alisdair http://www.flickr.com/photos/41143865@N00/135306281/