Routing with AngularJS and Slim PHP

Question

I have been working with AngularJS and I am trying to connect my application to it.

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.

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>

Please assist, I am close to getting this but I cannot get routeParams to work nor can I get the right record to appear.

Thanks in advance!

Answer 1

Hey everyone thanks for the input I was able to diagnose the issue!

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.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();
});

Answer 2

I'm not using php but rather NodeJs. However, this is what I've noticed when using routing with AngularJs and the backend.

The Initial Request

When a user will makes an initial request for your app. It goes through the php logic first. (e.g. $app->get('/requests', 'getRequests')). In my case The job of the php/back-end here is two things:

• Get data from back-end for SEO purposes-only (most crawlers don't execute client-js so you need to insert that data before you send the page to the user)

• Most Importantly, give the index file on your angular app along with all the JS. Once the user receives that, Angular bootstraps and you're good to go.

Subsequent Requests

Once the user has loaded your Angular app. The server (php) knows nothing about how the user navigates within your angular app. Remember, angular is client-side and tries to reduce the number of request to the server. When the user navigates to "(#)/requests/1234" it will fire the .when('/requests/:id' route but not the $app->get('/requests/:id', 'getRequest');. If you want to access an endpoint that gets data from your db, you need to use the $http service within angular and do something like this $http.get('requests/1234') and get the data that way.

Let me know if this wasn't clear, upvote/accept if it was :)