参考になるサイト
RubyとRailsのバージョン
ruby '2.0.0'
rails', '4.0.1'
RailsとAngular.jsを使って検索機能作る。
ポイントは検索結果がリロードなしですぐに反映される事。
gemfileに下記を追加
Gemfile
gem 'angularjs-rails'
gem 'angularjs-rails-resource', '~> 0.2.3'
angularjs-rails-resourceはAngularJSのモジュールの中にあるngResourceを使うために導入。
フォルダとファイルを作る。
% > mkdir -p app/assets/javascripts/angular/controllers \
app/assets/javascripts/angular/services
% > touch app/assets/javascripts/angular/controllers/article_ctrl.js \
app/assets/javascripts/angular/services/article.js \
app/assets/javascript/app.js
application.jsに下記を記入
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require angular-resource
//= require app
//= require_tree
app.jsに下記を記入
app.js
window.App = angular.module('Ahiru', ['ngResource']);
application.html.erbのhtml要素に下記のものを追加
<html> ー＞ <html ng-app ="Ahiru">
article_ctrl.jsに下記を記入
article_ctrl.js
var app = angular.module('Ahiru');
app.controller('ArticlesCtrl', [
'$scope', 'Article', function($scope, Article) {
return $scope.articles = Article.query();
}
]);
article.jsに下記を記入
article.js
var app = angular.module('Ahiru');
app.factory('Article', function($resource) {
return $resource('/api/articles/:id', {id: '@id'});
});
コントローラーはTopCotrollerとArticleControllerの二つ
モデルはArticleのみ
route.rbに下記を記入
route.rb
Ahiru::Application.routes.draw do
root to: 'top#index'
scope :api do
get "/articles(.:format)" => "articles#index"
get "/articles/:id(.:format)" => "articles#show"
end
end
モデルを作る
% > rails g model article title:string content:text
% > rake db:migrate
top_controller.rb
class TopController < ApplicationController
def index
end
end
articles_controller.rb
class ArticlesController < ApplicationController
def index
render json: Article.order("created_at DESC")
end
def show
render json: Article.find(params[:id])
end
end
app/views/top/index.html.erbを作成し下記を記入
index.html.erb
<h2>記事検索</h2>
Search: <input ng-model="query">
<div ng-controller="ArticlesCtrl">
</ul>
<ul>
<li ng-repeat=" article in articles | filter:query ">
<h3>{{ article.title }}</h3>
<p>({{ article.content }})</p>
</li>
</ul>
</div>
seedファイルに下記のデータを投入
seeds.rb
title_name = %w(perl ruby python php java) * 6
0.upto(30) do |idx|
Article.create(
title: title_name[idx],
content: "避暑地・鎌倉を訪れた大学生の「私」は、由比が浜で見かけた「先生」に興味を持ちます。\n
言葉を交わすようになりましたが、「先生」の態度はそっけないものでした。回想の物語で \n
ある本作を語る「語り手の私」は、「先生の亡くなった今日になって、はじめて」、先生は \n
自分を嫌っていたわけではなかったとわかりはじめたと振り返ります。"
)
end
% > rake db:seed
完成画像
終了