Create an Angular.JS app with a RESTful Rails API Pt.2

4 min readMar 30, 2016

Part 2: Adding Angular to the Rails Project

Step: 1

To add angular to our rails project we need to add the bower rails gem to our #Gemfile

#Gemfile gem 'bower-rails'

Step: 2

Now we need to install the gem

$ bundle install

this will install bower so that we can start installing dependencies using bower.

Step: 3

We need to initialize the bower.json file so that we can add our dependencies. First we run a rails generator

$ rails g bower_rails:initialize json

in our root directory we now have a bower.json file. We need to add our dependencies. We will be using the latest versions of Angular, ui.router, and Angular-Resource. We only want to specify the latest for Angular ui.router though since we only want to use Angular 1.5 and not 2.

#bower.json{
  “lib”: {
    “name”: “bower-rails generated lib assets”,
    “dependencies”: {
      “angular”: “v1.5.3”,
      “angular-ui-router”: “latest”,
      “angular-resource”: “v1.5.3”
    }
  },
  “vendor”: {
    “name”: “bower-rails generated vendor assets”,
    “dependencies”: {}
  }
}

and then run

$ rake bower:install

this should give us the following folders, which contain our necessary angular.js files.

lib/assets/bower_components -----> angular
                             |
                             | --> angular-resource
                             |
                             | --> angular-ui-router

Step :4

We know need to require these files in our JavaScript manifest. we need to create the following file app/assets/javascripts/application.js. Let’s add our new angular assets to our application.js.

#app/assets/javascripts/application.js//= require angular
//= require angular-ui-router
//= require angular-resource
//= require_tree .

We know need our template to load our javascript. Go to app/views/layouts/application.html.erb and add the following line

<%= javascript_include_tag ‘application’ %>

inside the head section of our application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Notes</title>
  <%= stylesheet_link_tag ‘application’, media: ‘all’ %>
  <%= javascript_include_tag ‘application’ %>
  <%= csrf_meta_tags %>
</head>
<body>
  
  <%= yield %></body>
</html>

We should check to make sure everything is working well, so re-run our rails server and see if we are getting any error.

$ rails server

Go to your browser @ localhost:3000, If you see the welcome aboard splash page, that mean we have no errors and we are good to go.

Step: 5 New home page

We are now going to add a home page for our app. Go to config/routes.rb and add a root route.

Rails.application.routes.draw do  root “application#index” 
 
  namespace :api, defaults:{format: :json} do
    namespace :v1 do
      resources :todos
    end
  endend

when we go back to our browser you should see this:

We haven’t built a method for index in our application controller so this is normal. Let’s add that now.

#app/controllers/application_controller.rbclass ApplicationController < ActionController::Base
  protect_from_forgery with: :exception   def index 
  end 
end

now when we check our browser we will get this:

We are now missing a template. Let’s add that template now.

Create the file app/views/application/index.html.erb

We should now have this in our browser:

Now we are ready to use Angular.

Step: 6 Hello World

Let’s go back to our app/views/layouts/application.html.erb and add angular to our base template.

<!DOCTYPE html>
<html>
<head>
  <title>Notes</title>
  <%= stylesheet_link_tag ‘application’, media: ‘all’ %>
  <%= javascript_include_tag ‘application’ %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="app">
  
  <%= yield %></body>
</html>

this will initialize our angular module ‘app’. Before we can do anyhing we need to build our angular app module.

lets create the following folder to place all of our Angular files in:

app/assets/javascripts/angular-app

this will be used in our asset pipeline with our //= require_tree . in our application.js file.

Let’s create our first Angular.js module

# app/assets/javascripts/angular-app/app.jsangular 
  .module('app', ['ui.router', 'ngResource'])

in this file we named our module, and we injected the module with our dependencies (ui.router and ngResource).

We are now going to build our Hello World splash page.

add {{ “Hello “ + “World” }} to our app/views/application/index.html.erb

# app/views/application/index.html.erb{{ "Hello " + "World" }}

When we go back to our browser @ localhost:3000 we should see this:

Congratulations we have a functioning Angular app. In the next section we are going to use $resource to build out our Angular app using our RESTful rails API we built in part 1.

Please leave me a comment if you have any questions or if you have any advice.

Links:

Part 1
Part 3
Part 4