Using Angular with Rails

Rangular development
Using angular with Rails
(for Single Page web apps)
Jamie Davidson
Pathgather // follow me : @jamiehdavidson
Thursday, June 20, 13

Traditional Rails request flow
/users/3
navigates to
✓ Is route defined in routes.rb?
resources :users
- Ensure it’s an HTML request
- Run before_filters, authenticate user
- fetch the user, store in instance variable
application.html.erb/.haml
show.html.erb/.haml
<h1><%= @user.name %></h1>

With Angular + Rails,
this workflow is
usually bypassed....but
not always

Step 1: Build an API
‘Shell’ controllers to handle html requests
Often bypassed
api controllers to handle json requests
Never Bypassed

+Rails Code Structure
Startup Institute boston // follow me : @jamiehdavidson
Few Html requests = Few to
none rails helpers

+API vs HTMl Controller
app/controllers/users_controller.rb app/controllers/api/v1/users_controller.rb
* Only exists to accept full HTML requests to /users/:id.
Often bypassed
* Separate base controller allows us to specify before_ﬁlters
and handle errors speciﬁc to API requests

Step 2: Define JSON View
‘Shell’ html views to handle html requests
Often bypassed
json views to define returned json structure
Never bypassed

+ RABL
app/views/users/show.html.haml app/views/users/show.json.rabl
* Totally blank ﬁle. Seriously, it exists, but contains
nothing.
Maybe there’s a better way???
https://github.com/nesquena/rabl
http://railscasts.com/episodes/322-rabl
Railscast:

Step 3: Add angular
why angular over the others?
how does it change our normal rails-y javscript stucture?

+Angular Code Structure
No more users.js.coffee,
products.js.coffee, etc, with random
jquery selectors
Extra resources:
- http://briantford.com/blog/
huuuuuge-angular-apps.html
- http://cliffmeyers.com/blog/
2013/4/21/code-organization-
angularjs-javascript

+ Angular App Specification
Restangular over $http or ng-
resource (https://github.com/
mgonto/restangular)
jst covered in a few

Step 3A: Angular Controllers
sends requests to your rails api,
saves response to a scope variable
Don’t touch the dom!!!
Don’t even query the dom
Creates listeners for changes made by user
$watch is your friend

+ Angular Controller + View
app/assets/javascripts/my_app/controllers/user.js.coffee app/assets/javascripts/templates/users/show.hamlc
Note: I don’t like this. USer sees a blank template before
seeing the actual user data
Instead, query for your data before the template
loads. leads to a smoother transition between views:

+Handling HTTP ERRORS
No ugly red error pages by default anymore
Need to ‘intercept’ api errors and render an error
page
reuse those ugly red pages
What happens when the user makes an api request for data that doesn’t exist or data they
aren’t allowed to view?
yourapp.js.coffee

pathgather // follow me : @jamiehdavidson
HTML
https://github.com/netzpirat/haml_coffee_assets
Haml can be used for angular templates
closing html tags

Angular SERVICES
SINGLETONS...VERY IMPORTANT!!
move global javascript functions/helpers to services
Can be used as ‘wrappers’ to other services/data

+ Service example: current user
let’s see some real code

Angular Filters
Simply used to format data
if you need to format data by rendering/manipulating
html, use a directive
Angular ships with many predefined filters:
- formatting dates and currency
- searching within an array (see angular docs)
- http://www.cheatography.com/proloser/cheat-sheets/angularjs/

Angular Directives
horribly complicated
Highly technical documentation
But read, re-read, and re-re-read
absurdly powerful
Register behavior, transform the DOM, create reusable widgets, etc
Unfortunately, i could spend this entire talk on
directives, and you’d probably just leave confused
Angular ships with many out of the box
ng-repeat, ng-cloak, ng-view, ng-*
(Create your own prefix. Don’t use ng)

+Directives and jquery plugins
DON’t:
Text
/app/assets/javascripts/[some model].js.coffee
Minimal:

A note about jquery and angular
I find myself very hesitant to use jquery only plugins
when starting out with angular, don’t include jquery
‘Roll your own’ first, jquery plugin last
share your directives on github. sharing is caring!!
set a maximum number (single digits) of jquery-only
plugins you’ll use

+User Authentication/Authorization
Server side authentication doesn’t change (beyond
API authentication), but you can’t do this anymore!!
So how do we alter the view to dynamically
display html based on who the current user is?

+Angular + Rails user authentication
You can send AJAX requests, do full page loads, or....
Current user service + directives
But Wait, this is javascript. won’t some average hacker be able to
disguise themselves as another user?
Yep. But we’re good little rails developers, so we have server-side checks (devise, cancan, etc) to ensure the
logged-in user can actually access/modify the data.
they can make themselves look like the current user On the client...but they can’t act like them

+ Angular + SEO
What a crawler sees What our user sees

+ Angular + SEO
Manual lifting required
You have to build a pre-rendered version and render that
to the crawler only
Stay Tuned for crawler improvements and js-heavy/one
page apps
Resources:
- http://www.yearofmoo.com/2012/11/angularjs-and-
seo.html
- https://developers.google.com/webmasters/ajax-
crawling

Final Resources
Angular UI
angular-ui.github.io
angular screencasts
egghead.io
railscast
http://www.cheatography.com/proloser/cheat-sheets/angularjs/
Cheat Sheet
https://github.com/jmcunningham/AngularJS-Learning
Github repo of learning resources
http://railscasts.com/episodes/405-angularjs

Oh, we’re
hiring.

THANKS.FOR YOUR ATTENTION

Q&Atime for me to shutup and for you to talk
or i can tell you more about directives

Using Angular with Rails

More Related Content

What's hot

Similar to Using Angular with Rails

Recently uploaded

Using Angular with Rails