AngularJS 单页应用程序（SPA）中控制页面跳转的方式详解

在 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 服务在单页应用程序中实现页面的跳转。

angular.module('myApp', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'home.html'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'about.html'
      });

    $urlRouterProvider.otherwise('/');
  }])
  .controller('myController', ['$scope', '$state', function($scope, $state) {
    $scope.goToPage = function(page) {
      $state.go(page);
    };
  }]);

上述代码中，我们首先配置了两个状态（state）：home 和 about，并分别指定了它们的 URL 和模板。接着用 $urlRouterProvider.otherwise('/') 设置了默认路由为 home。最后，我们在控制器中使用 $state.go() 方法实现了页面的跳转。

使用 ngRoute 模块

ngRoute 是 AngularJS 自带的模块，用于控制路由和页面跳转。可以使用 ngRoute 模块在单页应用程序中实现页面的跳转。

angular.module('myApp', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'home.html'
      })
      .when('/about', {
        templateUrl: 'about.html'
      })
      .otherwise({
        redirectTo: '/'
      });
  }])
  .controller('myController', ['$scope', '$location', function($scope, $location) {
    $scope.goToPage = function(page) {
      $location.path(page);
    };
  }]);

上述代码中，我们首先使用 $routeProvider 配置了两个路由：/ 和 /about，接着使用 .otherwise() 指定了默认路由。最后，我们在控制器中使用 $location.path() 方法实现了页面的跳转。

总结

控制单页应用程序中页面跳转是非常重要的一项任务，我们可以使用 $location 服务、$state 服务以及 ngRoute 模块来实现。在这里介绍了这三种方式，读者可以根据自己的实际需求来选择合适的方式。希望本文能对初学者有帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65940ad0eb4cecbf2d8a067b