【问题标题】：Routing with AngularJS and Slim PHP使用 AngularJS 和 Slim PHP 进行路由
【发布时间】：2014-04-16 23:45:06
【问题描述】：

我一直在使用 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() .'}}'; 
    }
}
?>

App.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 工作，也无法让正确的记录出现。

提前致谢！

【问题讨论】：

您可以使用 js 控制台（在 chrome 中）查看您的前端实际发送给 slim 的内容。您可能使用错误的方法发送 ajax 请求，或者您发送的未定义值是 :id
我还在习惯 Chrome 开发者工具 - 我在哪里可以看到这些信息？
Kent0111 您可以在 Chrome 调试工具的网络选项卡中查看所有网络流量，包括来自请求和响应的标头，以查看您必须单击特定行/请求的详细信息（标头等）在网络选项卡中，然后将看到一个面板，该面板以不同的方式显示请求的部分内容，以便更轻松地找到您要查找的信息。我也使用相同的技术堆栈，它对我来说效果很好，所以我鼓励你继续前进。 Slim 真的简化了服务器端的事情，让我构建适当的类等。
另外我建议您查看 POSTman，它是一个 Chrome 插件，可以让您相对轻松地手动测试与前端分开的后端，理想情况下我会编写 PHPUnit 测试并端到端集成测试，但除此之外，这为您提供了一些方法来测试服务器端部分而不会弄乱 Angular 部分（当您不经常切换齿轮时，有时会更容易）

标签： php jquery mysql angularjs slim

【解决方案1】：

大家好，感谢大家为我诊断问题提供的意见！

使用 chrome 开发人员工具上的网络选项卡，我看到我的代码发送的是“id”而不是变量。

我现在通过简单地将路由参数添加到资源字符串来修改我的控制器。现在似乎工作得很好！谢谢大家

app.js

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

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

        $scope.request = Request.get();
});

【讨论】：

【解决方案2】：

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

初始请求

当用户对您的应用发出初始请求时。它首先通过php逻辑。（例如$app->get('/requests', 'getRequests')）。就我而言，这里 php/后端的工作是两件事：

仅出于 SEO 目的从后端获取数据（大多数爬虫不执行 client-js，因此您需要在将页面发送给用户之前插入该数据）
最重要的是，在您的 Angular 应用程序中提供索引文件以及所有 JS。一旦用户收到，Angular 就会启动，你就可以开始了。

后续请求

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

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

【讨论】：