HTTP-запрос к базе данных Rails и Angular Views

Это путь, который я выбрал, чтобы заполнить базу данных Rails данными, проанализированными из внешнего запроса $http, и представить их через Angular на внешнем интерфейсе…

Я использую данные с data.colorado.gov для заполнения базы данных альтернативных заправочных станций Колорадо (https://dev.socrata.com/foundry/data.colorado.gov/c7ve-fkni)

// РЕЛЬСЫ

Сначала создайте задачу rake для получения данных:

rails g task import_stations

Затем создайте задачу rake для извлечения и анализа данных, а затем создайте объекты Rails с данными:

/lib/tasks/importstations.rake
 
 require ‘net/http’
 
 namespace :import do
    desc “import fuel station database”
    task :stations => :environment do
       uri = URI.parse(
          ‘https://data.colorado.gov/resource/c7ve-fkni.json'
       )
       res = Net::HTTP.get(uri)
       response = JSON.parse(res)
       response.each do |r|
          Station.create(
             ev_connector_types: r[‘ev_connector_types’],
             fuel_type_code: r[“fuel_type_code”], 
             name: r[“station_name”], 
             street_address: r[“street_address”], 
             phone: r[“station_phone”], 
             hours: r[“access_days_time”], 
             station_id: r[“id”], 
             city: r[“city”], 
             state: r[“state”], 
             zip: r[“zip”]
          )
       end
    end
 end

В моем StationsController у меня есть метод создания:

/app/controllers/stationscontroller.rb
 
 def create
    @station = Station.new(station_params)
    if @station.save
       render json: @station, 
         status: :created,
         location: @station
    else
       render json: @station.errors, 
          status: :unprocessable_entity
    end
 end
 
 private
 
 def station_params
    params.require(:station).permit(
       :id, :fuel_type_code, :name, :street_address, :phone, :hours,
       :station_id, :city, :state, :zip, :ev_connector_types
    )
 end

Я сериализую данные с помощью ActiveModel:Serializer

/app/serializers/stationserializer.rb
 
 class StationSerializer < ActiveModel::Serializer
    attributes :id, :fuel_type_code, :name, :street_address, :phone,
      :hours, :station_id, :city, :state, :zip, :ev_connector_types
 end

Теперь данные json доступны для просмотра по адресу

http://localhost:3000/stations.json

Расширение JSONview для Chrome, если у вас его еще нет, делает данные JSON действительно красивыми и читабельными.

//УГЛОВОЙ

Сначала я установил свой маршрут/состояние в модуле:

/app/assets/javascripts/app.js
 
 angular
    .module(‘app’, [‘ui.router’, ‘templates’, ‘Devise’])
    .config(function($stateProvider, $urlRouterProvider) {
       $stateProvider
          .state(‘stations’, {
             url: ‘/stations’,
             templateUrl: ‘stations/stations.html’,
             controller: ‘StationController as vm’,
          }) 
     })

Затем создайте службу, которая будет получать данные json, которые я хочу показать:

/app/assets/javascripts/app/services/StationService.js
 
 function StationService($http) {
    this.getStations = function () {
       return $http.get(‘/stations.json’)
    }
 }
 
 angular
    .module(‘app’)
    .service(‘StationService’, StationService);

Затем я использую службу в своем контроллере:

/app/assets/javascripts/app/controllers/StationController.js
function StationController($scope, StationService){
   StationService
      .getStations()
      .then(function (res) {
         $scope.stationList = res.data;
   })
}
angular
   .module(‘app’)
   .controller(‘StationController’, StationController);

И, наконец, на мой взгляд, я вывожу данные:

/app/assets/javascripts/app/stations/stations.html
<div ng-controller=”StationController”>
    <table>
       <th>City</th>
       <th>Name</th>
       <th>Phone #</th>
       <th>Address</th>
       <th>Business Hours</th>
       <th>EV Connector Types</th>
       <th>Fuel Type</th>
       <tr ng-repeat=”station in stationList”>
          <td>{{station.city}}</td>
          <td>{{station.name}}</a></td>
          <td>{{station.phone}}</td>
          <td>{{station.street_address}}</td>
          <td>{{station.hours}}</td>
          <td>{{station.ev_connector_types}}</td>
          <td>{{station.fuel_type_code}}</td>
       </tr>
    </table>
 </div>

было сложно понять, но это отличный способ узнать, как рельсы и angular могут работать вместе, используя внешние ресурсы!