Introduction

The book.

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

He co-manages:

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:

Development environment

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

The Rails environment
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

Raw

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:

Raw

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:

Download and embed the necessary JavaScripts in our vendor/assets/ directory, or
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

dwayne/1-introduction.md

Introduction

Development environment

Setting up our Rails app

Angular in the Rails asset pipeline

Building the share API