使用 AngularJS 重定向到另一个页面

Muhammad Adil 2024年2月15日
使用 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);
    
  1. $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
Muhammad Adil avatar Muhammad Adil avatar

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

相关文章 - Angular Service