如何在AngularJS中从带查询字符串的REST API获取并展示数据

嘿，这个需求用AngularJS来实现其实挺简单的，我给你拆解成几个步骤，跟着做就行：

第一步：引入必要的依赖文件 #

首先得在页面里引入AngularJS核心库，还有Bootstrap的CSS（毕竟你的表格用了Bootstrap的样式类，要让样式生效）。把这段代码放在页面的<head>标签里：

<head>
  <!-- 引入AngularJS稳定版 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- 引入Bootstrap CSS，让表格样式正常显示 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>

第二步：编写AngularJS应用与控制器 #

接下来要定义你的AngularJS应用模块，然后在控制器里用$http服务去请求API数据，把数据绑定到作用域上供视图使用：

<script>
// 定义名为myApp的AngularJS应用
var app = angular.module('myApp', []);

// 绑定myController控制器到应用上
app.controller('myController', function($scope, $http) {
  // 初始化数据数组，用来存储API返回的结果
  $scope.symbols = [];
  // 加载状态标记，用来给用户显示加载提示
  $scope.isLoading = true;

  // 整理API地址（把原URL里的双斜杠//改成单斜杠/，避免浏览器解析问题）
  var apiUrl = 'http://example.com:82/api/Test/GetTestSymbols?exchanges=nc&callTypes=eq&symbolLike=infra';

  // 发送GET请求获取JSON数据
  $http.get(apiUrl)
    .then(function(response) {
      // 请求成功，把返回的数据赋值给作用域变量
      $scope.symbols = response.data;
      $scope.isLoading = false;
    })
    .catch(function(error) {
      // 请求失败时的处理，比如打印错误日志、提示用户
      console.error('加载数据失败:', error);
      $scope.isLoading = false;
      $scope.errorMsg = '数据加载出错啦，请稍后重试~';
    });
});
</script>

第三步：完善表格视图的渲染逻辑 #

现在把你的表格<tbody>部分用ng-repeat循环渲染数据，同时加上加载状态、错误提示和空数据提示的处理：

<div class="container" data-ng-app="myApp" data-ng-controller="myController">
  <!-- 加载状态提示 -->
  <div ng-show="isLoading" class="alert alert-info">正在加载数据，请稍候...</div>
  
  <!-- 错误提示 -->
  <div ng-show="errorMsg" class="alert alert-danger">{{ errorMsg }}</div>

  <!-- 数据表格，只有当有数据时才显示 -->
  <table class="table table-striped table-hover" ng-show="symbols.length > 0">
    <thead>
      <tr>
        <th>Symbol</th>
        <th>CompanyName</th>
        <th></th> <!-- 保留原有的空列 -->
      </tr>
    </thead>
    <tbody>
      <!-- 用ng-repeat循环渲染每一条数据 -->
      <tr ng-repeat="item in symbols">
        <td>{{ item.Symbol }}</td>
        <td>{{ item.CompanyName }}</td>
        <td></td> <!-- 保留原有的空列 -->
      </tr>
    </tbody>
  </table>

  <!-- 空数据提示 -->
  <div ng-show="symbols.length === 0 && !isLoading && !errorMsg" class="alert alert-warning">没有找到匹配的数据哦</div>
</div>

几个需要注意的点 #

• 跨域问题：如果你的前端页面和API不在同一个域名下，大概率会遇到CORS跨域错误，这时候需要后端API配置CORS允许你的前端域名访问，或者用代理服务器解决。
• 字段匹配：要确保API返回的JSON数据里确实有Symbol和CompanyName这两个字段，如果字段名不一样，记得修改视图里的{{ item.XXX }}部分。
• URL格式：原URL里的//api改成/api是为了避免部分浏览器解析URL时出现异常，建议保持规范。

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