使用 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;
    }
  });

輸出：

點選這裡執行示例程式碼。