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. 創建一個新的Rails應用程序在CLOUD9

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的config/database.yml的

5. 耙分貝：創建

6. NPM安裝涼亭-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. 創建「乙owerfile」在根目錄

   觸摸Bowerfile

8. 填充的 「Bowerfile」

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

9. 耙涼亭：安裝

10. 配置/ 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」

應用的

變化名稱。 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' 

應用程序/控制器/ home_controller

class HomeController < ApplicationController 
    def index 
    end 
end 

應用程序/資產/ Javascript角/ app.coffee

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

應用程序/視圖/家庭/ 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> 

但是，當我在本地運行的應用程序，它只是看起來像這樣和角不起作用。

UPDATE 下面的開發者控制檯讀取，

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/ $噴油器/ NOMOD

有拼寫錯誤的 「app.coffee」。
raceta - > receta