Examples

• 15

  Angular with Rails 101
  15

  Step 1: Create a new Rails app

  gem install rails -v 4.1
  rails new angular_example
  

  Step 2: Remove Turbolinks

  Removing turbolinks requires removing it from the Gemfile.

  gem 'turbolinks'
  

  Remove the require from app/assets/javascripts/application.js:

  //= require turbolinks
  

  Step 3: Add AngularJS to the asset pipeline

  In order to get Angular to work with the Rails asset pipeline we need to add to the Gemfile:

  gem 'angular-rails-templates'
  gem 'bower-rails'
  

  Now run the command

  bundle install
  

  Add bower so that we can install the AngularJS dependency:

  rails g bower_rails:initialize json
  

  Add Angular to bower.json:

  {
    "name": "bower-rails generated dependencies",
    
    "dependencies": {
  
      "angular": "latest",
      "angular-resource": "latest",
      "bourbon": "latest",
      "angular-bootstrap": "latest",
      "angular-ui-router": "latest"
    }
  }
  

  Now that bower.json is setup with the right dependencies, let’s install them:

  bundle exec rake bower:install
  

  Step 4: Organize the Angular app

  Create the following folder structure in app/assets/javascript/angular-app/:

  templates/
  modules/
  filters/
  directives/
  models/
  services/
  controllers/
  

  In app/assets/javascripts/application.js, add require for Angular, the template helper, and the Angular app file structure. Like this:

  //= require jquery
  //= require jquery_ujs
  
  //= require angular
  //= require angular-rails-templates
  //= require angular-app/app
  
  //= require_tree ./angular-app/templates
  //= require_tree ./angular-app/modules
  //= require_tree ./angular-app/filters
  //= require_tree ./angular-app/directives
  //= require_tree ./angular-app/models
  //= require_tree ./angular-app/services
  //= require_tree ./angular-app/controllers
  

  Step 5: Bootstrap the Angular app

  Create app/assets/javascripts/angular-app/app.js.coffee:

  @app = angular.module('app', [ 'templates' ])
  
  @app.config([ '$httpProvider', ($httpProvider)->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrftoken]').attr('content') ])  @app.run(->   console.log 'angular app running' )
  

  Create an Angular module at app/assets/javascripts/angular-app/modules/example.js.coffee.erb:

  @exampleApp = angular.module('app.exampleApp', [     # additional dependencies here   ])   .run(->     console.log 'exampleApp running'   )
  

  Create an Angular controller for this app at app/assets/javascripts/angular-app/controllers/exampleCtrl.js.coffee:

  angular.module('app.exampleApp').controller("ExampleCtrl", [   '$scope',   ($scope)->     console.log 'ExampleCtrl running'      $scope.exampleValue = "Hello angular and rails"  ])
  

  Now add a route to Rails to pass control over to Angular. Inconfig/routes.rb:

  Rails.application.routes.draw do   get 'example' => 'example#index' end
  

  Generate the Rails controller to respond to that route:

  rails g controller Example
  

  In app/controllers/example_controller.rb:

  class ExampleController < ApplicationController
      def index
      end
  end
  

  In the view, we need to specify which Angular app and which Angular controller will drive this page. So in app/views/example/index.html.erb:

  <div ng-app='app.exampleApp' ng-controller='ExampleCtrl'>
    
    <p>Value from ExampleCtrl:</p>
    <p>{{ exampleValue }}</p>
    
  </div>
  

  To view the app, start your Rails server and visit http://localhost:3000/example.

  edited Sep 12 '16 at 11:46

  

  

  
  discuss