AngularJS SPA 应用如何实现链接方式变化但数据不变的情况-JavaScript中文网-JavaScript教程资源分享门户

前言

单页应用（SPA）之所以非常流行，是因为它有多种优点，包括速度快、用户体验好、代码可维护性高等等。然而，由于 SPA 类应用的本质，当 URL 变化时，页面应该对应着一组新的数据和视图。这通常会导致一些问题。本文介绍如何利用 AngularJS 以及其路由机制来实现 SPA 应用在链接方式变化时不变化数据的方法。

路由

路由机制是 AngularJS 框架的核心。路由是将 URL 映射到 MVC 模式的控制器和一系列视图的过程。当 URL 改变时，路由拦截浏览器的请求，为当前 URL 对应的视图呈现控制器和模型。

在 AngularJS 中，通过 $route 服务可以让你使用 URL 内容来加载不同的视图。所以，当用户访问时，AngularJS 将在 URL 处理器中寻找 URL 符合的路由，并为该 URL 渲染相应视图。

例如，当 URL 为 example.com/#/users/1 时，路由中的模式如下：

when('/users/:id', {
    templateUrl: 'userProfile.html',
    controller: 'UserProfileController'
}).

这个路由会创建一个控制器和一个模板，分别用来呈现用户的详细信息和一堆列表数据。这时，AngularJS 将会获取这些数据并使用模板来渲染视图。你可以通过 $routeParams.id 来获取路由中 id 参数的值，该参数的值为 1。

因此，路由机制可以有效解决 URL 改变时数据重复加载的问题。只要使用路由机制来控制视图和 URL，就可以释放开发人员的时间和工作量。

使用 ngRoute

ngRoute 是 AngularJS 的一部分，它通过提供一些指令和服务，使你轻松地添加路由功能到 AngularJS 的应用中去。下面，我们就来演示如何使用 ngRoute。

引用 ngRoute

ngRoute 模块默认不包含在 AngularJS 中，它是一个单独的文件。因此，首先需要将 angular-route.js 添加到 HTML 页面中。例如：

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

定义路由

通过 ngRoute，你可以在 AngularJS 应用中定义路由。定义路由的最基本要素是路由规则，以及每个规则所对应的模板和控制器。假设我们的 AngularJS 应用的 URL 是这样的：

http://www.example.com/#/about

要在该 URL 上输出 AngularJS 视图，可以在定义路由规则的 JavaScript 代码上添加以下语句：

$routeProvider
    .when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutCtrl'
    })

在以上例子中，when() 方法传入路由路径和对象。对象里有两个属性：模板和控制器。templateUrl 属性是指向包含在 AngularJS 视图中的 HTML 的路径。controller 属性是对应控制器的名称。

然后，那些奇妙的路由

现在，我们将会演示如何使用 $routeProvider 服务来定义路由对象。首先，在 HTML 中创建一个简单的 Angular 应用：

-- -------------------- ---- -------
--------- -----
----- -------------
  ------
    ---------------- -----------
    ------- ------------------------------------------------------------------------------------
    ------- --------------------------------------------------------------------------------------------
    ------- ----------------------
  -------
  ------
    -- ------------------------
    -- ------------------------------
    -- ----------------------
    ---- --------------
  -------
-------

这里，我们用了 AngularJS、AngularJS 路由、和一个叫做 app.js 的 JavaScript 文件。由于需求是在 URL 变换的同时保持页面不变，多个链接都是使用 href 锚点形式。在浏览器中，使用上述 HTML，会得到这样的效果：

当点击不同的链接时，URL 发生变化，但页面却不改变。否则，每一个页面都需一次数据查询和加载。现在，我们假设需要获取并呈现有关消息的数据。为此，我们需要定义一个消息控制器和消息服务。

-- -------------------- ---- -------
----------------------------------- -------- -------------- --------------- -
    --- ---------- - -----
    --- ----- - -------------------
    --- -------- - ----------------------

    --- -------- - -------- -- -
        ----------------------------- ----------------------- -------- -
            --------------- - ------------
        ---
    --

    -----------
---

----------------------------- -------- ------- -
    --- ------- - ---

    --------------- - -------- ------- --------- -
        ------ -------------------------- - ----- - --- - ----------
    --

    ------ --------
---

我们定义了一个名为 MessageController 的控制器，并使用 MessageService.getData 方法在控制器内加载数据。这种方法更灵活，控制器只在视图切换时执行一次。在 MessageService 中，我们使用 $http 服务获取数据并返回一个 Promise。

最后，我们使用路由规则将消息控制器与视图绑定：

$routeProvider.when('/:field/:category', {
    templateUrl: 'message.html',
    controller: 'MessageController',
    controllerAs: 'MessageCtrl'
});

不会数据更新的我们，仅使用变化后的 URL，不管具体轨迹是如何，始终只获取数据一次。

结论

发掘所谓的单页应用最重要的是路由，好的路由可以有效解决 URL 改变时数据重复加载的问题，也能节省大量工作时间和工作量。AngularJS 中的路由功能让实现单页应用变得简单易行，通过本文的引导，相信已经通透了其中的奥秘，可以更好地应用 AngularJS 实现自己的项目。

参考链接

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