Rails with AngularJS: Frontend Setup

Previously, we have setup basic configuration as a starting point of our rails app. If you haven't read it yet, you can find it here "Rails with AngularJS:Beginning"

We are going to build our front-end first, In the form an AngularJS app. Normally I do build backend first in the pre-angular era. But, recently I notice a shift in my workflow. I will explain the reasons why this became my preference as this tutorial goes on.

Setup Bower

And we are also going to manage our front-end assets with Bower. I find bower packages are more updated compare to their gems counterparts. Installing Bower need a little bit of NodeJS. On Mac, using Homebrew run this in the terminal.

$> brew install node

With node installed in your computer. Install Bower with the node package manager or npm.

$> npm install bower

We should not stop there, we need a gem to integrate bower with rails. Thus, we will add gem bower-rails to our Gemfile. And don't forget to 'bundle install'

We can now declare our assets. To do this we need to create a Bowerfile in the root of our project. Bowerfile acts pretty much the same as Gemfile, the main difference is that it'll fetch bower-assets rather than ruby-gems.

Your Bowerfile should look something like this:

1 asset 'angular'
2 asset 'bootstrap-sass-official'

As you may have guessed, we need to installed these assets too. Good thing that it has a rake command. To install bower assets run this command.

rake bower:install

You should be able find your bower-assets installed in vendor/assets/bower_components.

Setup AngularJS

We are getting close on running our angularjs app on rails. Next step is to create a controller that will be our root path and where our view will be rendered as a angular app. Generate the controller with:

rails g controller Home index

This tells the rails generator to create a controller named Home and an action name index.

To make the index action as our route-path. Open and upate your route.rb and add the line root "home#index". In yout route.rb:

Rails.application.routes.draw do
  root 'home#index'
end

To link angular and jquery to your page, application.js will changed to:

//= require jquery
//= require angular
//= require_tree .

And link bootstrap in your application.css:

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

Simple AngularJS App

We need to know if we got our setup right. One way to do it, is to check the Network Tab on the firefox dev tools.

Or we can create a simple app to check if angular and bootstrap is working properly. Open and edit your view in views/home/index.html.haml:

1 .container-fluid{"ng-app" => "contactlist"}
2   .panel.panel-success
3     .panel-heading
4       %h1{"ng-if" => "name"}
5         Hello, {{ name }}
6     .panel-body
7       %form.form-inline
8         .form-group
9           %input.form-control{:autofocus => "", "ng-model" => "name", :placeholder => "Enter your name", :type => "text"}/

Open and edit home.js.coffee to initiliaze the angular app with this line of code:

contactlist = angular.module('contactlist',[])

Let's see if you got our small angular app is working. When typing a text on the textfield input it should show a message like this:

Yay we nailed! Next stop will be creating our wireframe for our ContactList App.