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