AngularJS SPA 中的路由实现探讨-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，路由是一个非常重要的概念。它负责将不同的 URL 映射到不同的组件或页面，并使用户能够直接访问这些组件或页面。在 Single Page Application（SPA）中，路由的作用更加明显，因为它可以处理所有的页面切换和状态更新，提供更加流畅的用户体验。

本文将详细探讨 AngularJS SPA 中路由的实现。我们将介绍 AngularJS 路由的基本概念，讨论一些常见的路由实现方法以及它们的优缺点，最后给出一个完整的示例来展示如何使用 AngularJS 路由实现一个完整的 SPA。

AngularJS 路由基础知识

在 AngularJS 中，路由主要由两个核心组件实现：$routeProvider 和 $locationProvider。

$routeProvider 负责定义 URL 和对应的组件或页面之间的映射。它可以用来定义路由规则，重定向规则以及路由参数。以下是一些常见的 $routeProvider 方法：

when(path, route)：定义一个路由规则，将一个 URL 路径映射到一个路由配置对象（route）。该路由配置对象包括了需要加载的组件或页面以及其他参数信息。
otherwise(route)：定义一个默认路由规则，为没有匹配到任何路由规则的 URL 提供一个默认的参数值或重定向到一个指定的 URL。

$locationProvider 负责控制浏览器地址栏中的 URL，它可以用来配置 URL 前缀、路径分隔符以及启用 HTML5 模式等。以下是 $locationProvider 的一些方法：

hashPrefix(prefix)：为 URL 的 hash 部分添加前缀。
html5Mode(mode)：启用 HTML5 模式，将 URL 改为使用 HTML5 的 history.pushState() API。
requireBase(enabled)：启用 URL 基础设置，用于处理相对路径的情况。

路由实现方法及优缺点

在 AngularJS 中，路由的实现方法有很多，但大体上可以分为两大类：客户端路由和服务器端路由。

客户端路由

客户端路由是指路由的实现都在客户端浏览器进行，服务器只负责提供静态资源，如 HTML、CSS、JS 等文件。客户端路由的优点在于可以提供更好的 SPA 体验，缺点则是对 SEO 不友好。

在客户端路由中，一般需要使用 $routeProvider 和 $locationProvider 这两个核心服务，它们可以通过以下方式来配置路由规则：

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutController'
    })
    .when('/contact', {
      templateUrl: 'views/contact.html',
      controller: 'ContactController'
    })
    .otherwise({
      redirectTo: '/home'
    });

  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });
});

在这个例子中，我们使用 $routeProvider 定义了三个路由规则来处理 /home、/about 和 /contact 三个 URL，使用 .otherwise() 方法定义了一个默认路由规则来重定向到 /home 页面。我们同样使用 $locationProvider 启用了 HTML5 模式，并设置了 requireBase 为 false，以便兼容旧版浏览器。

服务器端路由

服务器端路由是指将路由的实现推向服务器端，服务器通过解析 HTTP 请求中的 URL 路径，来确定需要返回的页面。服务器端路由优点在于对 SEO 友好，而缺点则是无法提供和客户端路由相同的 SPA 体验。

在服务器端路由中，我们需要使用 Node.js 或其他服务器端语言来实现路由，并使用模板引擎来渲染页面。以下是一个使用 Node.js 和 EJS 模板引擎的服务器端路由例子：

var express = require('express');
var app = express();

app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  res.render('pages/home');
});

app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.get('/contact', function(req, res) {
  res.render('pages/contact');
});

app.listen(3000, function() {
  console.log('Server listening on port 3000!');
});

在这个例子中，我们使用 Express 框架来实现路由，并使用 EJS 模板引擎渲染页面。使用模板引擎可以将路由和页面模板分离，方便维护和扩展。

示例代码

让我们来看一个完整的 SPA，它使用客户端路由来创建一个简单的博客应用。这个应用会根据路由规则显示不同的页面，包括首页、文章列表页以及文章详情页。我们将使用 AngularJS 和 Bootstrap 来构建这个应用。

首页

首页显示文章列表，我们将使用 ng-repeat 指令来循环显示文章列表。我们需要使用一个控制器来获取文章列表并将其传递给模板。以下是首页的 HTML 和控制器代码：

<!-- index.html -->

<div class="container">
  <h1>Welcome to my blog</h1>
  <div ng-controller="HomeController as home">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default" ng-repeat="post in home.posts">
          <div class="panel-heading">{{ post.title }}</div>
          <div class="panel-body">{{ post.body }}</div>
          <div class="panel-footer">
            <a href="posts/{{ post.id }}">Read more...</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

// HomeController.js

app.controller('HomeController', ['$http', function($http) {
  var vm = this;
  vm.posts = [];

  $http.get('/api/posts').then(function(response) {
    vm.posts = response.data;
  });
}]);

在控制器中，我们使用 $http 服务来获取文章列表，并将其存储在 vm.posts 中，这样我们就可以在模板中通过 home.posts 来访问这个列表。

文章列表页

文章列表页会显示每篇文章的标题和摘要。我们需要一个类似于首页的控制器来获取文章列表，但此控制器需要额外传递一个 URL 参数来过滤文章列表。以下是文章列表页的 HTML 和控制器代码：

<!-- posts.html -->

<div class="container">
  <h1>Blog posts</h1>
  <div ng-controller="PostsController as posts">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default" ng-repeat="post in posts.posts">
          <div class="panel-heading">{{ post.title }}</div>
          <div class="panel-body">{{ post.body }}</div>
          <div class="panel-footer">
            <a href="posts/{{ post.id }}">Read more...</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

// PostsController.js

app.controller('PostsController', ['$http', '$routeParams', function($http, $routeParams) {
  var vm = this;
  vm.posts = [];

  var categoryId = $routeParams.categoryId;

  var url = '/api/posts';
  if (categoryId) {
    url += '?category=' + categoryId;
  }

  $http.get(url).then(function(response) {
    vm.posts = response.data;
  });
}]);

在控制器中，我们首先获取路由参数 $routeParams.categoryId，并根据该参数来决定需要获取的文章列表。然后我们通过 $http 服务来获取文章列表，并将其存储在 vm.posts 中。

文章详情页

文章详情页会显示一篇文章的详细内容。我们需要使用一个类似于 ng-view 的指令来在 HTML 中包含文章详情视图，使用一个控制器来获取文章详情。以下是文章详情页的 HTML 和控制器代码：

<!-- post.html -->

<div class="container">
  <h1>{{ post.title }}</h1>
  <div ng-controller="PostController as post">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
          <div class="panel-body">{{ post.post.body }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

// PostController.js

app.controller('PostController', ['$http', '$routeParams', function($http, $routeParams) {
  var vm = this;
  vm.post = {};

  $http.get('/api/posts/' + $routeParams.postId).then(function(response) {
    vm.post = response.data;
  });
}]);

在控制器中，我们使用 $http 服务来获取文章详情，并将其存储在 vm.post 中。

路由配置

我们需要使用 $routeProvider 来定义路由规则，并添加 HTML5 模式支持。以下是路由配置代码：

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/index.html',
      controller: 'HomeController',
      controllerAs: 'home'
    })
    .when('/posts', {
      templateUrl: 'views/posts.html',
      controller: 'PostsController',
      controllerAs: 'posts'
    })
    .when('/posts/:postId', {
      templateUrl: 'views/post.html',
      controller: 'PostController',
      controllerAs: 'post'
    })
    .otherwise({
      redirectTo: '/'
    });

  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });
}]);

在这个例子中，我们定义了三个路由规则和一个默认规则，这些规则分别映射到首页、文章列表页和文章详情页。我们同样使用 $locationProvider 启用了 HTML5 模式，并设置了 requireBase 为 false。

总结

本文详细探讨了 AngularJS SPA 中路由的实现。从路由的基础知识开始，我们讨论了客户端路由和服务器端路由的优缺点，最后给出了一个完整的示例来展示如何使用 AngularJS 路由实现一个完整的 SPA。使用 AngularJS 的路由模块，可以帮助我们更加轻松地创建流畅的单页应用程序。

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