Данные класса Rails для angularjs?

Question

Я создал приложение Rails с встроенным Ruby (erb) в качестве механизма шаблона, я использовал «твиттер» для обсуждения с API Twitter и создал класс рельсов (так называемый TwitterAPi, внутри папки «Lib»). Я успешно прошел данные в шаблон home.html.erb, как это:

<ul> 
     <% TwitterApi.get_ronaldo_tweets.each do |tweet|%> 
     <li><%= tweet %></li> 
     <% end %> 
    </ul> 

Как я уже говорил, TwitterApi класс, который я создал и get_ronaldo_tweets метод, в котором я тяну сроки и долю Рональдо это на моей странице. (Я использовал аутентификацию только для приложения)

Итак, теперь я хочу использовать Angularjs на frontend, так что мой вопрос в том, возможно ли это (и если да, как это делается?), Чтобы использовать этот класс Rails с Angular to получить тот же результат?

Answer 1

Прежде всего вам нужно действие контроллера Rails, чтобы отобразить твиты как JSON, чтобы Angular мог их загрузить. Я рекомендую вам создать TweetsController, и просто использовать действие индекса:

class TweetsController < ApplicationController 

    def index 

    @tweets = TwitterApi.get_ronaldo_tweets 

    respond_to do |format| 
     format.html 
     format.json { @tweets.to_json } 
    end 
    end 

end 

Не забудьте определить маршрут в routes.rb:

resources :tweets, only: :index 

Вы не можете должны ответьте на HTML здесь, но вы можете просмотреть твиты, как вы сейчас делаете в home.html.erb.

Теперь вы должны быть в состоянии увидеть твиты JSON, перейдя на:

localhost:3000/tweets.json 

Я просто используя to_json сваливать из данных JSON, но вы могли бы рассмотреть jbuilder или rabl оказывать твит.

Как только у вас есть данные json, вы можете использовать ngResource для загрузки твитов.

Вот некоторые непроверенных AngularJS в CoffeeScript, что мы надеемся, вы начали:

app = angular.module("RonaldoTweets", ["ngResource"]) 

app.factory "Tweets", ["$resource", ($resource) -> 
    $resource("/tweets.json") 
] 

@TweetCtrl = ["$scope", "Tweet", ($scope, Tweet) -> 
    $scope.tweets = Tweet.query() 

Наконец, вам просто нужно Угловое представление для отображения твитов. Нечто подобное должно работать:

<div ng-controller="TweetCtrl"> 

    <ul> 
    <li ng-repeat="tweet in tweets"> 
     {{tweet}} 
    </li> 
    </ul> 

</div> 

This RailsCast объясняет, как подключить AngularJS приложение к ресурсу Rails с использованием ngResource. Я рекомендую вам взглянуть. Единственное отличие здесь заключается в том, что вы не вытаскиваете Tweets из модели Rails, вы захватываете их из своего класса TwitterApi Ruby.