Rails and Ionic Make Love Flashcards
(40 cards)
Setup Project
$mkdir blog_app_project
$cd blog_app_project
Setup Basic Rails App
$rails new BlogApp $cd BlogApp $mv BlogApp web $bundle install $rails g scaffold BlogEntries title:string content:text $rake db:migrate
Active Model Serializers: use the AMS gem when building RESTful API’s in Rails
blog_entry_seriailizer.rb
#/web/app/serializers/blog_entry_seriailizer.rb class BlogEntrySerializer
Active Model Serializers
active_model_serializer.rb
Ionic uses Angular,by default receive data w/o root node. Need to disable the root node in the JSON output.
#/web/config/initializers/active_model_serializer.rb ActiveSupport.on_load(:active_model_serializers) do # Disable for all serializers (except ArraySerializer) ActiveModel::Serializer.root = false # Disable for ArraySerializer ActiveModel::ArraySerializer.root = false end
Test the Rails JSON API
$rails s
localhost: 3000/blog_entries/new
localhost: 3000/blog_entries.json
Setup Rack Cors
Installin Gem #/web/Gemfile
gem ‘rack-cors’, :require => ‘rack/cors’
Setup Rack Cors
Configuring the middleware #/web/config/application.rb
config.middleware.insert_before 0, “Rack::Cors” do
allow do
origins ‘’
resource ‘’, :headers => :any, :methods => [:get, :put, :delete, :post, :options]
end
end
Create The Ionic App ionic start ionic_blog_app tabs
mv ionic_app mobile
- blog_app_project
- web
- … rails app
- mobile
- … ionic app
Angular $resource
Ionic and RESTful resources we tend to use the Angular $resource service.
Angular $resourceAnd inject ngResource into your app module:
/ /mobile/www/js/app.js /
angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.services’, ‘ngResource’])
add the BlogEntry factory Note: for production apps we wouldn't hardcode these URL's, but rather have a module that determines whether to fire requests to the production, staging or the local environment.
/ /mobile/www/js/services/js /
.factory(‘BlogEntry’, function($resource) {
return $resource(“http://localhost:3000/blog_entries/:id.json”);
})
Update Ionic Controller and Route
pull our blog entries JSON from the Rails app and display it in the Ionic app
first ‘Status’ tab. This Status tab is named as the DashCtrl and tab-dash.html t
/ /mobile/www/js/controllers.js: /
.controller(‘DashCtrl’, function($scope, BlogEntry) {
BlogEntry.query().$promise.then(function(response){
$scope.blog_entries = response;
}); })
Injecting the BlogEntry factory into the DashCtrl.
Query the BlogEntry service, returns an Angular $promise as the asynchronous toRails app.
Rails app responds and this promise is resolvedreturned collection to $scope.blog_entries and available to our view.
blog_entries con the scope, can interate over the collection in tab-dash.html.
/ /mobile/www/templates/tab-dash.html /
<div class="list card">
<div class="item item-divider">{{blog_entry.title}}</div>
<div class="item item-body">
<div> {{blog_entry.content}} </div>
</div>
</div>
Install Devise in your Rails App
$rake db:migrate
gem ‘devise’
$bundle install
$rails generate devise:install
$rails generate devise User
Changes to Devise
# web/config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }Adding our custom Devise controllers to the routes.
# web/app/config/routes.rb:
devise_for :users, :controllers => {sessions: 'user/sessions', registrations: 'user/registrations', passwords: 'user/passwords' }Create the three new controllers to handle JSON in Devise
Sessions Controller
# web/app/controllers/user/sessions_controller.rb class User::SessionsController
Create the three new controllers to handle JSON in Devise
Registrations Controller
# web/app/controllers/user/registrations_controller.rb class User::RegistrationsController
Create the three new controllers to handle JSON in Devise
Password Controller
# web/app/controllers/user/passwords_controller.rb class User::PasswordsController
Authentication across Rails & Ionic.
Disable CSRF protection
# /web/app/controllers/application_controller.rb # protect_from_forgery with: :exception
Create a new user
$bundle exec rails s -p 3000
locahost:3000/users/sign_up
Implementing Devise login in Ionic
Hook up Ionic to login through the Devise JSON controller we just added.
Four things to make all of this work on the Ionic end: -A UserSession factory, to abstract away some of our API implementation
- A login form
- A login controller
- A login route
Define this UserSession factory in services.js
// /mobile/www/js/services.js:
.factory('UserSession', function($resource) {
return $resource("http://localhost:3000/users/sign_in.json");
})Creating the login form template
- binding a data object, with the attributes password and email, onto our $scope
- assign an ng-click directive to our Login button, call the login() in controller.
<div>
<span>Email</span>
<span>Password</span>
</div>
<div class="padding"> Login </div>
