AngularJSとRails4の使用を開始する

次に、レストランのインデックステンプレートを一時的に調整しましょう：

  * {{restaurant.name}} ({{restaurant.id}})

ここで/#/restaurantsに再度アクセスした場合 、どのレストランにもIDがないことに気付くでしょう。なぜ空白なのですか？

Rails 4でスキャフォールディングを生成すると、.jbuilderが得られます。 ファイル：

$ ls -1 app/views/restaurants/*.jbuilder
app/views/restaurants/index.json.jbuilder
app/views/restaurants/show.json.jbuilder

app/views/restaurants/index.json.jbuilderを開いた場合 、これが表示されます：

# app/views/restaurants/index.json.jbuilder

json.array!(@restaurants) do |restaurant|
  json.extract! restaurant, :name
  json.url restaurant_url(restaurant, format: :json)
end

ご覧のとおり、:nameが含まれています ただし、:idではありません 。追加しましょう：

# app/views/restaurants/index.json.jbuilder

json.array!(@restaurants) do |restaurant|
  json.extract! restaurant, :id, :name
  json.url restaurant_url(restaurant, format: :json)
end

ファイルを保存して/#/restaurantsを更新した場合 、IDが表示されるはずです。

次に、テンプレートを元の状態に戻します。

[index](/#)

  * {{ restaurant.name }}

ある時点で、これらをviewRestaurant()と呼ばれるものに向けていることに気付いたかもしれません。 しかし、実際にはviewRestaurant()と呼ばれるものを定義したことはありません。 。今すぐやってみましょう：

# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
  $scope.restaurants = []
  $http.get('./restaurants.json').success((data) ->
    $scope.restaurants = data
  )

  # Add the following lines
  $scope.viewRestaurant = (id) ->
    $location.url "/restaurants/#{id}"
]

Railsの規則では、resource_name/:id 「表示」ページにマップします。これをここで行います。ショーテンプレート、ルート、コントローラーを作成しましょう。

# {{restaurant.name}}

# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
  $routeProvider.
    when('/restaurants', {
      templateUrl: '../templates/restaurants/index.html',
      controller: 'RestaurantIndexCtrl'
    }).
    when('/restaurants/:id', {
      templateUrl: '../templates/restaurants/show.html',
      controller: 'RestaurantShowCtrl'
    }).
    otherwise({
      templateUrl: '../templates/home.html',
      controller: 'HomeCtrl'
    })
])

# app/assets/javascripts/angular/controllers/RestaurantShowCtrl.js.coffee

@restauranteur.controller 'RestaurantShowCtrl', ['$scope', '$http', '$routeParams', ($scope, $http, $routeParams) ->
  $http.get("./restaurants/#{$routeParams.id}.json").success((data) ->
    $scope.restaurant = data
  )
]

ここで、/#/restaurantsを更新すると レストランをクリックすると、そのレストランのショーページが表示されます。イェーイ！