Using Angular with Rails

Rangular developmentUsing angular with Rails

(for Single Page web apps)

Jamie Davidson

Pathgather // follow me : @jamiehdavidson

Thursday, June 20, 13

Traditional Rails request flow


/users/3navigates 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 requestsNever 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_filters and handle errors specific to API requests


Step 2: Define JSON View

‘Shell’ html views to handle html requests Often bypassed


json views to define returned json structureNever bypassed


+ RABL


app/views/users/show.html.haml app/views/users/show.json.rabl* Totally blank file. Seriously, it exists, but contains

nothing.Maybe there’s a better way???

https://github.com/nesquena/rabl

http://railscasts.com/episodes/322-rablRailscast:




http://railscasts.com/episodes/322-rabl

http://railscasts.com/episodes/322-rabl

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


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


https://github.com/mgonto/restangular




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/


http://www.cheatography.com/proloser/cheat-sheets/angularjs/


Angular Directives

horribly complicated


Highly technical documentationBut read, re-read, and re-re-read

absurdly powerfulRegister 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 boxng-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 lastshare 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 authenticationYou 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


http://www.yearofmoo.com/2012/11/angularjs-and-seo.html




Final Resources


Angular UIangular-ui.github.io

angular screencastsegghead.io

railscast

http://www.cheatography.com/proloser/cheat-sheets/angularjs/Cheat Sheet

https://github.com/jmcunningham/AngularJS-LearningGithub repo of learning resources

http://railscasts.com/episodes/405-angularjs




https://github.com/jmcunningham/AngularJS-Learning

https://github.com/jmcunningham/AngularJS-Learning



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



Technology

Using Angular with Rails