如何用单个HTML渲染不同内容及AngularJS获取URL GET参数

没问题，我来帮你一步步解决这个需求——让a.html的链接打开带参数的b.html，再用AngularJS接收参数并渲染不同内容。

第一步：给a.html的链接加GET参数 #

首先你需要修改a.html里的<a>标签，给b.html加上区分内容的show参数，同时用target="_blank"确保在新窗口打开。示例代码如下：

<ul class='list-wrapper'>
  <li><a href="b.html?show=get_node" target="_blank">查看Node.js内容</a></li>
  <li><a href="b.html?show=get_vue" target="_blank">查看Vue.js内容</a></li>
  <li><a href="b.html?show=get_other" target="_blank">查看其他内容</a></li>
</ul>

这里的show参数就是告诉b.html要渲染哪块内容的标识，你可以根据自己的需求命名参数名和值。

第二步：在b.html中用AngularJS获取参数 #

AngularJS有两种靠谱的方式获取URL里的GET参数，我都给你列出来：

方式1：用官方的$location服务（推荐） #

这是AngularJS官方提供的服务，处理URL相关操作非常省心。你只需要在控制器里注入$location，然后调用search()方法就能拿到参数：

<!DOCTYPE html>
<html ng-app="contentApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ContentController">
  <!-- 根据参数显示对应的内容 -->
  <div ng-if="activeContent === 'get_node'">
    <h3>Node.js 专区</h3>
    <p>Node.js是基于Chrome V8引擎的JavaScript运行环境...</p>
  </div>
  <div ng-if="activeContent === 'get_vue'">
    <h3>Vue.js 专区</h3>
    <p>Vue.js是一套用于构建用户界面的渐进式框架...</p>
  </div>
  <div ng-if="!activeContent || activeContent === 'get_other'">
    <h3>默认内容</h3>
    <p>欢迎访问，请选择正确的内容类型</p>
  </div>

  <script>
    // 初始化AngularJS应用
    var app = angular.module('contentApp', []);
    // 注入$location服务到控制器
    app.controller('ContentController', function($scope, $location) {
      // 获取URL中的show参数
      $scope.activeContent = $location.search().show;
      
      // 可选：参数校验，防止无效参数导致的异常
      const validContents = ['get_node', 'get_vue'];
      if (!validContents.includes($scope.activeContent)) {
        $scope.activeContent = null;
      }
    });
  </script>
</body>
</html>

解释一下：

• $location.search()会返回一个包含所有GET参数的对象，比如访问b.html?show=get_node时，$location.search().show就是'get_node'。
• 用ng-if指令根据activeContent的值来切换显示不同的内容块，非常直观。

方式2：手动解析URL（适合不想依赖$location的场景） #

如果你的项目不想用$location，也可以用原生JS手动解析URL的查询字符串，代码如下：

app.controller('ContentController', function($scope) {
  // 自定义函数获取URL参数
  function getQueryParam(paramName) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(paramName);
  }
  
  // 获取show参数
  $scope.activeContent = getQueryParam('show');
  
  // 同样做参数校验
  const validContents = ['get_node', 'get_vue'];
  if (!validContents.includes($scope.activeContent)) {
    $scope.activeContent = null;
  }
});

这里用了原生的URLSearchParamsAPI，简洁又可靠，兼容性也很好。

第三步：进阶优化（可选） #

如果你的内容比较多，建议把不同内容拆成单独的模板文件，用ng-include加载，这样代码结构更清晰：

<!-- 替换之前的内容区域 -->
<div ng-include="getTemplateUrl()"></div>

<script>
app.controller('ContentController', function($scope, $location) {
  $scope.activeContent = $location.search().show;
  
  $scope.getTemplateUrl = function() {
    switch($scope.activeContent) {
      case 'get_node':
        return 'templates/node-template.html';
      case 'get_vue':
        return 'templates/vue-template.html';
      default:
        return 'templates/default-template.html';
    }
  };
});
</script>

把每个内容块放到单独的模板文件里，维护起来会轻松很多。

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