Part 2 - Add Angular.js to Ruby on Rails app
In this post we will add angular to the task list.
Turbolinks is a feature new to Rails 4. It uses pushState to change the address of the current page, meaning scripts do not have to be reloaded. Angular already does some of this magic, though it is possible to use angular and turbolinks together. For this app we’re going to stick with only angular, no turbolinks.
“data-turbolinks-track” => true from app/views/layouts/application.html.erb.
You can also remove
gem ‘turbolinks’ from the Gemfile.
$ touch .bowerrc from the command line) and install client side dependencies (meaning angular and ui-router).
.bowerrc file looks like:
Use tabs to spaces in the .bowerrc file. Install dependencies with:
$ bower init && bower i angular angular-ui-router --save
This creates the bower.json file and installs angular and angular-ui-router.
Next we need to tell the rails asset pipeline to load in what bower added to vendor/assets/components. Go to config/application.rb and add this line:
config.assets.paths << Rails.root.join(‘vendor’, ‘assets’, ‘components’)
//= require jquery
//= require_tree . line. If we have that it will ignore the folder structure we set up later. The order our files loads in matter so get rid of it!
Start the rails server and open up the console. Type “angular” and press enter. We’ve used bower to load client libraries into Rails.
Okay so we’ve configured rails to load in the libraries, now we need to make our angular app and have that load in properly.
First attach a module to app/views/layouts/application.html.erb
Tell the asset pipeline about these new directories, add to config/application.rb:
//= require jquery
And finally update the task view in app/views/task/index.html.erb:
<div class=’container’ ng-controller=’TaskCtrl’>
If you are not following along, make sure you created the Rails task controller like in the last post. In upcoming posts we will use ui-router with Ruby On Rails.
Source code: https://github.com/cleechtech/rails-task-list
Ask me questions or give feedback via comments or on twitter!