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

Question

我正在做一个名为 "Zero to deployment in less than 10,000 words" 的教程，以学习将 AngularJS 合并到 ROR 应用程序中。

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

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

完成设置 "Tiniest Angular app ever" 的步骤后，Rails 应用可以运行，但 Angular 不运行。

到目前为止我做了什么：

在 Cloud9 中创建了一个新的 Rails 应用程序

设置 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'

bundle install
vim config/database.yml
rake db:create

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

在根目录"Bowerfile"中创建

touch Bowerfile

人口稠密"Bowerfile"

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

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

将 "application.css" 的名称更改为 "application.css.scss"

application.css.scss

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

application.js

+//= require angular/angular

-//= require turbolinks

routes.rb
```
+root 'home#index'
```

app/controllers/home_controller

class HomeController < ApplicationController
    def index
    end
end

app/assets/javascripts/app.咖啡
```
receta = angular.module('raceta',[
])
```

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.

我在 Rails 上使用过 Cloud9 和 Ruby，但我以前从未接触过 AngularJS。我非常非常高兴听到任何人告诉我我做错了什么:)

Answer 1

已解决。

此页面有帮助。

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

"app.coffee" 中存在拼写错误。
raceta -> receta

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

AngularJS not working in Cloud9 Rails app per tutorial

ruby-on-rails

cloud9-ide

angularjs