angularjs tips&tricks

Download AngularJS Tips&Tricks

Post on 21-Jun-2015

2.494 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

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

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 > 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 github.com/angular/angular-seed 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://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.comIts 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 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://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 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://sugarjs.com/ 14. ZeusLike 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 @StartupKidsCZSKThank You! 16. Credits 1Sock http://www.ickr.com/photos/64025277@N00/333979587/ alisdair http://www.ickr.com/photos/41143865@N00/135306281/