After you have created a Rails 4 project and want to use AngularJS for the front-end development, this post can provide some tips.

Use Bower

It's a common practice to use Bower to manage front-end dependencies. Bower should also be used in Rails development. After Bower is installed, create .bowerrc in project root directory to specify directory to put dependencies.

  "directory": "vendor/assets/components"

Then update config/application.rb file to include Bower components. Add following line to your application configuration.

config.assets.paths << Rails.root.join('vendor', 'assets', 'components')  

Then you can add dependencies using bower.json or bower install angular --save.

To use those dependencies, add the path to app/assets/javascripts/application.js, like below.

//= require angular/angular
//= require angular-resource/angular-resource
//= require angular-ui-router/release/angular-ui-router

AngularJS should be loaded successfully now.

AngularJS Templates

When using AngularJS, it's common to have HTML partial templates. These templates are loaded using templateUrl or template. If using templateUrl, these template files can be put into public directory.

If you don't want to put template files into public directory, template can also be loaded using JavaScript. Template files are put into Rails views directory as partials. In the main view, e.g. index.html.erb, render partials as below. Template's file name is _mycomp.html.

<script type="text/ng-template" id="mycomp.html">  
  <%= render partial: "mycomp" %>

Then in AngularJS, use mycomp.html as templateUrl.

RequireJS text can also be used. Use text!mycomp.html to load template as a variable, then use as value of template in AngularJS.