Question

我有一个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
...

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

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

有谁能告诉我该怎么做？

非常感谢！

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

Answer 1

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

<强>步骤：

编写一个函数，根据具体情况动态调用每个api   参数。

将api网址作为参数从相应的锚标记发送到   那个功能。

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

以下是该功能的外观，我评论了您的API来电。

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

<强>代码：

＆＃13;

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';
   }
});

＆＃13;

<!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>

＆＃13;

请运行以上代码段

Here is a working DEMO

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

1 个答案: