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 をそれぞれ変更します。

URL をリダイレクトするために $location サービスを適用するには、主に 2つの方法があります。

1. $location.url(URL)

構文：

```javascript
$location.url(/location);
```

2. $location.path(URL);

構文：

```javascript
$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;
    }
  });

出力：

ここをクリックしてサンプルコードを実行します。