每个教程的 AngularJS 不能在 Cloud9 Rails 应用程序中工作

Question

我正在做一个名为“用不到 10,000 字从零到部署”的教程来学习将 AngularJS 集成到 ROR 应用程序中。

教程：http://angular-rails.com/index.html
目前在这里：http://angular-rails.com/bootstrap.html

本教程是为 Mac OS X 设计的，但我使用的是 Cloud9，因此在弥补差距时遇到了一些麻烦。

在完成设置“有史以来最小的 Angular 应用程序”的步骤后，Rails 应用程序可以工作，但 Angular 不能。

到目前为止我做了什么：

1. 在 Cloud9 中创建了一个新的 Rails 应用

2. 设置 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. 捆绑安装

4. vim 配置/database.yml

5. 耙数据库：创建

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. 在根目录中创建“Bowerfile”

   触摸 Bowerfile

8. 填充的“Bowerfile”

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

9. 耙凉亭：安装

10。 配置/应用程序.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. 将“application.css”的名称更改为“application.css.scss”

12. application.css.scss

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

13. 应用程序.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>
    

但是当我在本地运行应用程序时，它看起来像这样，并且 Angular 不起作用。

更新 下面的开发者控制台显示，

    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.

我有一些使用 Cloud9 和 Ruby on Rails 的经验，但我以前从未接触过 AngularJS。 我很高兴听到有人告诉我我做错了什么:)

Answer 1

解决了。

这个页面有帮助。

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

“app.coffee”中有拼写错误。
raceta -> receta