Angular Project

Working on a rails/angular recipe-maker project today with some help from Aaron Figueroa. I thought it might be useful to write out the steps we went through so I can look back and try this again! 

1. Rails new project:

rails new recipe-maker --skip-javascript

Then bundle install. We didn't add a --database=postgresql.


2. Rails models. Created these models including a join: 

rails g model Recipe name:string --no-test-framework
rails g model Ingredient name:string --no-test-framework
rails g model RecipeIngredient recipe_id:integer ingredient_id:integer--no-test-framework


3. Migrate. In Rails 5 you can now run (rails -v to see version):

rails db:migrate


4. Seeding. Aaron stubbed out seed info 

recipe = Recipe.create(name: "poundcake")
recipe2 = Recipe.create(name: "pad thai")

ingredient = Ingredient.create(name: "noodles")
ingredient2 = Ingredient.create(name: "milk")

recipejoin = RecipeIngredient.create(, ingredient_id:
recipejoin2 = RecipeIngredient.create(recipe_id:, ingredient_id:

then: rails db:seed


5. Test to see if seed data is accessible:

rails c
recipe = recipe.first  

this returns: 

Recipe Load (0.2ms)  SELECT"recipes".* FROM "recipes" ORDER BY "recipes"."id" ASC LIMIT ?  [["LIMIT", 1]]

 => #<Recipe id: 1, name: "poundcake", created_at: "2016-08-29 17:33:51", updated_at: "2016-08-29 17:33:51"> 


6. Pretty sure next we created models with activerecord associations. 


class Ingredient < ApplicationRecord
  has_many :recipe_ingredients
  has_many :recipes, through: :recipe_ingredients


class Recipe < ApplicationRecord
has_many :recipe_ingredients
  has_many :ingredients, through: :recipe_ingredients



class RecipeIngredient < ApplicationRecord
  belongs_to :recipe
  belongs_to :ingredient


7. Create serializers. I need to review serializers as I'm not 100% on their role right at the moment. 

rails g serializer Recipe
rails g serializer Ingredient

and inside the files:  

class IngredientSerializer < ActiveModel::Serializer
  attributes :id, :name
  has_many :recipes

class RecipeSerializer < ActiveModel::Serializer
  attributes :id, :name
  has_many :ingredients


8. Create controllers. We added a bunch of the crud methods on in definition which I haven't done much. Good idea Aaron. 

rails g controller Recipes index create show update destroy --no-test-framework
rails g controller Ingredients index create show update destroy --no-test-framework


9. Rails Routes to see if our restful routes are lookin good.  

rails routes


10. Run our server for the first time to see if we're connected with rails. We are!

rails s (or rails server) 


11. In app>javascripts we need an application.js file our manifest file with information on all the files we require to run our app. 

//= require jquery

//= require angular.min

//= require angular-ui-router
//= require angular-rails-templates
//= require angular-sanitize.min
//= require bootstrap-sprockets
//= require_tree .


12. Routes.rb Add resources to routes. This might have happened a little earlier!  

 resources :recipes
 resources :ingredients


13. RecipesController. connecting our recipes controller to render json like this (I know a few of these method can be removed):

class RecipesController < ApplicationController
  def index
    recipes = Recipe.all
  respond_to do |format|
      format.json { render json: recipes}

  def create

  def show
    recipe = Recipe.find(params[:id])
    render json: recipe

  def update

  def destroy


14. We have added the following to the Gemfile. I don't know what they all do and don't remember the order we added them. It'd be worth looking up each one again and thinking through why we need it.   

gem 'jbuilder', '~> 2.5'
gem 'jquery-rails'
gem 'active_model_serializers', '~> 0.10.0'
gem 'jbuilder', '~> 2.5'
gem 'rack-cors'
gem 'angular-rails-templates'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'autoprefixer-rails'



15. Find these files (ie, angular-ui-router.js) and add to app>javascripts. From here we are testing against the server and beginning to set up angular. Hoping I have the order of events right here. Let's see if I can remember.


16. Routes.rb. We have already added resources to our routes. get and root we added in here as well:

Rails.application.routes.draw do
  get 'home/index'

 resources :recipes
 resources :ingredients

 root 'home#index'

  # For details on the DSL available within this file, see


17. Added a home controller manually. Not sure how central this is to our operations. I might have done this in the beginning?  

class HomeController < ApplicationController
  def index


18. App.js in app>assets>javascripts>app>app.js. We've rerouted this to look for template files but the rails views we did I've listed next.  

  .module('app', ['ui.router', 'templates', 'ngSanitize'])
  .config(function($stateProvider, $urlRouterProvider){

      .state('home', {
        url: '/',
        controller: 'HomeController as vm'
      .state('', {
        url: 'recipes',
        templateUrl: 'recipes.html',
        controller: 'RecipesController as vm'



19. Views. views>layouts>application.html.erb:

<!DOCTYPE html>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
      <%= javascript_include_tag 'application'%>

  <body ng-app="app">
    <%= yield %>

and views>recipes index.html.erb:

<p>Find me in app/views/recipes/index.html.erb</p>

<div ng-controller="RecipesController as vm">
    <div ng-repeat ="recipe in">


20. I don't really appreciate yet the different between using templates vs rails views. The angular ones keep things in the front end. I need to research this some. In app>assets>javascripts>app we create a home folder and a recipe folder for these files. app>assets>javascripts>app>home:


  .controller('HomeController', HomeController)

function HomeController() {
 console.log('this is the home controller');




function RecipesController($scope){

  var vm = this;
  debugger; =
    id: 1,
    name: "poundcake",
    ingredients: [
        id: 2,
        name: "milk"
    id: 2,
    name: "pad thai",
  ingredients: [
      id: 1,
      name: "noodles"


.controller('RecipesController', RecipesController);


21. Templates. app>assets>javascripts>templates. Important. Not the app folder. recipes.html (currently emtpy)

and home.html:
This is the home.html file in angular


Things I need to work on 

1. Review everything we added to the gemfile and what it does

2. Review everything we added to the manifest file and what it does

3. Review serializers and what they do. 

4. Rethink the routing. How do the template files, app.js and controller.js files work together?

5. Writing states in app.js  

6. What is postgresql?

7. How and what do we build on this structure?

8. Nav bar stuff