angularjs tips&tricks
Post on 21-Jun-2015
2.519 Views
Preview:
DESCRIPTION
TRANSCRIPT
AngularJSTips&Tricks(with a bit of Rails)
@petrbela#angularjs #rails #karma #jenkins
#sugarjs #zeus #chucknorris
What?
www.kdyjedes.cz -‐> www.KJ.cz
Plan 1. Rails + AngularJS
2. TesEng in AngularJS
3. AngularJS Components
4. Extras
5. Q&A
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.
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
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
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
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
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/.
$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
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.
4. Extras
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();
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)
5. Q&A
Thank You!
@petrbela@kdyjedes@getChute@StudenEve@StartupKidsCZSK
Credits
1Sock http://www.flickr.com/photos/64025277@N00/333979587/
alisdair http://www.flickr.com/photos/41143865@N00/135306281/
top related