The document discusses AngularJS tips and tricks, including: 1. Organizing an AngularJS app similarly to a Rails app with directories for controllers, directives etc. 2. Using Testacular (Karma) for unit and end-to-end testing, and setting up continuous integration with Jenkins. 3. Including existing modules from the community in your app. 4. Additional topics like using SugarJS, Zeus, and real-time communication with websockets.

1. AngularJS
Tips&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
>
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.

5. 2.
How
we
test
“If you don’t like unit testing your product, most likely
your customers won’t like to test it either.” - Anonymous
“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.

6. 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.
hps://github.com/karma-­‐runner/karma

7. 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.
hp://docs.angularjs.org/guide/dev_guide.e2e-­‐tesEng

8. 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
hps://github.com/CloudBees-­‐community/angular-­‐js-­‐clickstart

9. 3.
Components
Modules
we
use
>
app
>
assets
>
javascripts
app.js
angular.module('kdyjedes',
['ngResource',
'rails',
'ui',
'ui.bootstrap'])
You
can
load
exisEng
modules
(reusable
components)
inside
your
applicaEon
by
declaring
them
in
the
module
constructor.
Find
community-­‐submied
modules
at
hp://ngmodules.org/.

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

12. 4.
Extras

13. SugarJS
Like
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
methods
into
naEve
JS
objects,
strings
and
arrays.
hp://sugarjs.com/

14. Zeus Like
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
@StartupKidsCZSK
Thank
You!

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