AngularJS Tips&Tricks - Speaker Deck

Slide 1

Slide 1 text

AngularJS Tips&Tricks (with a bit of Rails) @petrbela #angularjs #rails #karma #jenkins #sugarjs #zeus #chucknorris

Slide 2

Slide 2 text

What? www.kdyjedes.cz -‐> www.KJ.cz

Slide 3

Slide 3 text

Plan 1. Rails + AngularJS 2. TesEng in AngularJS 3. AngularJS Components 4. Extras 5. Q&A

Slide 4

Slide 4 text

1. Rails + AngularJS > app > assets > javascripts > controllers > direcEves > ﬁlters > models > services app.js Structure 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.

Slide 5

Slide 5 text

2. How we test “A code that cannot be tested is ﬂawed.” – 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

Slide 6

Slide 6 text

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 ﬁle save. h\ps://github.com/karma-‐runner/karma

Slide 7

Slide 7 text

Testacular Karma Spectacular tesEng framework B. E2E tesEng Karma can be used also for integraEon tesEng. Usage is similar to Selenium, with async calls in Angular handled automaEcally. h\p://docs.angularjs.org/guide/dev_guide.e2e-‐tesEng

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

$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

Slide 11

Slide 11 text

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’s digesEng cycle that updates view based on model changes.

Slide 12

Slide 12 text

4. Extras

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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)

Slide 15

Slide 15 text

5. Q&A Thank You! @petrbela @kdyjedes @getChute @StudenEve @StartupKidsCZSK

Slide 16

Slide 16 text

Credits 1Sock http://www.ﬂickr.com/photos/64025277@N00/333979587/ alisdair http://www.ﬂickr.com/photos/41143865@N00/135306281/