如何使用相同的 HTML 通过不同的 url 呈现不同的内容？答案

【问题标题】：How to use the same HTML render different content via different urls?如何使用相同的 HTML 通过不同的 url 呈现不同的内容？
【发布时间】：2018-04-14 07:00:21
【问题描述】：

我有一个 HTML 页面和多个 URL 如下

var app = angular.module('app', []);

app.controller('index', ($scope,$http) => {
  $http.get('/get_js').then((res) => {
    $scope.cat = res.data;
  }, () => {
    alert('database error');
  });
});

/get_js
/get_node
/get_ng
......

我希望如果我查询不同的 url，例如 $http.get('/get_js') 或 $http.get('/get_node') 或 $http.get('/get_ng')，它将在同一个 HTML 上呈现不同的内容。

例如，我有几个链接。如果我单击“a”链接，HTML 将通过“/get_js”呈现一些内容。如果我单击“b”链接，HTML 将通过“/get_ng”等呈现一些内容。每次我都会点击一个链接。

谁能告诉我该怎么做？

非常感谢！

PS：我正在使用快速服务器来托管内容。

【问题讨论】：

"如果我查询不同的 url"，表示您一次在同一个控制器中查询多个 urls？
@Sravan nope，比如我有几个链接，当我点击'a'链接时，它会通过'/get_js'等渲染一些内容。
所以你一次点击一个链接对吗？
@Sravan 是的，我会一次点击一个链接

标签： javascript angularjs node.js express

【解决方案1】：

然后您可以通过发送参数在 link is clicked 时调用 function 并在该函数中进行适当的 api 调用。

步骤：

编写一个函数来动态调用每个 api，具体取决于参数。

将api url 作为参数从相应的anchot 标记发送到那个函数。

在该函数中调用 api 并在 html 中显示响应

这是函数的外观，我评论了你的 API 调用。

 $scope.linkClicked = function(link)
       {
    //   $http.get('/get_js').then((res) => {
    //     $scope.data = res.data;
    //     }, () => {
    //      alert('database error');
    //    });
        $scope.data = link + ' clicked';
       }

代码：

var app = angular.module('myApp', []);
app.controller('index', function($scope) {
   $scope.linkClicked = function(link)
   {
//   $http.get('/get_js').then((res) => {
//     $scope.data = res.data;
//     }, () => {
//      alert('database error');
//    });
    $scope.data = link + ' clicked';
   }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="index">

<a ng-click="linkClicked('get_js')"> Link1 </a>
<a ng-click="linkClicked('get_node')"> Link2 </a>
<a ng-click="linkClicked('get_ng')"> Link3 </a>

<p ng-if="data"> {{data}} </p>

</div>


</body>
</html>

请运行上面的sn-p

Here is a working DEMO

【讨论】：