использование данных MYSQL происходит в консоли, но не отображается на страницах HTML

Question

Я создаю CRUD, используя MySQL, Node, AngularJS и Express. Я получаю ответ в консолях, но данные не отображаются на страницах HTML.

Прикрепленное ниже изображение представляет собой список сотрудников, который отображается на странице HTML, а также получает ответы: Отображение всех сотрудников

Чтобы получить подробную информацию о конкретном сотруднике, нажмите кнопку Показать. Но при нажатии кнопки «Показать» данные отображаются на консолях, но не отображаются на страницах HTML: Отображение сведений о сотруднике на основе идентификатора

Код выглядит следующим образом:

show.html

<div class="panel panel-default" ng-init="showEmployee()">
    <div class="panel-heading">
      <p class="panel-title"> Employee Detail Information</p>
    </div>
    <div class="panel-body">
        <form>
        <div class="form-group"  ng-controller="empController">

         <label class="form-control">Name: {{ employee.name }}</label>
         <label class="form-control">Email: {{ employee.email }}</label>
         <label class="form-control">Position: {{ employee.position }}</label>
         <label class="form-control">Contact: {{ employee.contact }}</label>
         <label class="form-control">ID: {{ employee.id }}</label>
        <a href="#/employees" class="btn btn-default"> Cancel</a>
        </div>
    </form>     
    <div>
<div>

app.js

var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl:'templates/list.html',
            controller:'empController'
        })
        .when('/employees', {
            templateUrl:'templates/list.html',
            controller:'empController'
        })
        .when('/employees/create', {
            templateUrl:'templates/add.html',
            controller:'empController'
        })
        .when('/employees/update/:id', {
            templateUrl:'templates/edit.html',
            controller:'empController'
        })
        .when('/employees/:id/show', {
            templateUrl:'templates/show.html',
            controller:'empController'
        });
});

controller.js

myApp.controller('empController', function($scope,$route,$routeParams,$http){
    $scope.getEmployees = function(){
        $http.get('/employees').then(function(response){
                console.log(response)
            $scope.employees = response.data;
        });
    };
    $scope.showEmployee = function(){
        var id = $routeParams.id;
        $http.get('/employees/'+ id).then(function(response){
            console.log(response);
            $scope.employee = response.data;
        });
    };
    $scope.addEmployee = function(){
        $http.post('/employees/create', $scope.employee).then(function(response){
            //$scope.employee = response.data;
            window.location.href = '/';
        });
    };
    $scope.updateEmployee = function(){
        var id = $routeParams.id;
        $http.put('/employees/update/'+ id , $scope.employee).then(function(response){
            window.location.href = '/';
        });
    };
    $scope.deleteEmployee = function(id){
        var id = id;
        $http.delete('/employees/'+ id).then(function(response){
            $route.reload();
        });
    };

});

server.js

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var mysql = require('mysql');


app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/client'));

//start mysql connectio 
var connection = mysql.createConnection({
    host:'localhost',
    user: 'root',
    password:'12345',
    database:'Employee'

});
connection.connect(function(err) {
  if (err) throw err
  console.log('You are now connected...')
})
//end mysql connectionselected

app.get('/employees', function(req, res){

            connection.query("SELECT * FROM employees", function(err,results) {
                if(err){
                    console.log(err);
                    res.json({"error": true});
                }
                else{
                    console.log(results);
                    res.end(JSON.stringify(results));

                }
            })
        //}
    //})
});

app.get('/employees/:id', function(req, res){
     console.log(req);
   connection.query('select * from employees where id=?', [req.params.id], function (error, results, fields) {
      if (error) throw error;
      console.log(results);
      res.end(JSON.stringify(results));
    });
});
app.post('/employees/create', function(req, res){
     var postData  = req.body;
   connection.query('INSERT INTO employees SET ?', postData, function (error, results, fields) {
      if (error) throw error;
      res.end(JSON.stringify(results));
    });
});

app.delete('/employees/:id', function(req, res){
    console.log(req.body);
   connection.query('DELETE FROM `employees` WHERE `id`=?', [req.body.id], function (error, results, fields) {
      if (error) throw error;
      res.end('Record has been deleted!');
    });
});
app.put('/employees/update/:id', function(req, res){
    app.put('/employees', function (req, res) {
   connection.query('UPDATE `employees` SET `name`=?,`email`=?,`position`=?,`contact`=? where `id`=?', [req.body.name,req.body.email, req.body.position, req.body.contact, req.body.id], function (error, results, fields) {
      if (error) throw error;
      res.end(JSON.stringify(results));
    }) 
    });
});
app.listen(3000, function(){
    console.log('server is running on port 3000..');
});

Может кто-нибудь помочь мне? Заранее спасибо

Answer 1

$scope.showEmployee = function(){
    var id = $routeParams.id;
    $http.get('/employees/'+ id).then(function(response){
        console.log(response);
        // $scope.employee = response.data;
        $scope.employee = response.data[0];
    });
};