在 AngularJS 单页应用程序（SPA）中，控制页面跳转是非常重要的。在本文中，我们将详细讲解三种方式：使用 $location 服务、使用 $state 服务、以及使用 ngRoute 模块，并提供示例代码以帮助读者更好地理解。
使用 $location 服务
$location 服务是 AngularJS 中一个非常重要的服务，用于跟踪当前页面的状态，并能控制浏览器的 URL。可以使用 $location 服务在单页应用程序中实现页面的跳转。
angular.module('myApp', [])
.controller('myController', ['$scope', '$location', function($scope, $location) {
$scope.goToPage = function(page) {
$location.path(page);
};
}]);上述代码中，我们创建了一个控制器，并使用 $location 服务在 goToPage() 函数中实现了页面的跳转。当用户点击某一个按钮时，该函数将目标页面的 URL 传递给 $location.path()，然后 AngularJS 会自动重新加载该页面。
使用 $state 服务
$state 服务是 AngularUI Router 模块提供的服务，用于在单页应用程序中实现高级路由功能。可以使用 $state 服务在单页应用程序中实现页面的跳转。
-- -------------------- ---- -------
----------------------- --------------
-------------------------- --------------------- ------------------------ ------------------- -
--------------
-------------- -
---- ----
------------ -----------
--
--------------- -
---- ---------
------------ ------------
---
----------------------------------
---
--------------------------- ---------- --------- ---------------- ------- -
--------------- - -------------- -
----------------
--
----上述代码中，我们首先配置了两个状态（state）：home 和 about，并分别指定了它们的 URL 和模板。接着用 $urlRouterProvider.otherwise('/') 设置了默认路由为 home。最后，我们在控制器中使用 $state.go() 方法实现了页面的跳转。
使用 ngRoute 模块
ngRoute 是 AngularJS 自带的模块，用于控制路由和页面跳转。可以使用 ngRoute 模块在单页应用程序中实现页面的跳转。
-- -------------------- ---- -------
----------------------- ------------
-------------------------- ------------------------ -
--------------
---------- -
------------ -----------
--
--------------- -
------------ ------------
--
------------
----------- ---
---
---
--------------------------- ---------- ------------ ---------------- ---------- -
--------------- - -------------- -
---------------------
--
----上述代码中，我们首先使用 $routeProvider 配置了两个路由：/ 和 /about，接着使用 .otherwise() 指定了默认路由。最后，我们在控制器中使用 $location.path() 方法实现了页面的跳转。
总结
控制单页应用程序中页面跳转是非常重要的一项任务，我们可以使用 $location 服务、$state 服务以及 ngRoute 模块来实现。在这里介绍了这三种方式，读者可以根据自己的实际需求来选择合适的方式。希望本文能对初学者有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65940ad0eb4cecbf2d8a067b