使用 AngularJS 重定向到另一个页面
AngularJS 是一个 JavaScript 框架,可让你轻松使用 Web 构建应用程序,从而为你的应用程序扩展 HTML 词汇表。本教程将向你展示使用 AngularJS 重定向到另一个页面的利用。
使用 AngularJS 中的 $location
服务重定向到另一个页面
$location
服务用于获取当前页面的 URL 并对其进行更改。它还可以设置路由并重定向到新页面。
每当浏览器地址栏更改或用户单击链接时,此服务都会更新当前页面的 URL 以指向新页面。它还为用户处理弹出窗口和书签。
它可以帮助我们在应用程序中导航,而无需在控制器之间跳转或编写自定义代码来处理 URL 更改。
$location
服务提供各种方法,$location.href()
、$location.absUrl()
、url()
、protocol()
、host()
、port()
、path([path])
、replace()
、state()
、search([paramValue])
和 hash()
,用于将用户重定向到新 URL 或分别更改当前 URL。
主要有两种方法可以应用 $location
服务来重定向 URL。
-
$location.url(URL)
语法:
$location.url(/location);
-
$location.path(URL);
语法:
$location.path('/location);
在 $location
服务之后,我们使用 $windows
刷新页面。
要使用 $window.location.href
,你需要使用一个带有目标 URL 的锚标签,然后向该锚标签添加一个 ng-click
指令,这样当有人点击它时,Angular 会重新加载页面在该位置,而不仅仅是导航页面。
让我们讨论一个简化的示例,以更好地了解如何重定向到另一个页面或 URL。
示例代码 - HTML:
<div ng-app="Demo" ng-controller="Sample">
<h3>
Example of Redirect to another page using AngularJS
</h3>
<br>
<br>
<button ng-click="location()">Click here to see the magic of AngularJS</button>
</div>
示例代码 - JavaScript:
var app = angular.module('Demo', []);
app.controller('Sample', function($scope, $window, $location) {
$scope.location = function(){
var url = "https://www.delftstack.com/";
$window.location.href = url;
}
});
输出:
点击这里运行示例代码。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook