AngularJS Check Data from MySQL with ID

Question

I have a problem with AngularJS / Routing. I want to , check data from mysql with post id. I have 2 pages : posts.html and read.html.

posts.html :

<div class = 'posts'>
<ul>
    <li ng-repeat="post in posts"><a href="">{{post.title}}</a></li>
</ul>

Read.html

<div class = 'readpage'>
   //I dont have any idea how can i write this page.
</div>

App.js :

var App = angular.module("angularApp",["ui.router"]);


App.config(function($stateProvider,$urlRouterProvider){

$stateProvider
.state('posts',{
    url : '/posts',
    templateUrl : 'views/posts.html'
})
.state('read',{
    url : 'post/:postid',
    templateUrl : 'views/read.html'
})

  });

 App.controller("mainController",function($scope,$http){

     $http.post('db.php').then(function(response){
          $scope.posts = response.data;
     });
  });

dp.php

  <?php
  $conn = mysqli_connect("localhost","root","lenovo123","angular");
  $query = mysqli_query($conn,"SELECT * FROM posts");
  $data_array = array();
  while($fetch = mysqli_fetch_array($query)){
   $data_array[]  = $fetch;
 }

  print json_encode($data_array);

 ?>

Columns : id , title , body , author.

Can you be more specific about your need ? You want to click on the link on the page "post" and display the result in the page "read" ? — lakhassane, Feb 11 '18 at 23:38

ved0 · Accepted Answer · 2018-02-12T10:25:18.927

If I understood this correctly, you want to load a list of posts in your posts.html (posts state) and after one of those posts is clicked you want to redirect to read.html (reads state). You could do the following:

var App = angular.module("angularApp",["ui.router"]);

App.config(function($stateProvider,$urlRouterProvider){

$stateProvider
.state('posts',{
    url : '/posts',
    templateUrl : 'views/posts.html',
    controller: 'mainController as vm'
    resolve: {
      posts: ['$http','$q',function($http, $q){
      //This call should be transfered to a service (create a new factory that will handle all of your communication to backend services)
          var deferred = $q.defer();

          $http.post('db.php').then(function(response){
               deferred.resolve(response.data);
           }).catch(function(err){
               deferred.reject();
           });

           return deferred.promise;
      }]
    }
})
.state('read',{
    url : 'post/:postid',
    templateUrl : 'views/read.html',
    controller: 'postController as vm',
    resolve: {
      post: ['http','$q','$stateParams', function($http, $q, $stateParams){
      //Make a new call that will get your post by the post id provided in the state params ( **this is the post selected on posts state** ) - replace the test.php with a proper query that will get you the wanted post

      var deferred = $q.defer();

      //Something like the following:
      $http.post('test.php', $stateParams.postid).then(function(response){
           deferred.resolve(response.data);
       }).catch(function(err){
           deferred.reject();
       });

       return deferred.promise;
      }]
    }
})

  });

And then in mainController ( I would name this controller postsController) you just inject the posts that you have previously acquired on state resolve

 App.controller("mainController",function($scope,$http, posts){
    var vm = this;
    vm.posts = posts;
  });

And in your posts.html view:

 <div class = 'posts'>
 <ul>
    <li ng-repeat="post in vm.posts"><a ui-sref="read({postid: post.id})">{{post.title}}</a></li>
 </ul>

With this approach you can remove the following line to avoid double initialization if you have it in your view:

<div ng-controller="mainController"></div>

Then you can create a new controller that will be executed on read state:

 App.controller("postController",function($scope,$http, post){
    var vm = this;
    vm.post = post;
  });

And in your read.html view:

<div class = 'readpage'>
   <div>{{vm.post.id}}</div>
   <div>{{vm.post.title}}</div>
   <div>{{vm.post.body}}</div>
   <div>{{vm.post.author}}</div>
</div>

Hope this helps.

If you are not familiar with the "controllerAs" syntax please check out the following: Angular 1 Style Guide

Thanks for answer , it worked. But i new at AngularJS. And didn't understand some parts of app.js. Don't have it's easier version ? For example , can we do this with $state.go() ? :) — jahangir_kazimli, Feb 12 '18 at 11:08
Sure you can. If you want to use that approach then you just need to replace ui-sref="read({postid: post.id})" with: ng-click="vm.changeState(post.id)". And in your mainController add a new method: vm.changeState = function (postId) { $state.go('read', { postid: postId }); }; Or if you dont't want to use controllerAs syntax just do it like this: ng-click="changeState(post.id)" And in your mainController add a new method: $scope.changeState = function (postId) { $state.go('read', { postid: postId }); }; — ved0, Feb 12 '18 at 11:42
Hello there everyone..I've tried this solution so far its working fine, am getting the posts with links which have ids on them. But the problem am facing is I cant make them to direct me to read.html. I've opened question here [link](https://stackoverflow.com/questions/58354471/click-post-link-to-display-full-results-on-another-page). Please help — gxvr, Oct 15 '19 at 10:00

AngularJS Check Data from MySQL with ID

1 Answers1