一からRuby on Rails備忘録

アーカイブ

その他

AngularJSとRails4でRestアプリ作成（６）AngularJSのresourceを使って登録機能を追加

画像 2022年5月5日 wp-admin コメントをどうぞ

$resourceサービスのRESTアクション（create、index、show、update、destroy）をサービスとして定義してあるので、このサービスを使って登録機能を追加しました。
続きを読む →

その他

AngularJSとRails4でRestアプリ作成（５）AngularJSのresourceを使ってshowアクションを追加

画像 2022年5月5日 wp-admin コメントをどうぞ

前回サーバーに対する$resourceサービスのRESTアクション（create、index、show、update、destroy）をサービスとして定義しましたので、このサービスを使ってshowアクションを追加します。
続きを読む →

その他

AngularJSとRails4でRestアプリ作成（４）RESTアクションをfactoryメソッドを使ってサービス化

画像 2022年5月5日 wp-admin コメントをどうぞ

前回、AngularJSのresourceサービスを使ってサーバーのデータベースからデータを取得して表示しました。
今回は、サーバーに対する$resourceサービスのRESTアクション（create、index、show、update、destroy）をサービスとして定義します。
続きを読む →

その他

AngularJSとRails4でRestアプリ作成（３）AngularJSの$resourceサービスを使ってサーバーデータを取得

画像 2022年5月5日 wp-admin コメントをどうぞ

前回までは、AngularJSのスクリプト内に定義したデータを表示していました。
今回は、AngularJSのresourceサービスを使ってサーバーのデータベースからデータを取得して表示します。
続きを読む →

その他

AngularJSとRails4でRestアプリ作成（２）AngularJSのルート、テンプレートの設定

画像 2022年5月5日 wp-admin コメントをどうぞ

１）AngularJSのrouteサービスを導入
　
①angular-routeをインクルード
　
$ vi app/assets/javascripts/application.js
　
//= require angular-route
　
②ngRouteを依存性の設定に追加
　
$ vi app/assets/javascripts/mymodule.js
　
var mymodule = angular.module(“myModule”, [‘ngRoute’]);
　
２）ルートプロバイダ、パーシャルテンプレートの設定
　
ファイル内でRailsのヘルパーを使用するため、ファイルの拡張子に.erbを追加しています。
$ vi app/assets/javascripts/mymodule.js.erb

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

mymodule.config(function($routeProvider) {
  $routeProvider
    .when("/users/dummy", {
      templateUrl: "<%= asset_path('users/dummy.html') %>",
      controller: "UsersDummyCtrl" })
    .otherwise({
      templateUrl: "<%= asset_path('users/index.html') %>",
      controller: "UsersIndexCtrl" });
});

　
３）インデックスのコントローラファイル作成
　
上記でAngularJSのルート設定を行い、各ルート毎にパーシャルテンプレートとコントローラを定義する形に変更したので、インデックス用のコントローラを定義します。
　
$ vi app/assets/javascripts/mymodule.js.erb

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

　
４）パーシャルテンプレートファイルを作成
　
①indexのパーシャルテンプレートを作成
　
今までapp/views/users/index.html.erbに記述していた内容をパーシャルテンプレートファイルに記述します。
　
動作確認のためダミーページへのリンクを追加しています。
　
$ vi app/assets/templates/users/index.html

<div ng-controller="UsersIndexCtrl">
  <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>
  <a href="#/users/dummy">ダミー</a>
</div>

　
②ダミーページのパーシャルビューを仮作成
　
$ vi app/assets/templates/users/dummy.html
　
<h3>ダミー</h3>
　
５）AngularJSのレイアウトテンプレートファイルを作成
　
Railsのconfig/route.rbでUsersコントローラのindexアクションをrootにしているので、とりあえずこのビューをレイアウトテンプレートファイルとします。
　
$ vi app/views/users/index.html.erb
　
<div ng-view></div>
　
６）動作確認
　
http://localhost:3000/
　
上記URLでインデックスページが表示され、ダミーのリンク押下でダミーページが表示される事を確認します。

その他

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

画像 2022年5月4日 wp-admin コメントをどうぞ

１）アプリ作成
　
$ 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/