AngularJSとRails4でRestアプリ作成（１）AngularJSインストール、動作確認

wp-admin

3年前

１）アプリ作成
　
$ rails new rest –skip-test-unit
　
２）Gemfile設定、インストール
　
①Gemfile
　
・多くの機能がAngularJSと重複するようなので、ここではTurbolinksを無効にしています。
　
$ vi Gemfile

#無効にする
#gem 'turbolinks'
#コメントを削除
gem 'therubyracer',  platforms: :ruby
#追加
gem 'bootstrap-sass'
gem 'angularjs-rails'

　
②インストール
　
$ bundle install
　
３）AngularJSをインクルード
　
$ vi app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require angular

　
４）Bootstrap3をスタイルシートファイルでインポート
　
$ vi app/assets/stylesheets/main.css.scss
　
@import “bootstrap”;
　
５）Railsコントローラ作成
　
Usersコントローラとindexアクションを作成します。
　
$ rails generate controller Users index
　
６）AngularJSのモジュール、コントローラ設定
　
①コントローラファイル作成
　
モジュールとコントローラを定義します。
　
$ vi app/assets/javascripts/mymodule.js

var mymodule = angular.module("myModule", []);

mymodule.controller("UsersCtrl", function($scope) {
  $scope.users = [
    { 
      name: "相川　一郎",
      email: "aikawa@example.com"
    },
    { 
      name: "石井　二郎",
      email: "ishii@example.com"
    },
  ]
});

　
②インクルード設定追加
　
$ vi app/assets/javascripts/application.js
　
//= require mymodule
　
７）アプリケーションレイアウトファイル作成
　
ターボリンクを無効にしているのでインクルード部分の’data-turbolinks-track’ => true を削除します。
　
ng-appでモジュール名を指定します。
　
$ vi app/views/layouts/application.html.erb

<!DOCTYPE html>
<html ng-app="myModule">
<head>
  <title>Rest</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

　
８）ビューを作成
　
$ vi app/views/users/index.html.erb

<div ng-controller="UsersCtrl">
  <h3>ユーザー一覧</h3>

  <table class="table table-bordered">
    <thead>
      <td>名前</td>
      <td>メールアドレス</td>
    </thead>
    <tbody>
      <tr ng-repeat="user in users">
        <td>
          {_{user.name}}
        </td>
        <td>
          {_{user.email}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

　
９）Railsのルート設定
　
$ vi config/routes.rb
　
root to: ‘users#index’
　
１０）動作確認
　
http://localhost:3000/