与AngularJS和超薄的PHP路由 [英] Routing with AngularJS and Slim PHP
问题描述
我一直在与AngularJS，我想我的应用程序连接到它。
I have been working with AngularJS and I am trying to connect my application to it.
到目前为止，我已经使用超薄的PHP，可以从我的MySQL数据库中获取的所有记录，但我没能得到一个特定的记录。我已经写了PHP code和可以定位到../requests/#，并获得正确的ID记录的JSON响应。我不能得到的是它与接口工作。随着code下面我可以创建请求的列表，点击一个我想开viewRequest.html。不过我的看法申请页面总是带来了在URL中的第一条记录，而不是记录。
So far I have used Slim PHP and can get all records from my MySql database but I am not able to get a specific record. I have written the PHP code and can navigate to "../requests/#" and get a JSON response of the correct ID record. What I cant get is it to work with the interface. With the code below I can create a list of requests and click on the one I want to open viewRequest.html. However my view request page ALWAYS brings up the first record and not the record in the URL.
<?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上班我也不能得到显示正确的记录。
Please assist, I am close to getting this but I cannot get routeParams to work nor can I get the right record to appear.
在此先感谢！
推荐答案
大家好感谢输入我能诊断问题！
Hey everyone thanks for the input I was able to diagnose the issue!
我看到我的code的发送字ID，而不是一个变量。
using the network tab on chrome developer tools I saw that my code was sending the word "id" and not a variable.
我现在已经通过简单地增加我的路由参数到资源字符串修改我的控制器。似乎现在的工作太棒了！谢谢大家。
I have now modified my controller by simply adding my route parameters onto the resource string. Seems to be working great now! Thank you everyone
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();
});
这篇关于与AngularJS和超薄的PHP路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
