angularjs tips&tricks

Download AngularJS Tips&Tricks

Post on 21-Jun-2015




0 download

Embed Size (px)


A technical talk about AngularJS @ Rubyslava #26


  • 1. AngularJSTips&Tricks(with a bit of Rails)#angularjs #rails #karma #jenkins@petrbela#sugarjs #zeus#chucknorris

2. What? -> 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 > lters > models > services app.jsStructure your client-side app similarly as a Rails app.Declare your module in app.js and put the les inside dirs.Or see for a server-less setup. 5. 2. How we testIf you dont like unit testing your product, most likelyyour customers wont like to test it either. - AnonymousA code that cannot be tested is awed. 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 Angulars core team.Runs Jasmine (et al.) unit tests upon each le save.hps:// 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:// 8. Jenkins CI Cloudbees.comIts easy to setup AngularJS tesEng env on a CI server.E.g. Cloudbees provides a ready-made environment package athps:// 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:// 10. $resource vs railsResourceangular.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:// 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 AngularsdigesEng 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:// 14. ZeusLike Spork, just beer(Linux/Mac only)Run an always-up environment to instantly start console,server, tests or rake tasks.hps:// 15. 5. Q&A @petrbela @kdyjedes @getChute @StudenEve @StartupKidsCZSKThank You! 16. Credits 1Sock alisdair