Transcript
Page 1: AngularJS Tips&Tricks

AngularJSTips&Tricks(with  a  bit  of  Rails)

@petrbela#angularjs #rails #karma #jenkins

#sugarjs #zeus #chucknorris

Page 2: AngularJS Tips&Tricks

What?

www.kdyjedes.cz  -­‐>  www.KJ.cz

Page 3: AngularJS Tips&Tricks

Plan 1.  Rails  +  AngularJS

2.  TesEng  in  AngularJS

3.  AngularJS  Components

4.  Extras

5.  Q&A

Page 4: AngularJS Tips&Tricks

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.

Page 5: AngularJS Tips&Tricks

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

Page 6: AngularJS Tips&Tricks

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

Page 7: AngularJS Tips&Tricks

Testacular  Karma Spectacular  tesEng  framework

B.  E2E  tesEng

Karma  can  be  used  also  for  integraEon  tesEng.  Usage  is  similarto  Selenium,  with  async  calls  in  Angular  handled  automaEcally.h\p://docs.angularjs.org/guide/dev_guide.e2e-­‐tesEng

Page 8: AngularJS Tips&Tricks

Jenkins  CICloudbees.com

It’s  easy  to  setup  AngularJS  tesEng  env  on  a  CI  server.E.g.  Cloudbees  provides  a  ready-­‐made  environment  package  ath\ps://github.com/CloudBees-­‐community/angular-­‐js-­‐clickstart

Page 9: AngularJS Tips&Tricks

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  yourapplicaEon  by  declaring  them  in  the  module  constructor.Find  community-­‐submi\ed  modules  at  h\p://ngmodules.org/.

Page 10: AngularJS Tips&Tricks

$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

Page 11: AngularJS Tips&Tricks

DIYangular.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.

Page 12: AngularJS Tips&Tricks

4.  Extras

Page 13: AngularJS Tips&Tricks

SugarJS

JavaScript  on  steroids.  Safely  injects  convenient  methodsinto  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();

Page 14: AngularJS Tips&Tricks

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)

Page 15: AngularJS Tips&Tricks

5.  Q&A

Thank  You!

@petrbela@kdyjedes@getChute@StudenEve@StartupKidsCZSK

Page 16: AngularJS Tips&Tricks

Credits

1Sock http://www.flickr.com/photos/64025277@N00/333979587/

alisdair http://www.flickr.com/photos/41143865@N00/135306281/


Top Related