Angular单页应用：获取服务器数据后如何在页面展示？

Hey there! I notice you’ve got the basic $http.get setup in your controller, but you’re missing the critical piece to get that fetched data showing up on your page. Let’s walk through the fixes step by step:

1. Store the Fetched Data in $scope #

First, you need to assign the data from the server response to a $scope variable so your view can access it. Update your success callback to save the response data:

app.controller('myController', function($scope, $http) {
  $scope.target = 'targetURL';
  $scope.fetchedData = {}; // Initialize an empty object to hold your data

  $scope.clickFunction = function() {
    $http.get($scope.target)
      .then(function successCall(response) {
        // Assign the server's response data to $scope
        $scope.fetchedData = response.data;
        // Optional: Log the data to verify it's coming through
        console.log('Fetched data:', response.data);
      }, function errorCall(error) {
        // Don't forget to handle errors!
        console.error('Error fetching data:', error);
      });
  };
});

2. Bind the Data to Your View #

Now you can use Angular's data binding to display the data in your HTML. How you do this depends on the structure of your data:

If your data is a single object: #

<div ng-controller="myController">
  <button ng-click="clickFunction()">Fetch Data</button>
  <!-- Display properties of the fetched object -->
  <div ng-if="fetchedData">
    <h3>Fetched Data:</h3>
    <p>Name: {{fetchedData.name}}</p>
    <p>Description: {{fetchedData.description}}</p>
  </div>
</div>

If your data is an array of objects: #

<div ng-controller="myController">
  <button ng-click="clickFunction()">Fetch Data</button>
  <ul ng-if="fetchedData.length">
    <li ng-repeat="item in fetchedData">
      {{item.name}} - {{item.value}}
    </li>
  </ul>
</div>

Quick Troubleshooting Tips #

• Verify the API response: Check your browser's DevTools Network tab to make sure the targetURL is returning valid JSON data.
• Check for errors: The error callback is there for a reason—use console.error to log any HTTP errors (like 404 or 500 status codes).
• Initialize variables: Starting with an empty object/array ($scope.fetchedData = {} or []) prevents Angular from throwing errors before the data is loaded.

That should get your data showing up on the page in no time!

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