Rangular developmentUsing angular with Rails
(for Single Page web apps)
Jamie Davidson
Pathgather // follow me : @jamiehdavidson
Thursday, June 20, 13
Traditional Rails request flow
Pathgather // follow me : @jamiehdavidson
/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>
Thursday, June 20, 13
With Angular + Rails, this workflow is
usually bypassed....but not always
Thursday, June 20, 13
Step 1: Build an API
‘Shell’ controllers to handle html requests Often bypassed
Pathgather // follow me : @jamiehdavidson
api controllers to handle json requestsNever Bypassed
Thursday, June 20, 13
+Rails Code Structure
Startup Institute boston // follow me : @jamiehdavidson
Few Html requests = Few to none rails helpers
Thursday, June 20, 13
+ API vs HTMl Controller
Pathgather // follow me : @jamiehdavidson
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
Thursday, June 20, 13
Step 2: Define JSON View
‘Shell’ html views to handle html requests Often bypassed
Pathgather // follow me : @jamiehdavidson
json views to define returned json structureNever bypassed
Thursday, June 20, 13
+ RABL
Pathgather // follow me : @jamiehdavidson
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:
Thursday, June 20, 13
Step 3: Add angular
why angular over the others?
Pathgather // follow me : @jamiehdavidson
how does it change our normal rails-y javscript stucture?
Thursday, June 20, 13
+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
Thursday, June 20, 13
+ Angular App Specification
Restangular over $http or ng-resource (https://github.com/mgonto/restangular)
jst covered in a few
Thursday, June 20, 13
Step 3A: Angular Controllers
sends requests to your rails api,saves response to a scope variable
Pathgather // follow me : @jamiehdavidson
Don’t touch the dom!!! Don’t even query the dom
Creates listeners for changes made by user$watch is your friend
Thursday, June 20, 13
+ 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:
Thursday, June 20, 13
+ 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
Thursday, June 20, 13
pathgather // follow me : @jamiehdavidson
HTML
https://github.com/netzpirat/haml_coffee_assets
Haml can be used for angular templates
closing html tags
Thursday, June 20, 13
Angular SERVICES
SINGLETONS...VERY IMPORTANT!!
Pathgather // follow me : @jamiehdavidson
move global javascript functions/helpers to services
Can be used as ‘wrappers’ to other services/data
Thursday, June 20, 13
+ Service example: current user
let’s see some real code
Thursday, June 20, 13
Angular Filters
Simply used to format data
Pathgather // follow me : @jamiehdavidson
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/
Thursday, June 20, 13
Angular Directives
horribly complicated
Pathgather // follow me : @jamiehdavidson
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)
Thursday, June 20, 13
+Directives and jquery plugins
DON’t:
Text
/app/assets/javascripts/[some model].js.coffee
Minimal:
Thursday, June 20, 13
A note about jquery and angular
I find myself very hesitant to use jquery only plugins
Pathgather // follow me : @jamiehdavidson
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
Thursday, June 20, 13
+ 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?
Thursday, June 20, 13
+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
Thursday, June 20, 13
+ Angular + SEO
What a crawler sees What our user sees
Thursday, June 20, 13
+ 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
Thursday, June 20, 13
Final Resources
Pathgather // follow me : @jamiehdavidson
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
Thursday, June 20, 13
Oh, we’re hiring.
Pathgather // follow me : @jamiehdavidson
Thursday, June 20, 13
THANKS. FOR YOUR ATTENTION
Pathgather // follow me : @jamiehdavidson
Thursday, June 20, 13
Q&Atime for me to shutup and for you to talk
or i can tell you more about directives
Pathgather // follow me : @jamiehdavidson
Thursday, June 20, 13