3
저는 AngularJS와 함께 일해 왔고 저는 그것에 어플리케이션을 연결하려고합니다.AngularJS와 Slim PHP로 라우팅하기
지금까지 Slim PHP를 사용하여 MySql 데이터베이스에서 모든 레코드를 가져올 수 있지만 특정 레코드를 가져올 수 없습니다. PHP 코드를 작성하고 "../requests/#"로 이동하여 올바른 ID 레코드의 JSON 응답을 얻을 수 있습니다. 내가 할 수없는 것은 인터페이스와 함께 작동하는 것이다. 아래 코드를 사용하여 요청 목록을 만들고 viewRequest.html을 열고 싶은 목록을 클릭 할 수 있습니다. 그러나 내보기 요청 페이지는 항상 첫 번째 레코드를 가져오고 URL의 레코드는 가져 오지 않습니다.
슬림 - 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 콘솔을 사용할 수 있습니다 app.js. 잘못된 방법으로 Ajax 요청을 보내거나 정의되지 않은 값을 다음과 같이 보내고 있습니다. id – amenadiel
Chromes 개발자 도구에 익숙해 져 있는데 -이 정보는 어디서 볼 수 있습니까? – Kent0111
Kent0111 Chrome 디버깅 도구의 네트워크 탭에서 요청 및 응답의 헤더를 비롯한 모든 네트워크 트래픽을 볼 수있어 네트워크 탭에서 특정 행/요청을 클릭해야만하는 세부 정보 (예 : 헤더 등)를 볼 수 있습니다. 원하는 정보를 쉽게 찾을 수 있도록 여러 가지 방법으로 레이아웃 된 패널을 참조하십시오. 또한 저는 같은 기술 스택을 사용하고 있으며 제게 정말 잘하고 있습니다. 앞으로 계속해서 격려해 주시기 바랍니다. Slim은 실제로 서버 측을 단순화하고 적절한 클래스 등을 만들 수있게 해줍니다. – shaunhusain