My notes from the book "Riding Rails with AngularJS by Ari Lerner".

1-introduction.md

Introduction

The book.

The author Ari Lerner is a Founder of FullStack. He also authored/co-authored:

• ng-book: The Complete Book on AngularJS
• The Rails 4 Way

He co-manages:

• defnewsletter.com
• ng-newsletter.com

Prerequisites:

• Basic knowledge of AngularJS
• Basic knowledge of Ruby on Rails

Organization:

• You will first set up a Rails application with authentication and authorization
• You will then walk through two approaches:
  • Build the Rails application in the traditional way
  • Build the Rails app as a back-end RESTful API and focus on building the AngularJS front end independently

Additional resources:

• AngularJS docs
• thinkster.io

Development environment

We'll be working in two different environments in the book:

1. The Rails environment
2. The AngularJS environment

Suggested editor: Sublime Text 3. I use Sublime Text 2.

Suggested browser: Google Chrome

To run the tests, we'll need the Karma library and nodejs.

For version control, non other than Git is suggested.

Steps:

• Install NodeJS
• Install Karma

$ npm install -g karma

• Install Ruby
• Install Rails

$ gem install rails

2-setting-up.md

Setting up our Rails app

In this chapter you walk through setting up your Rails app. Integrating with AngularJS is handled in subsequent chapters.

The app we will be creating is a Rails news feed reader app with sharing, called Shareup.

Topics covered:

• Creating a new Rails app
• Setting up our user model and authentication
• Setting up our sharing model
• Setting up a test harness for our Rails app
• Integrating Angular into the app and setting up sprockets
• Wiring up the interface
• Creating our API on the back end
• Setting up login with AngularJS

See the book for all the details.

Dive deeper into:

• Sqlite3
• Devise
  • Learning Devise for Rails
  • Hafiz Badrie Lubis
• Omniauth
• Bundler
• YAML

3-angular-rails-standard.md

Angular in the Rails asset pipeline

The first integration method uses the sprockets asset pipeline to deliver the Angular app. This ability comes baked into Rails already and so no special configuration is needed to support Angular.

Advantages of the approach:

• Zero configuration in Rails
• Rendering of the Angular app only to Rails-based authenticated users
• Rendering of custom data in the JavaScript files
• Choice of using either CoffeeScript or JavaScript without changing workflow
• Simultaneous Rails and Angular development

Inside of this approach, we'll do our work in the directories as follows:

• app/assets/ - Our custom JavaScript, stylesheets, images, etc
• lib/assets/ - Our libraries
• vendor/assets/ - Our assets that we're loading from other authors, such as Twitter Bootstrap and custom Angular libraries

In order to set up our app to deliver Angular apps, we can:

1. Download and embed the necessary JavaScripts in our vendor/assets/ directory, or
2. Use the Rails angularjs-rails gem, which is a thin wrapper around the Angular libraries.

TIP: Include the ngmin-rails gem to take care of running the pre-minifier for us.

Feel free to include Twitter's Bootstrap or the Zurb Foundation gem:

# For Twitter's Bootstrap
gem 'bootstrap-sass-rails'
# or for Zurb Foundation
gem 'zurb-foundation'

NOTE: If turbolinks is listed in your Gemfile, make sure you remove it. Turbolinks will affect the Angular app development, so it's just easier to not deal with the feature.

Building the share API

Bug: To get the application working as it was built up to this point you need to move the SharesController into app/controllers/api and rename it to Api::SharesController.

Bug: The create action is incorrect. See below for a working version:

def create
  # Not used
  # link = params[:url]

  share_params = { from_user_id: current_user.id, url: params[:url] }
  
  # No such method on User called find_by_name_or_email  
  # if to_user = User.find_by_name_or_email(params[:user])

  if to_user = User.where("name = :name OR email = :email", { name: params[:user], email: params[:user] }).first
    share_params[:to_user_id] = to_user.id
  else
    share_params[:to_email] = params[:user]
  end

  share = Share.create(share_params)
  render status: 200,
    json: {
      success: share.persisted?,
      share_id: share.id
    }
end