AngularJS: making a page for a single post

Viewed 85

I'm making a blogging app in AngularJS. I have a home page, where all posts are displayed, but I also want to be able to click on a post and go to its page. The data is stored in a MySQL database.

Posts displayed on the home page:

<ul>
    <li ng-repeat="post in posts track by $index" id="content">
    <h1><a href="#!/post/{{post.id}}">{{ post.title }}</a></h1>
    </br>
    <h2>{{ post.content }}</h2>
    </li>
  </ul>

The page of a singular post:

<h1>{{ post.title }}</h1>
</br>
<h2>{{ post.content }}</h2>

Data fetching through PHP in addremove.php (used by the home page):

if($request_type == 1){
  $stmt = $con->prepare("SELECT * FROM posts");
  $stmt->execute();
  $result = $stmt->get_result();
  $data = array();
  if($result->num_rows > 0){
     while($row = $result->fetch_assoc()) {
            $data[] = array("id"=>$row['id'],"title"=>$row['title'],"content"=>$row['content']);
     }
  }

  $stmt->close();
  echo json_encode($data);
  exit;
}

Data passed through the home page controller (HomeController):

$http({
  method: 'post',
  url: 'addremove.php',
  data: {request_type:1},

 }).then(function successCallback(response) {
  $scope.posts = response.data;
 });

I'm having trouble with the controler of the single post (SinglePostController). I don't know how to display only a single post by its id. I tried the following:

blogApp.controller('SinglePostController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams){
    $http({
  method: 'post',
  url: 'getSinglePost.php',
  data: {
        request_type:1,
        id: $routeParams.postid
    },

 }).then(function successCallback(response) {
  $scope.posts = response.data;
 });
    }]);

I've made a getSinglePost.php file like this:

<?php
    include 'config.php';

     $post = json_decode(file_get_contents("php://input"));
     $id = $post->id;

     $request_type = $data->request_type;

     if($request_type == 1){
       $stmt = $con->prepare("SELECT * FROM posts");
       $stmt->execute();
       $result = $stmt->get_result();
       $data = array();
       if($result->num_rows > 0){
          while($row = $result->fetch_assoc()) {
                 $data[] = array("id"=>$row['id'],"title"=>$row['title'],"content"=>$row['content']);
          }
       }

       $stmt->close();
       echo json_encode($data);
       exit;
     }
?>
1 Answers

Home page

  • post 1
  • post 2

When I click post 2, it goes to /#/!/post/2

in the single-post state config

$routeProvider.when('/post/:postid', {
 // this is how to set the variable for the post id
     controller: 'SinglePostController'
                    

In the single blog page controller

blogApp.controller('SinglePostController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams){
$http({
  method: 'post',
  url: 'getSinglePost.php',
  data: {
    request_type:1,
    id: $routeParams.postid
  },

 }).then(function successCallback(response) {
  $scope.post = response.data;
 });

then in your PHP

 <? // getSinglePost.php
     $post = json_decode(file_get_contents("php://input"));
     $id = $post->id;

// get single blog info from database and echo it back with json_encode()
Related