我一直在使用 AngularJS，我正在尝试将我的应用程序连接到它。

到目前为止，我已经使用了 Slim PHP，并且可以从我的 MySql 数据库中获取所有记录，但我无法获取特定记录。我已经编写了 PHP 代码，可以导航到“../requests/#”并获得正确 ID 记录的 JSON 响应。我不能得到的是它与界面一起工作。使用下面的代码，我可以创建一个请求列表，然后单击我想要打开 viewRequest.html 的请求。但是，我的查看请求页面总是显示第一条记录，而不是 URL 中的记录。

Slim - Index.PHP

<?php

require 'Slim/Slim.php';
\Slim\Slim::registerAutoloader();

use Slim\Slim;

$app = new Slim();
$app->get('/requests', 'getRequests');

$app->get('/requests/:id',  'getRequest');

$app->post('/add_request', 'addRequest');

$app->run();

function getRequests() {
  $sql = "select * FROM change_request ORDER BY id";
  try {
    $db = getConnection();
    $stmt = $db->query($sql);  
    $requests = $stmt->fetchAll(PDO::FETCH_OBJ);
    $db = null;
    echo json_encode($requests);
  } catch(PDOException $e) {
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
  }
}

function getRequest($id) {
    $sql = "SELECT * FROM change_request WHERE ID=$id";
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql); 
        $stmt->execute();
        $request = $stmt->fetchObject();  
        $db = null;
        echo json_encode($request); 
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}
?>

应用程序JS

var app = angular.module('changeControlApp', [
    'ngRoute',
    'ngResource'
]);

app.config(function($routeProvider, $locationProvider) {


    $routeProvider
        .when('/',                      {templateUrl: 'app/partials/requestList.html', controller: 'viewController' })
        .when('/requests',              {templateUrl: 'app/partials/requestList.html', controller: 'viewController' })
        .when('/createRequest',         {templateUrl: 'app/partials/viewRequests.html', controller: 'createRequestController' })
        .when('/settings',              {templateUrl: 'app/partials/settings.html', controller: 'settingsController'})
        .when('/requests/:id',          {templateUrl: 'app/partials/viewRequests.html', controller: 'viewRequestController' })
        .otherwise({ redirectTo: '/' });         
});

    app.controller('mainController', function($scope) {
        // create a message to display in our view
        $scope.message = 'Everyone come and see how good I look!';
});

    app.controller('viewRequestController', function($scope, $location, $route, $routeParams, $resource) {
        $scope.message = 'Pow!';
        $scope.header = 'View Change Request';

        var request_Id = $routeParams.requestId;
        var Request = $resource('http://pdgrosit02v/changeRequest/app/api/requests/id', { id: request_Id });

        $scope.request = Request.get();

});


    app.controller('viewController', function($resource, $scope, $location, $route) {

        var Requests = $resource('http://pdgrosit02v/changeRequest/app/api/requests'); 

        $scope.requests = Requests.query();

    });   

viewRequests.HTML

<div class="container-fluid" >
    <form class="form-horizontal" role="form">

        <div class="form-group">
            <div class="text-center">
                <h1>{{ header }}</h1>
                <p>{{ message }}</p>
                <p>{{ target }}</p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">Id:</label>
            <div class="col-sm-4">
                <input name="id" class="form-control" type="text" value="{{request.ID}}" disabled />
            </div>
            <label class="col-sm-2 control-label">Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{request.Date_Submitted}}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Change Initiator:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Change_Initiator }}" required/>
            </div>
            <label class="col-sm-2 control-label">Risk Level:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Risk_Level }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">CI Details:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Change_Initiator_id }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Requestor:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Requestor }}" required/>
            </div>
            <label class="col-sm-2 control-label">Systems Affected:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request. }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Implemented By:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request. }}" required/>
            </div>
            <label class="col-sm-2 control-label">Implementation Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{ request. }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Close Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{ request. }}"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">Work to be Performed:</label>
            <div class="col-sm-4">
                <textarea name="request.description" required>{{ request.Work_to_be_performed }}</textarea>
            </div>
            <label class="col-sm-2 control-label">Backout Plan:</label>
            <div class="col-sm-4">
            <textarea name="request.description" required>{{ request.Backout_Plan }}</textarea>
            </div>
        </div>

        <div class="form-group">
            <button class="edit" ng:click="editRequest()">Edit</button>
            <button class="save" ng:click="saveRequest()">Save</button>    
            <button class="approve" ng:click="approveRequest()">Approve</button> 
        </div>

    </form>
</div>

请协助，我快要搞定了，但我无法让 routeParams 工作，也无法让正确的记录出现。

提前致谢!

最佳答案

我使用的不是 php，而是 NodeJs。然而，这是我在使用 AngularJs 和后端路由时注意到的。

初始请求

当用户对您的应用发出初始请求时。它首先通过 php 逻辑。 (例如 $app->get('/requests', 'getRequests'))。在我的例子中，php/后端的工作是两件事:

• 仅出于 SEO 目的从后端获取数据(大多数爬虫不执行 client-js，因此您需要在将页面发送给用户之前插入该数据)

• 最重要的是，在您的 Angular 应用程序中提供索引文件以及所有 JS。一旦用户收到它，Angular 就会启动，您就可以开始了。

后续请求

一旦用户加载了您的 Angular 应用程序。服务器 (php) 对用户如何在您的 Angular 应用程序中导航一无所知。请记住，angular 是客户端，并试图减少对服务器的请求数量。当用户导航到“(#)/requests/1234”时，它将触发 .when('/requests/:id' 路由，但不会触发 $app->get('/requests/:id', 'getRequest');。如果你想访问从你的数据库中获取数据的端点，你需要在 Angular 中使用 $http 服务并做一些事情像这样 $http.get('requests/1234') 并以这种方式获取数据。

如果不清楚请告诉我，如果是的话请投票/接受 :)

关于php - 使用 AngularJS 和 Slim PHP 进行路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22358333/