1 / 35

Rails and AngularJS

Rails and AngularJS. Building the Assay Pipeline http://assaypipeline.com Sean Carroll / Alain Mir. Assay. A laboratory test used in Disease diagnosis DNA matching Drug testing Assay Design is a complex, iterative process Scientists use an array of FOSS tools

yardley-pittman
Download Presentation

Rails and AngularJS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Rails and AngularJS Building the Assay Pipeline http://assaypipeline.com Sean Carroll / Alain Mir

  2. Assay • A laboratory test used in • Disease diagnosis • DNA matching • Drug testing • Assay Design is a complex, iterative process • Scientists use an array of FOSS tools • Commercial products now appearing

  3. Assay An assay is an investigative (analytic) procedure in laboratory medicine, pharmacology, environmental biology, continuous delivery, and molecular biology for qualitatively assessing or quantitatively measuring the presence or amount or the functional activity of a target entity (the analyte). - Wikipedia

  4. Project Background “Do you know about databases” ? What does it do ? Cancer tumor database ~ 1.2m entries Large datasets Application built as a Rails 3.2 application

  5. Demo Application Demo

  6. UX Components AngularJS Restangular Bootstrap (CSS only) UI Bootstrap (js) UI Select 2 UI Sortable Xeditable

  7. Why Angular Immersive Experience Organize the JavaScript and Rails Helper spaghetti Lots of Ajax functionality Clear separation between the view and model It’s new-ish and cool It’s the most popular JS framework today

  8. Challenges • Learning curve!! • Angular • Javascript • Promises ! • Changing technologies 1 -> 1.2 • Version 2 of Angular quite different • Building two distinct applications

  9. Architecture Rails Model Angular Routes Rails Controller Angular Controller / Model Rails API JSON / HTTP Rails Serializer Rails Routes HTML Templates

  10. Why keep Rails • Why not go with a full stack Javascript solution? • Gems • Framework Stability • What I already knew • This application doesn’t need the real-time push of Meteor.js

  11. How to Integrate Angular • Option 1: Completely separate applications • Build the front end with Grunt • Can still live in the same Github repo • Option 2: Server Angular with the Asset Pipeline • Definitely easier • Need LiveReload to keep assets up to date (including Angular.js application code) • Can continue to use Rails ERB views for some parts of the application

  12. Rails and Angular Turn off Turbolinks Turn off / replace JavascriptMangling Create a API for Rails – Angular communication Create Angular “View-Controllers” Create Angular Routing Create Angular HTML pages

  13. Gemfile gem 'angularjs-rails','~> 1.2.6’ gem 'ngannotate-rails'

  14. layouts/application.html.erb Bootstrap the Angular application <body ng-app="assaypipelineApp"> <%= yield %> </body>

  15. layouts/application.js //= require angular //= require angular-resource //= require angular-route //= require lib/restangular.min //= require assaypipelineApp //= require_tree .

  16. layouts/application.js //= require angular //= require angular-resource //= require angular-route //= require lib/restangular.min //= require assaypipelineApp //= require_tree .

  17. javascripts/assaypipelineApp.js varassaypipelineApp = angular.module('assaypipelineApp', [ 'ngRoute', 'ngResource', 'ui.sortable', 'ui.bootstrap', 'angularFileUpload', 'ui.select2', 'restangular', 'xeditable' ]);

  18. javascripts/assaypipelineApp.js assaypipelineApp.config([ '$httpProvider', function ($httpProvider) { varauthToken; authToken = $('meta[name="csrf-token"]').attr('content'); $httpProvider.defaults.headers.common['X-CSRF-TOKEN'] = authToken; } ]);

  19. Add a Rails API

  20. Rails API class Api::BaseController < ApplicationController before_filter :authenticate_user! private defpermission_denied render json: {error: 'unauthorized'}, status: :unauthorized end end

  21. class Api::UsersController < Api::BaseController before_filter :verify_is_admin def index renderjson: User.order(:id).all, root: false end def show renderjson: user, root: false end defcreate user = User.create!(safe_params) renderjson: user, root: false end def update user.update_attributes(safe_params) head :no_content end

  22. def destroy user.destroy render nothing: true end private defverify_is_admin (current_user.nil?) ? redirect_to(root_path) : (redirect_to(root_path) unless current_user.admin?) end def user @user ||= User.find(params[:id]) end defsafe_params params.permit(:id, :title, :first_name, :last_name, :name, :email, :job_title, :organisation, :approved, :admin) end end

  23. Rails Routes namespace :api, defaults: {format: :json} do devise_scope :user do resource :session, only: [:create, :destroy] resource :registrations end

  24. Rails Routes $ rake routes api_usersGET api/users#index {:format=>:json} POST api/users#create {:format=>:json} new_api_user GET api/users#new {:format=>:json} edit_api_user GET api/users#edit {:format=>:json} ....etc

  25. Rails Serializer Serializers/users_serializer.rb class UserSerializer < ActiveModel::Serializer attributes :id, :title, :first_name, :last_name, :email, :approved, :admin end

  26. Angular Routes Javascripts/assaypipelineApp.js $routeProvider.when('/design', { templateUrl: '/templates/design/design.html', controller: 'DesignViewCtrl' }); $routeProvider.when('/batches/:panel_id', { templateUrl: '/templates/panel/panel.html', controller: 'PanelController' }); $routeProvider.when('/datasets', { templateUrl: '/templates/datasets/datasets.html', controller: 'DatasetsController' });

  27. Angular“ViewController” angular.module('assaypipelineApp').controller("PanelsViewCtrl", ['$http', '$scope', '$routeParams', '$location', 'Batch', function($http, $scope, $routeParams, $location, Batch) { // Initialize by loading panels Batch.index().$promise.then(function(batches) { $scope.panels = batches; }, reportError("loading panels"));

  28. Angular Model $scope.panels = batches; Fields defined in Rails controller / serializer def index data = panels.as_json(methods: :user_name, only [:id, :name, :description… render json: data, root: false end

  29. Rails -> Angular JSON

  30. More complex Angular models $scope.selector = { selectedGene: '', selectedExons: [], exons: [], regionChrom: '', regionStart: '', regionEnd: '', configVisible: false, paneldata: { batch_type: 'singleplex', primer_runs: 20 tiling_sequence: '', min_primer_tm: 60,

  31. panels.html <span ng-if="panel.public_panel == true"> <span class="label label-primary">Public</span> </span> <button class="btnbtn-info btn-xs" ng-click="duplicatePanel(panel)”type="button"> Copy </button> <a href="/batches/{{panel.id}}">{{panel.name}} - {{panel.id}} </a><br/> <span>{{panel.description}}</span><br/> <small>Updated {{panel.updated_at}}</small>

  32. Angular < = > Rails • $http • Lowest level • Construct urls manually • Similar to jQuery / AJAX • $resource • Angular wrapper around $http • Gives the basic REST verbs for free • Usually factor out into a service • Restangular • Easiest by far • Handles nesting • Overkill for non-REST fall back to http for non-restful

  33. $http function getAssemblies() { $http({ method: 'GET', url: '/api/assemblies/' }).success(function(data) { console.log(data); $scope.availableAssemblies = data; }) };

  34. Restangular // Restangular returns promises Restangular.all('users').getList() // GET: /users .then(function(users) { // returns a list of users $scope.user = users[0]; // first Restangularobj in list: { id: 123 } }) // Restangular objects are self-aware and know how to make their own RESTful requests $scope.user.getList('cars'); // GET: /users/123/cars // You can also use your own custom methods on Restangular objects $scope.user.sendMessage(); // POST: /users/123/sendMessage // Chain methods together to easily build complex requests $scope.user.one('messages', 123).one('from', 123).getList('unread'); // GET: /user/123/messages/123/from/123/unread

  35. Resources Riding Rails with AngularJS http://www.fullstack.io/edu/angular/rails/ AngularJSRails http://www.angularails.com/ egghead.io

More Related