Question

我正在做一个名为“Zero to deployment in the 10,000 words 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'

捆绑安装
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”

触摸Bowerfile

填充“Bowerfile”

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

rake bower：安装

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'
```

应用程序/控制器/ 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>

但是当我在本地运行应用程序时，它看起来就像这样，而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/ $注射器/ NOMOD

＆＃34; app.coffee＆＃34;中存在拼写错误。
raceta - ＆gt; receta

AngularJS不适用于每个教程的Cloud9 Rails应用程序

1 个答案: