我有一个 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:我正在使用快速服务器来托管内容。
最佳答案
然后你可以拿一个function并做出适当的api当 link is clicked 时调用该函数通过发送参数。
步骤:
- Write a funciton which calls each api dynamically depending on the parameter.
- Send the
apiurl as a parameter from the respective anchot tag to that function.- Make the api call in that function and show the response in 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>请运行上面的片段
关于javascript - 如何使用相同的 HTML 通过不同的 url 呈现不同的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49828794/