Question

我对AngularJS / Routing有问题。我想，用post id检查mysql中的数据。我有2页：posts.html和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);

 ?>

列：id，title，body，author。

Answer 1

如果我理解正确，你想加载posts.html（帖子状态）中的帖子列表，点击其中一个帖子后你想重定向到read.html（读取状态）。您可以执行以下操作：

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;
      }]
    }
})

  });

然后在mainController中（我将这个控制器命名为postsController）你只是注入你之前在状态解析中获得的帖子

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

在你的posts.html视图中：

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

使用这种方法，您可以删除以下行，以避免在视图中显示双重初始化：

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

然后您可以创建一个将在读取状态下执行的新控制器：

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

在您的read.html视图中：

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

希望这有帮助。

如果你不熟悉＆＃34; controllerAs＆＃34;语法请查看以下内容：Angular 1 Style Guide

AngularJS使用ID检查MySQL中的数据

1 个答案: