We are no longer accepting contributions to Documentation. Please see our post on meta.

Ruby on Rails

Configure Angular with Rails All Versions

1.0
1.1
1.2
2.0
2.3
3.0
3.1
3.2
4.0
4.1
4.2
5.0
5.1.2

This draft deletes the entire topic.

Examples

  • 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.

Please consider making a request to improve this example.

Syntax

Syntax

Parameters

Parameters

Remarks

Remarks

Still have a question about Configure Angular with Rails? Ask Question

Topic Outline


    We are no longer accepting contributions to Documentation. Drafts cannot be modified.