如何通过不同URL在同一HTML页面渲染不同内容（Angular场景）

没问题，这需求很常见，咱们可以通过封装请求逻辑+绑定点击事件来实现，下面是具体的实现方案：

1. 修改HTML结构 #

首先在页面里添加切换用的链接，还有用来展示内容的区域：

<div ng-app="app" ng-controller="index">
  <!-- 切换链接 -->
  <a href="javascript:void(0)" ng-click="fetchData('/get_js')">加载JS数据</a>
  <a href="javascript:void(0)" ng-click="fetchData('/get_node')">加载Node数据</a>
  <a href="javascript:void(0)" ng-click="fetchData('/get_ng')">加载Angular数据</a>

  <!-- 内容展示区域 -->
  <div class="content">
    {{ cat }}
    <!-- 如果是复杂数据，可以用ng-repeat或者其他指令渲染，比如：
    <ul ng-repeat="item in cat">
      <li>{{ item.name }}</li>
    </ul>
    -->
  </div>
</div>

2. 重构Angular控制器代码 #

把请求逻辑封装成一个可复用的函数，这样点击不同链接时只需传递对应的接口地址即可：

var app = angular.module('app', []);
app.controller('index', ($scope, $http) => {
  // 封装请求函数
  $scope.fetchData = function(apiUrl) {
    $http.get(apiUrl)
      .then((res) => {
        // 更新$scope数据，Angular会自动刷新视图
        $scope.cat = res.data;
      })
      .catch(() => {
        // 统一错误处理
        alert('数据库 error');
      });
  };

  // 页面初始化时默认加载第一个接口的数据
  $scope.fetchData('/get_js');
});

关键逻辑说明 #

• 用ng-click给每个链接绑定fetchData函数，并传入对应的接口地址作为参数；
• 封装fetchData函数后，不用重复写$http请求的代码，维护起来更方便；
• 当$scope.cat的数据更新时，Angular的双向数据绑定会自动把新内容渲染到页面上，不用手动操作DOM；
• 错误处理统一放在.catch里，所有接口请求出错都会触发同一个提示。

如果你的返回数据是复杂结构（比如数组），只需要调整内容展示区域的Angular指令就行，比如用ng-repeat循环渲染列表，完全不影响切换逻辑~

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