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にアクセスしてください。