使用 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。

1. $location.url(URL)

   语法：

   $location.url(/location);
   

2. $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;
    }
  });

输出：

点击这里运行示例代码。