Проект php angularJS не отображает данные в простой HTML-таблице

Я новичок в Php и AngularJS … Я следовал 2 интересным урокам по этим ссылкам:

https://www.roytuts.com/rest-api-crud-example-in-php-mysql/

https://www.roytuts.com/angularjs-php-rest-crud-example/

Первый работает без сбоев, второй не показывает данные базы данных в таблице HTML, не знаю почему.

После всех файлов проекта:
Файл db.php

<?php

class Db {

private $host = "localhost";
private $db_name = "crudtests";
private $username = "root";
private $password = "";
public $conn;

// get the database connection
public function getConnection() {
$this->conn = null;

try {
$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
$this->conn->exec("set names utf8");
} catch (PDOException $exception) {
echo "Database connection error: " . $exception->getMessage();
}

return $this->conn;
}

}

?>

Файл отдела.php

<?php

/**
* Description of Department
*
* @author
*/
class Department
{

// database connection and table name
private $conn;

private $table_name = "department";

// object properties
public $id;

public $name;

// constructor with $db as database connection
public function __construct($db)
{
$this->conn = $db;
}

// reads all departments
function read()
{
// query to select all
$query = "SELECT d.dept_id, d.dept_name
FROM
" . $this->table_name . " d
ORDER BY
d.dept_id";
// prepare query statement
$stmt = $this->conn->prepare($query);
// execute query
$stmt->execute();
return $stmt;
}

// create department
function create()
{
// query to insert record
$query = "INSERT INTO
" . $this->table_name . "SET
dept_name=:name";

// prepare query
$stmt = $this->conn->prepare($query);

// sanitize
$this->name = htmlspecialchars(strip_tags($this->name));

// bind values
$stmt->bindParam(":name", $this->name);

// execute query
if ($stmt->execute()) {
return true;
} else {
return false;
}
}

// update the department
function update()
{
// update query
$query = "UPDATE
" . $this->table_name . "SET
dept_name = :name
WHERE
dept_id = :id";

// prepare query statement
$stmt = $this->conn->prepare($query);

// sanitize
$this->name = htmlspecialchars(strip_tags($this->name));
$this->id = htmlspecialchars(strip_tags($this->id));

// bind new values
$stmt->bindParam(':name', $this->name);
$stmt->bindParam(':id', $this->id);

// execute the query
if ($stmt->execute()) {
return true;
} else {
return false;
}
}

// delete the department
function delete() {
// delete query
$query = "DELETE FROM " . $this->table_name . " WHERE dept_id = ?";

// prepare query
$stmt = $this->conn->prepare($query);

// sanitize
$this->id = htmlspecialchars(strip_tags($this->id));

// bind id of record to delete
$stmt->bindParam(1, $this->id);

// execute query
if ($stmt->execute()) {
return true;
}

return false;
}
}

?>

Файл read.php

<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

// include database and object files
require_once '../../config/db.php';
require_once 'Department.php';

// instantiate database and department object
$database = new Db();
$db = $database->getConnection();

// initialize object
$department = new Department($db);

// query department
$stmt = $department->read();
$num = $stmt->rowCount();

// check if more than 0 record found
if ($num > 0) {
// department array
$department_arr = array();
$department_arr["records"] = array();

// retrieve table contents
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
// extract row
extract($row);
$department_item = array(
"id" => $row['dept_id'],
"name" => $row['dept_name']
);
array_push($department_arr["records"], $department_item);
}
echo json_encode($department_arr);
} else {

echo json_encode(array(
"message" => "No products found."));
}
?>

Файл app.js

/**
* New module creation
*/

'use strict';

var app = angular.module('myCrudApp', []);

Файл DepartmentController.js

/**
*  Controller to handle user’s request/response
*/

'use strict';

angular.module('myCrudApp').controller('DepartmentController', ['$scope', 'DepartmentService', function($scope, DepartmentService) {
var self = this;
self.department = { id: null, name:'' };
self.departments = [];

self.submit = submit;
self.edit = edit;
self.remove = remove;
self.reset = reset;


findAllDepartments();

function findAllDepartments(){
DepartmentService.findAllDepartments()
.then(
function(d) {
self.departments = d;
},
function(errResponse){
console.error('Error while fetching departments');
}
);
}

function createDepartment(department){
DepartmentService.createDepartment(department)
.then(
findAllDepartments,
function(errResponse){
console.error('Error while creating department');
}
);
}

function updateDepartment(department){
DepartmentService.updateDepartment(department)
.then(
findAllDepartments,
function(errResponse){
console.error('Error while updating department');
}
);
}

function deleteDepartment(id){
DepartmentService.deleteDepartment(id)
.then(
findAllDepartments,
function(errResponse){
console.error('Error while deleting department');
}
);
}

function submit() {
if(self.department.id===null){
console.log('Saving New Department', self.department);
createDepartment(self.department);
}else{
updateDepartment(self.department);
console.log('Department updated with id ', self.department.id);
}
reset();
}

function edit(id){
console.log('id to be edited', id);
for(var i = 0; i < self.departments.length; i++){
if(self.departments[i].id === id) {
self.department = angular.copy(self.departments[i]);
break;
}
}
}

function remove(id){
console.log('id to be deleted', id);
if(self.department.id === id) {//clean form if the department to be deleted is shown there.
reset();
}
deleteDepartment(id);
}


function reset(){
self.department={id:null, name:''};
$scope.myForm.$setPristine(); //reset Form
}

}]);

Файл DepartmentServices.php

/**
* AngularJS service to communicate with Server
*/

'use strict';

angular.module('myCrudApp').factory('DepartmentService', ['$http', '$q', function($http, $q){

var REST_SERVICE_URI = 'http://localhost/workspace/crudRestEsempio2/';

var factory = {
findAllDepartments: findAllDepartments,
createDepartment: createDepartment,
updateDepartment: updateDepartment,
deleteDepartment: deleteDepartment
};

return factory;

function findAllDepartments() {
var deferred = $q.defer();
$http.get(REST_SERVICE_URI+'restObjects/department/read.php')
.then(
function (response) {
deferred.resolve(response.data);
},
function(errResponse){
console.error('Error while fetching departments');
deferred.reject(errResponse);
}
);
return deferred.promise;
}

function createDepartment(department) {
var deferred = $q.defer();
$http.post(REST_SERVICE_URI+'restObjects/department/create.php', department)
.then(
function (response) {
deferred.resolve(response.data);
},
function(errResponse){
console.error('Error while creating department');
deferred.reject(errResponse);
}
);
return deferred.promise;
}


function updateDepartment(department) {
var deferred = $q.defer();
$http.put(REST_SERVICE_URI+'restObjects/department/update.php', department)
.then(
function (response) {
deferred.resolve(response.data);
},
function(errResponse){
console.error('Error while updating department');
deferred.reject(errResponse);
}
);
return deferred.promise;
}

function deleteDepartment(id) {
var deferred = $q.defer();
$http.delete(REST_SERVICE_URI+'restObjects/department/delete.php?id='+id)
.then(
function (response) {
deferred.resolve(response.data);
},
function(errResponse){
console.error('Error while deleting department');
deferred.reject(errResponse);
}
);
return deferred.promise;
}

}]);

У кого-нибудь есть терпение помочь мне найти что не так?

Я использовал некоторые console.log() функции для отладки и JSON-данные прекрасно возвращаются страницей «read.php».

Я не сообщаю о файлах create.php, update.php и delete.php, потому что они не важны. (К сведению, HTML-страница успешно создает новые записи в базе данных, используя кнопку «Добавить», поэтому это не проблема подключения к базе данных).