Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Angular with Rails


Published on

A presentation I gave at a Boston Rails Meetup, on using Angular and Rails

Published in: Technology

Using Angular with Rails

  1. 1. Rangular developmentUsing angular with Rails(for Single Page web apps)Jamie DavidsonPathgather // follow me : @jamiehdavidsonThursday, June 20, 13
  2. 2. Traditional Rails request flowPathgather // 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 variableapplication.html.erb/.hamlshow.html.erb/.haml<h1><%= %></h1>Thursday, June 20, 13
  3. 3. With Angular + Rails,this workflow isusually bypassed....butnot alwaysThursday, June 20, 13
  4. 4. Step 1: Build an API‘Shell’ controllers to handle html requestsOften bypassedPathgather // follow me : @jamiehdavidsonapi controllers to handle json requestsNever BypassedThursday, June 20, 13
  5. 5. +Rails Code StructureStartup Institute boston // follow me : @jamiehdavidsonFew Html requests = Few tonone rails helpersThursday, June 20, 13
  6. 6. +API vs HTMl ControllerPathgather // follow me : @jamiehdavidsonapp/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_filtersand handle errors specific to API requestsThursday, June 20, 13
  7. 7. Step 2: Define JSON View‘Shell’ html views to handle html requestsOften bypassedPathgather // follow me : @jamiehdavidsonjson views to define returned json structureNever bypassedThursday, June 20, 13
  8. 8. + RABLPathgather // follow me : @jamiehdavidsonapp/views/users/show.html.haml app/views/users/show.json.rabl* Totally blank file. Seriously, it exists, but containsnothing.Maybe there’s a better way???, June 20, 13
  9. 9. Step 3: Add angularwhy angular over the others?Pathgather // follow me : @jamiehdavidsonhow does it change our normal rails-y javscript stucture?Thursday, June 20, 13
  10. 10. +Angular Code StructureNo more,, etc, with randomjquery selectorsExtra resources:-, June 20, 13
  11. 11. + Angular App SpecificationRestangular over $http or ng-resource ( covered in a fewThursday, June 20, 13
  12. 12. Step 3A: Angular Controllerssends requests to your rails api,saves response to a scope variablePathgather // follow me : @jamiehdavidsonDon’t touch the dom!!!Don’t even query the domCreates listeners for changes made by user$watch is your friendThursday, June 20, 13
  13. 13. + Angular Controller + Viewapp/assets/javascripts/my_app/controllers/ app/assets/javascripts/templates/users/show.hamlcNote: I don’t like this. USer sees a blank template beforeseeing the actual user dataInstead, query for your data before the templateloads. leads to a smoother transition between views:Thursday, June 20, 13
  14. 14. +Handling HTTP ERRORSNo ugly red error pages by default anymoreNeed to ‘intercept’ api errors and render an errorpagereuse those ugly red pagesWhat happens when the user makes an api request for data that doesn’t exist or data theyaren’t allowed to view?yourapp.js.coffeeThursday, June 20, 13
  15. 15. pathgather // follow me : @jamiehdavidsonHTML can be used for angular templatesclosing html tagsThursday, June 20, 13
  16. 16. Angular SERVICESSINGLETONS...VERY IMPORTANT!!Pathgather // follow me : @jamiehdavidsonmove global javascript functions/helpers to servicesCan be used as ‘wrappers’ to other services/dataThursday, June 20, 13
  17. 17. + Service example: current userlet’s see some real codeThursday, June 20, 13
  18. 18. Angular FiltersSimply used to format dataPathgather // follow me : @jamiehdavidsonif you need to format data by rendering/manipulatinghtml, use a directiveAngular ships with many predefined filters:- formatting dates and currency- searching within an array (see angular docs)-, June 20, 13
  19. 19. Angular Directiveshorribly complicatedPathgather // follow me : @jamiehdavidsonHighly technical documentationBut read, re-read, and re-re-readabsurdly powerfulRegister behavior, transform the DOM, create reusable widgets, etcUnfortunately, i could spend this entire talk ondirectives, and you’d probably just leave confusedAngular 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
  20. 20. +Directives and jquery pluginsDON’t:Text/app/assets/javascripts/[some model].js.coffeeMinimal:Thursday, June 20, 13
  21. 21. A note about jquery and angularI find myself very hesitant to use jquery only pluginsPathgather // follow me : @jamiehdavidsonwhen 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-onlyplugins you’ll useThursday, June 20, 13
  22. 22. +User Authentication/AuthorizationServer side authentication doesn’t change (beyondAPI authentication), but you can’t do this anymore!!So how do we alter the view to dynamicallydisplay html based on who the current user is?Thursday, June 20, 13
  23. 23. +Angular + Rails user authenticationYou can send AJAX requests, do full page loads, or....Current user service + directivesBut Wait, this is javascript. won’t some average hacker be able todisguise themselves as another user?Yep. But we’re good little rails developers, so we have server-side checks (devise, cancan, etc) to ensure thelogged-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 themThursday, June 20, 13
  24. 24. + Angular + SEOWhat a crawler sees What our user seesThursday, June 20, 13
  25. 25. + Angular + SEOManual lifting requiredYou have to build a pre-rendered version and render thatto the crawler onlyStay Tuned for crawler improvements and js-heavy/onepage appsResources:-, June 20, 13
  26. 26. Final ResourcesPathgather // follow me : @jamiehdavidsonAngular UIangular-ui.github.ioangular screencastsegghead.iorailscast Sheet repo of learning resources, June 20, 13
  27. 27. Oh, we’rehiring.Pathgather // follow me : @jamiehdavidsonThursday, June 20, 13
  28. 28. THANKS.FOR YOUR ATTENTIONPathgather // follow me : @jamiehdavidsonThursday, June 20, 13
  29. 29. Q&Atime for me to shutup and for you to talkor i can tell you more about directivesPathgather // follow me : @jamiehdavidsonThursday, June 20, 13