Hey there! Let's tackle this issue where your products aren't loading after switching from success() to then() in AngularJS. Since you mentioned insert works now but fetching doesn't, here are the most common culprits and actionable fixes to try:

The biggest gotcha when switching from success() to then() is how data is passed:

• success() directly gave you the response data as a parameter
• then() passes a full response object, so you need to access response.data explicitly
• Also, always include an error callback to catch hidden issues you might not see otherwise

Update your fetch function like this:

$http.get('your-product-fetch-endpoint.php')
  .then(function(response) {
    // Assign the actual data to your scope variable
    $scope.products = response.data;
  }, function(error) {
    // Log errors to debug what's going wrong
    console.error('Failed to load products:', error);
  });

Make sure your backend script is returning valid JSON and correctly querying the database. Here's a minimal working example:

<?php
// Database connection
$conn = new mysqli('localhost', 'your-username', 'your-password', 'your-db-name');
if ($conn->connect_error) {
  die(json_encode(['error' => 'Connection failed: ' . $conn->connect_error]));
}

// Fetch products
$result = $conn->query("SELECT * FROM products");
$products = [];
while ($row = $result->fetch_assoc()) {
  $products[] = $row;
}

// Return valid JSON
header('Content-Type: application/json');
echo json_encode($products);

$conn->close();
?>

• Test this endpoint directly in your browser to confirm it returns a valid JSON array of products. If it shows HTML errors or empty output, fix the PHP script first.

Open your browser's DevTools (F12) → go to the Network tab, then reload your page:

• Look for the GET request to your PHP endpoint. Check if it returns a 200 OK status.
• Check the Response tab to see what data is being sent back. If it's empty or malformed, that's the root issue.
• Check the Console tab for any hidden JavaScript errors that aren't showing up in your app.

Ensure your main.html is correctly bound to the scope variable you're updating. For example, if your controller sets $scope.products, your HTML should have something like:

<div ng-controller="YourProductController">
  <div ng-repeat="product in products">
    <h3>{{product.name}}</h3>
    <p>{{product.description}}</p>
  </div>
</div>

• Confirm the ng-controller directive is attached to the right element so the scope is accessible.

If your AngularJS app runs on a different port/domain than your PHP backend, add these headers to your PHP script to allow cross-origin requests:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

(Note: This is less likely since your insert function works, but it's worth checking if all requests are affected.)

内容的提问来源于stack exchange，提问作者Shanto Siddiq