用Rails4和Angular.js创建搜索功能

2 年 ago

科, 颖

2 minutes

参考网站

Ruby和Rails的版本

ruby '2.0.0'
rails', '4.0.1'

使用Rails和Angular.js来创建搜索功能。

重点是搜索结果可以在不刷新页面的情况下立即更新。

在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中写下以下内容。


//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require angular-resource
//= require app
//= require_tree

请在app.js中填写以下内容。

window.App = angular.module('Ahiru', ['ngResource']);

在 application.html.erb 文件的 HTML 元素中添加以下内容。

<html>  ー＞　<html ng-app ="Ahiru">

请在 article_ctrl.js 文件中填写以下内容。

var app = angular.module('Ahiru');


app.controller('ArticlesCtrl', [
  '$scope', 'Article', function($scope, Article) {
    return $scope.articles = Article.query();
  }
]);

请在article.js文件中填写以下内容。

var app = angular.module('Ahiru');
app.factory('Article', function($resource) {
  return $resource('/api/articles/:id', {id: '@id'});
});

控制器包括TopController和ArticleController两个。
模型只有Article一个。

请在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

class TopController < ApplicationController

  def index
  end

end

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的文件，并添加了以下内容。


<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文件中。

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

完成绘画

结束