AngularJS not working in Cloud9 Rails app per tutorial -
i'm doing tutorial called "zero deployment in less 10,000 words" learn incorporating angularjs ror app.
tutorial: http://angular-rails.com/index.html
here: http://angular-rails.com/bootstrap.html
the tutorial designed mac os x, i'm using cloud9 having trouble bridging gap.
after going through steps setup "tiniest angular app ever", rails app works, angular not.
what i've done far:
created new rails app in cloud9
setup gemfile
+gem 'sass', '3.4.19' +gem 'bower-rails' +group :test, :development + 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
created "bowerfile" in root directory
touch bowerfile
populated "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
change name of "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.coffee
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 name" autofocus ng-model="name"> </div> </form> </div> </div> </div>
but when run app locally looks , angular doesn't work.
update developer console below reads,
uncaught ... error: [$injector:modulerr] failed instantiate module receta due to: error: [$injector:nomod] module 'receta' not available! either misspelled module name or forgot load it. if registering module ensure specify dependencies second argument.
i have experience cloud9 , ruby on rails, i've never touched angularjs before. i'm very happy listen tell me i'm doing wrongly :)
solved.
this page helped.
https://docs.angularjs.org/error/$injector/nomod
there spelling mistake in "app.coffee".
raceta -> receta
Comments
Post a Comment