AngularJS not working in Cloud9 Rails app per tutorial

Question

I'm doing a tutorial called "Zero to deployment in less than 10,000 words" to learn incorporating AngularJS into a ROR app.

Tutorial: http://angular-rails.com/index.html
Currently here: http://angular-rails.com/bootstrap.html

The tutorial was designed for Mac OS X, but i'm using Cloud9 so having some trouble bridging the gap.

After going through steps to setup the "Tiniest Angular app ever", the Rails app works, but the Angular does not.

What i've done so far:

1. Created a new Rails app in Cloud9

2. Setup gemfile

   +gem 'sass', '3.4.19'
   +gem 'bower-rails'
   
   +group :test, :development do
   +  gem 'rspec-rails', '~> 2.0'
   +  gem 'factory_girl_rails', '~> 4.0'
   +  gem 'capybara'
   +  gem 'database_cleaner'
   +  gem 'selenium-webdriver'
   +end
   
   -gem 'turbolinks'
   

3. bundle install

4. vim config/database.yml

5. rake db:create

6. npm install bower -g

   /home/ubuntu/.nvm/versions/node/v4.1.1/bin/bower -> /home/ubuntu/.nvm/versions/node/v4.1.1/lib/node_modules/bower/bin/bower
   bower@1.7.2 /home/ubuntu/.nvm/versions/node/v4.1.1/lib/node_modules/bower
   └── semver-utils@1.1.1
   

7. Created "Bowerfile" in root directory

   touch Bowerfile

8. Populated "Bowerfile"

   +asset 'angular'
   +asset 'bootstrap-sass-official'
   +# vim: ft=ruby
   

9. rake bower:install

10. config/application.rb

    module Workspace
      class Application < Rails::Application

    +   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)$)

        config.active_record.raise_in_transactional_callbacks = true
      end
    end

11. change name of "application.css" to "application.css.scss"

12. application.css.scss

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

13. application.js

    +//= require angular/angular
    
    -//= require turbolinks
    

14. routes.rb

    +root 'home#index'
    

15. app/controllers/home_controller

    class HomeController < ApplicationController
        def index
        end
    end
    

16. app/assets/javascripts/app.coffee

    receta = angular.module('raceta',[
    ])
    

17. app/views/home/index.html.erb

    <div class="container-fluid" ng-app="receta">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h1 ng-if="name">Hello, {{name}}</h1>
            </div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="Enter your name" autofocus ng-model="name">
                    </div>
                </form>
            </div>
        </div>
    </div>
    

But when i run the app locally it just looks like this and the Angular doesn't work.

UPDATE The developer console below reads,

    Uncaught ...
    Error: [$injector:modulerr] Failed to instantiate module receta due to:
    Error: [$injector:nomod] Module 'receta' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I have some experience with Cloud9 and Ruby on Rails, but i've never touched AngularJS before. I'm very very happy to listen to anyone tell me what i'm doing wrongly :)

Answer 1

Solved.

This page helped.

https://docs.angularjs.org/error/$injector/nomod

There was a spelling mistake in "app.coffee".
raceta -> receta