「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。前回作成したホームページのマイクロポスト一覧をページ化します。

１）ビューを修正
　
$ vi app/assets/templates/static_pages/home.html.erb

<div ng-controller="HomeCtrl">
  <div ng-show="chkSignin().user.id > 0" class="row">
    <div class="col-sm-4">
　　：
    </div>
    <div class="col-sm-8">
      <h3>Micropost Feed</h3>
      <ol class="microposts">
        <li ng-repeat="mp in currentitems">
　　　　：
        </li>
      </ol>
      <pagination total-items="totalitems"
                  ng-model="currentpage"
                  max-size="maxsize"
                  items-per-page="itemsperpage"
                  class="pagination-sm"
                  previous-text="Previous"
                  next-text="Next"
                  first-text="First"
                  last-text="Last"
                  boundary-links="true">
      </pagination>
    </div>
  </div>

　
２）コントローラを修正
　
①ユーザー一覧、マイクロポスト一覧の場合と同様にページ化に関する定数、変数を設定。
　
②マイクロポスト登録時に最新のユーザー情報を取得し、feedを更新。
　
$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource, $filter) {
　　：
  $scope.submit = function() {
    function success(response) {
      sessionResource.current_user({}, function(response1) {
        var current_user = response1;
//②マイクロポスト登録時に最新のユーザー情報を取得し、feedを更新
        $scope.totalitems = current_user.feed.length;
        feed_items = $filter('orderBy')(current_user.feed,'created_at',true);
        $scope.currentitems = feed_items.slice(start,end);
        flashService.setUser(current_user);
      });
      flashService.push(msg);
      $scope.$emit("$routeChangeSuccess");
    }
    function failure(response) {
　　　　：
    }
    micropostsResource.create($scope.micropost, success, failure);
  };
　　　　：
//①ページ化の設定
  var feed_items = [];
  $scope.maxsize = 5;
  $scope.itemsperpage = 8;
  $scope.currentpage = 1;
  var start = 0;
  var end = start + $scope.itemsperpage;
  sessionResource.current_user({}, function(response) {
    if (response.feed) {
      var tmp_feed = response.feed;
      $scope.totalitems = tmp_feed.length;
      feed_items = $filter('orderBy')(tmp_feed,'created_at',true);
      $scope.currentitems = feed_items.slice(start,end);
    }
  });
  $scope.$watch('currentpage', function() {
    start = ($scope.currentpage - 1) * $scope.itemsperpage;
    end = start + $scope.itemsperpage;
    $scope.currentitems = feed_items.slice(start,end);
  },true);

});