Ruby on Rails
Railsで角度を設定する

レール101の角度

ステップ1：新しいRailsアプリケーションを作成する

gem install rails -v 4.1
rails new angular_example

ステップ2：ターボリンクの取り外し

ターボリンクを取り外すには、Gemfileからターボリンクを削除する必要があります。

gem 'turbolinks'

app/assets/javascripts/application.jsからrequireを削除しapp/assets/javascripts/application.js 。

//= require turbolinks

ステップ3：AngularJSをアセットパイプラインに追加する

AngularがRailsのアセットパイプラインで動作するようにするには、Gemfileに追加する必要があります：

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

コマンドを実行する

bundle install

AngularJSの依存関係をインストールできるようにbower追加してください：

rails g bower_rails:initialize json

bower.jsonにAngularを追加：

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

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

bower.json適切な依存関係が設定されたので、それらをインストールしてみましょう：

bundle exec rake bower:install

ステップ4：角度アプリを整理する

app/assets/javascript/angular-app/次のフォルダ構造を作成します。

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

app/assets/javascripts/application.jsにrequire 、Angularにはrequire 、テンプレートヘルパー、Angular appファイル構造を追加します。このような：

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

ステップ5：角度アプリをブートストラップする

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' )

app/assets/javascripts/angular-app/modules/example.js.coffee.erb Angularモジュールを作成しapp/assets/javascripts/angular-app/modules/example.js.coffee.erb 。

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

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"  ])

今度は、Railsにルートを追加して、Angularに制御を渡します。 config/routes.rb ：

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

そのルートに応答するためにRailsコントローラを生成します：

rails g controller Example

app/controllers/example_controller.rb ：

class ExampleController < ApplicationController
    def index
    end
end

ビューでは、どの角度アプリケーションとどの角度コントローラがこのページを駆動するかを指定する必要があります。したがって、 app/views/example/index.html.erb次のapp/views/example/index.html.erb 。

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

このアプリケーションを表示するには、Railsサーバーを起動し、 http：// localhost：3000 / exampleにアクセスしてください。