Ruby on Rails
Configurer Angular avec Rails

Angulaire Avec Rails 101

Étape 1: Créer une nouvelle application Rails

gem install rails -v 4.1
rails new angular_example

Étape 2: Supprimer les Turbolinks

La suppression de turbolinks nécessite de la retirer du fichier Gemfile.

gem 'turbolinks'

Supprimez le require de app/assets/javascripts/application.js :

//= require turbolinks

Étape 3: Ajouter AngularJS au pipeline d'actifs

Pour que Angular fonctionne avec le pipeline de ressources Rails, nous devons ajouter au fichier Gemfile:

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

Maintenant, lancez la commande

bundle install

Ajoutez bower pour pouvoir installer la dépendance AngularJS:

rails g bower_rails:initialize json

Ajoutez Angular à bower.json :

{
  "name": "bower-rails generated dependencies",
  
  "dependencies": {

    "angular": "latest",
    "angular-resource": "latest",
    "bourbon": "latest",
    "angular-bootstrap": "latest",
    "angular-ui-router": "latest"
  }
}

Maintenant que bower.json est configuré avec les bonnes dépendances, installons-les:

bundle exec rake bower:install

Étape 4: Organiser l'application Angular

Créez la structure de dossiers suivante dans app/assets/javascript/angular-app/ :

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

Dans app/assets/javascripts/application.js , ajoutez require pour Angular, l'assistant de template et la structure de fichier de l'application Angular. Comme ça:

//= 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

Étape 5: Amorcez l'application Angular

Créez 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' )

Créez un module angulaire à l' app/assets/javascripts/angular-app/modules/example.js.coffee.erb :

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

Créez un contrôleur angulaire pour cette application sur 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"  ])

Ajoutez maintenant une route aux Rails pour passer le contrôle à Angular. Dans config/routes.rb :

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

Générez le contrôleur Rails pour répondre à cette route:

rails g controller Example

Dans app/controllers/example_controller.rb :

class ExampleController < ApplicationController
    def index
    end
end

Dans la vue, nous devons spécifier quelle application angulaire et quel contrôleur angulaire pilotera cette page. Donc, dans app/views/example/index.html.erb :

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

Pour afficher l'application, démarrez votre serveur Rails et visitez http: // localhost: 3000 / example .