11、使用 Angular 路由器创建单页应用

最新推荐文章于 2025-12-02 16:46:33 发布

原创最新推荐文章于 2025-12-02 16:46:33 发布 · 12 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular路由器 #单页应用 #Rails集成

全栈开发实战进阶专栏收录该内容

23 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

使用 Angular 路由器创建单页应用

在掌握了使用 Jasmine 和 Karma 进行单元测试，以及利用 Testdouble.js 轻松模拟 Angular 提供的类之后，我们已经具备了测试 JavaScript 代码的能力。接下来，我们将把简单的搜索界面转变为单页应用，同时学习如何设计复杂的用户界面、处理多数据源以及优化数据库查询。

存储视图模板到 HTML 文件

目前，视图模板以字符串形式存在于 JavaScript 代码中。对于单个小视图来说，这种方式尚可，但随着组件和视图的增多，管理起来会变得十分困难。因此，我们可以借助 Webpack 将模板提取到 HTML 文件中。

具体操作步骤如下：
1. 安装 Webpack 的 html 加载器 ：

yarn add html-loader

创建 config/webpack/loaders/html.js 文件 ：

module.exports = {
  test: /\.html$/,
  use: [{
    loader: 'html-loader',
    options: {
      minimize: true,
      removeAttributeQuotes: false,
      caseSensitive: true