AngularJS SPA 实战指南之路由实现

前言

AngularJS 是一款流行的前端 JavaScript 框架，它的单页应用（Single Page Application，SPA）功能十分强大。在 SPA 中，路由功能是必不可少的，它可以帮助我们实现页面之间的无刷新跳转，从而提升用户体验。本文将介绍 AngularJS SPA 中路由的实现方式，并提供示例代码，帮助读者更好地理解。

路由实现方式

在 AngularJS 中，我们可以通过 ngRoute 模块来实现路由功能。首先，我们需要在 HTML 文件中引入 ngRoute 模块：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>

然后，在我们的 AngularJS 应用中，需要定义一个模块，并注入 ngRoute 模块：

var app = angular.module('myApp', ['ngRoute']);

接下来，我们需要配置路由。在 app 模块中，我们可以使用 config 方法来配置路由：

// www.javascriptcn.com code example
app.config(function($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl : 'home.html',
    controller  : 'HomeController'
  })
  .when('/about', {
    templateUrl : 'about.html',
    controller  : 'AboutController'
  })
  .otherwise({redirectTo: '/'});
});

在上面的代码中，我们通过 $routeProvider 的 when 方法来定义路由规则，其中 '/' 表示默认路由，redirectTo 方法用于定义路由不匹配时的重定向。在路由规则中，我们需要指定 templateUrl 和 controller，分别对应要加载的 HTML 模板和控制器。

最后，在 HTML 文件中，我们需要定义 ng-view 指令来指定路由视图的位置：

<div ng-view></div>

这样，路由就配置完成了。当用户访问不同的路由时，AngularJS 就会根据我们定义的路由规则来加载对应的 HTML 模板和控制器。

示例代码

下面是一个简单的示例，帮助读者更好地理解路由的实现方式。在这个示例中，我们定义了两个路由，一个是首页，一个是关于页面。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>AngularJS SPA 实战指南之路由实现</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
</head>
<body ng-app="myApp">
  <nav>
    <ul>
      <li><a href="#/">Home</a></li>
      <li><a href="#/about">About</a></li>
    </ul>
  </nav>
  <div ng-view></div>
  <script>
    var app = angular.module('myApp', ['ngRoute']);
    app.config(function($routeProvider) {
      $routeProvider
      .when('/', {
        templateUrl : 'home.html',
        controller  : 'HomeController'
      })
      .when('/about', {
        templateUrl : 'about.html',
        controller  : 'AboutController'
      })
      .otherwise({redirectTo: '/'});
    });
    app.controller('HomeController', function($scope) {
      $scope.message = 'Welcome to Home Page';
    });
    app.controller('AboutController', function($scope) {
      $scope.message = 'Welcome to About Page';
    });
  </script>
</body>
</html>

在上面的代码中，我们首先引入了 AngularJS 和 ngRoute 模块。然后，在 HTML 中，我们定义了两个链接，分别对应首页和关于页面的路由。在 ng-view 指令中，我们指定了路由视图的位置。最后，在 JavaScript 中，我们定义了两个控制器，分别对应首页和关于页面的逻辑。

结语

本文介绍了 AngularJS SPA 中路由的实现方式，并提供了示例代码。通过学习本文，读者可以更好地理解 AngularJS 中路由的使用方法，从而在实际开发中更加灵活地运用它。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0adfde46428fe9edf404e