Angular on Rails

Hello there! Today we’re going to set up a Rails application that uses Angular to serve the front end. Additionally, we’ll walk through testing of both the back-end and the front-end.

Technology

We will use a number of technologies to accomplish our goal

Rails (ruby) - The back-end

RSpec (ruby) - The back-end testing framework

capybara & selenium (ruby) - The end to end browser tests

Jasmine (javascript) - The front-end testing framework

Bower - The front end package manager (similar to bundler)

Twitter Bootstrap - The css styling framework

What we are building

We will build a very simple CRUD application that will demonstrate:

1. How to render JSON in the Rails Controller
2. How to test Rails Controllers
3. How to use Bower to pull in front-end dependencies (such as Angular and Bootrap)
4. How to add those front-end dependencies to the Rails Asset pipeline
5. Testing the whole application from front to back
6. POSTing, PUTing, GETing and DELETEing in an Angular app

Let’s get started!

create the application using postgresql as our database and removing minitest in favor of RSpec
$ rails new learn-angular -d=postgresql -T
$ cd learn-angular

### Add testing dependencies Open up Gemfile and do the following:
Remove:

gem 'turbolinks'

Add:

group :test, :development do
	gem 'rspec-rails'
	gem 'capybara'
	gem 'database_cleaner'
	gem 'selenium-webdriver'
end

And then:
$ bundle

Create your DBs

$ rake db:create db:migrate

### Setting up Bower for front-end package management We’re going to use a gem bower-rails to set up bower in our application. It provides a very nice way to manage dependencies that is very similar to a Gemfile.

Go back to your Gemfile and add:

gem 'bower-rails'

$ bundle

Now we need to install Bower so that we can add Angular and Bootstrap
$ touch Bowerfile
Open Bowerfile and add:

asset 'angular'
asset 'bootstrap-sass-official'

$ rake bower:install

We now need to make sure that these new files get picked up by the Rails Asset Pipeline

To do so, open up config/application.rb
We’re going to add the bower folders to the assets path. We’re also going to make sure that the fonts from Bootstrap get precompiled.

Inside of:

class Application < Rails::Application


end

add

config.assets.paths << Rails.root.join("vendor", "assets", "bower_components")
config.assets.paths << Rails.root.join("vendor", "assets", "bower_components", "bootstrap-sass-official", "assets", "fonts")

config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff|woff2)$)

We now need to load these dependencies in our app/assets/javascripts/application.js and app/assets/css/application.css.scss files.

Open up application.js.

remove:

//= require turbolinks

add:

//= require angular/angular

Open application.css.scss and add:

@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";

### Making sure all of the pieces are working

Let’s make sure the app is working and configured properly.

In config/routes.rb, add:

root 'home#index'

Next, create the HomeController in app/controllers/home_controller.rb and add the following code to it:

class HomeController < ApplicationController
  def index
  end
end

Next, we’re going to create our Angular app. Create app/assets/javascripts/angular/app.js and add the following code to it:

app = angular.module('app', []);

Create the view, in app/views/home/index.html and place in the following:

<h1 ng-if="name">Hello, </h1>
<form>
	<input type="text" ng-class="name">
</form>

Run the server:
$ rails s

Visit localhost:3000 and voila! Angular two-way binding should be working now.

That’s it for part 1. Next, we’ll work on test driving the application to CRUD some objects.