{"id":1154,"date":"2015-08-05T07:08:52","date_gmt":"2015-08-05T07:08:52","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1154"},"modified":"2015-08-05T07:08:52","modified_gmt":"2015-08-05T07:08:52","slug":"microposts-feed-pagination-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/microposts-feed-pagination-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial microposts feed pagination with AngularJS"},"content":{"rendered":"

1)AngularJS template view<\/strong><\/p>\r\n\r\n

$ vi app\/assets\/templates\/static_pages\/home.html.erb<\/p>\r\n\r\n

\r\n<div ng-controller="HomeCtrl">\r\n  <div ng-show="chkSignin().user.id > 0" class="row">\r\n    <div class="col-sm-4">\r\n.......\r\n    <\/div>\r\n    <div class="col-sm-8">\r\n      <h3>Micropost Feed<\/h3>\r\n      <ol class="microposts">\r\n        <li ng-repeat="mp in currentitems">\r\n...........\r\n        <\/li>\r\n      <\/ol>\r\n      <pagination total-items="totalitems"\r\n                  ng-model="currentpage"\r\n                  max-size="maxsize"\r\n                  items-per-page="itemsperpage"\r\n                  class="pagination-sm"\r\n                  previous-text="Previous"\r\n                  next-text="Next"\r\n                  first-text="First"\r\n                  last-text="Last"\r\n                  boundary-links="true">\r\n      <\/pagination>\r\n    <\/div>\r\n  <\/div><\/pre>\r\n\r\n
2)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource, $filter) {\r\n....\r\n  $scope.submit = function() {\r\n    function success(response) {\r\n      sessionResource.current_user({}, function(response1) {\r\n        var current_user = response1;\r\n        $scope.totalitems = current_user.feed.length;\r\n        feed_items = $filter('orderBy')(current_user.feed,'created_at',true);\r\n        $scope.currentitems = feed_items.slice(start,end);\r\n        flashService.setUser(current_user);\r\n      });\r\n      flashService.push(msg);\r\n      $scope.$emit("$routeChangeSuccess");\r\n    }\r\n    function failure(response) {\r\n........\r\n    }\r\n    micropostsResource.create($scope.micropost, success, failure);\r\n  };\r\n.........\r\n  var feed_items = [];\r\n  $scope.maxsize = 5;\r\n  $scope.itemsperpage = 8;\r\n  $scope.currentpage = 1;\r\n  var start = 0;\r\n  var end = start + $scope.itemsperpage;\r\n  sessionResource.current_user({}, function(response) {\r\n    if (response.feed) {\r\n      var tmp_feed = response.feed;\r\n      $scope.totalitems = tmp_feed.length;\r\n      feed_items = $filter('orderBy')(tmp_feed,'created_at',true);\r\n      $scope.currentitems = feed_items.slice(start,end);\r\n    }\r\n  });\r\n  $scope.$watch('currentpage', function() {\r\n    start = ($scope.currentpage - 1) * $scope.itemsperpage;\r\n    end = start + $scope.itemsperpage;\r\n    $scope.currentitems = feed_items.slice(start,end);\r\n  },true);\r\n\r\n});<\/pre>\r\n","protected":false},"excerpt":{"rendered":"
1)AngularJS template view $ 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> 2)AngularJS controller $ vi app\/assets\/javascripts\/mymodule.js.erb myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource, $filter) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,182,178,172],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1154"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1154"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1154\/revisions"}],"predecessor-version":[{"id":1155,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1154\/revisions\/1155"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1154"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}