使用 Analog 构建全栈 Angular 🚀

在当前的Web生态系统中，许多框架都采用服务器优先的方法来构建应用程序和网站。这主要通过元框架来实现，例如Next.js、SvelteKit、Nuxt、Qwik City等等。这些元框架将基于文件系统的路由、服务器端渲染、静态站点生成、内置API路由等功能集成到开发者体验中。

Analog 是一个元框架，可帮助您使用 Angular 更快地交付应用程序和网站。

特征

Analog 是基于 Angular 构建的，并添加了以下附加功能：

• 为 Vite 生态系统（Vitest、Playwright、Cypress 等）提供一流的支持
• 基于文件的路由
• 支持使用 Markdown 作为内容路由
• 支持 API/服务器路由
• 混合SSR / SSG 支持
• 支持 Angular CLI/ Nx 工作区
• 以及更多集成

让我们潜入其中！

开始使用🤓

要创建一个新的 Analog 项目，您可以使用create-analog您选择的包管理器来运行该软件包：

npm create analog@latest analog-app
cd analog-app

你也可以使用 Nx 搭建一个新项目。

安装依赖项：

npm install

并运行该应用程序：

npm start

访问http://localhost:5173即可在浏览器中查看正在运行的应用程序。

要构建部署版本，请运行构建命令：

npm run build

基于文件系统的路由 🤖

Analog 在 Angular Router 之上提供基于文件系统的路由。

例如，要定义一条路由，请在 Analog 项目中/about创建一个名为 的文件。src/app/pages/about.page.ts

接下来，添加一个独立的Angular组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  standalone: true,
  template: `
    <h2>Hello Analog</h2>

    Analog is a meta-framework on top of Angular.
  `,
})
export default class AboutPageComponent {}

保存更改，您的路线就设置好了，无需任何其他配置！

访问http://localhost:5173/about查看关于页面。

Analog 还支持静态路由、动态路由、嵌套路由、兜底路由等等。

API路由🧑‍🔧

Analog 支持定义可用于向应用程序提供数据的 API 路由。

API路由定义在src/server/routes文件夹中。API路由也基于文件系统，并在开发环境中以默认前缀公开/api。

例如，要定义一个 API 路由以发送 JSON 格式的“Hello Word”消息：

创建src/server/routes/v1/hello.ts文件

import { defineEventHandler } from 'h3';

export default defineEventHandler(() => {
  return { message: 'Hello World' };
});

保存更改后，您现在可以通过以下方式访问此 API 路由/api/v1/hello：查询数据库、连接到您的 CMS 以及在服务器上执行其他操作。

服务器端渲染和静态网站生成📈

服务器端渲染和静态网站生成可以提升您的 Angular 应用的 SEO 和性能。Analog 开箱即用地支持服务器端渲染和静态网站生成，并且默认启用。

要构建部署版本，请运行构建命令：

npm run build

要预渲染页面，请在vite.config.ts项目根目录下进行配置：

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    analog({
      prerender: {
        routes: async () => [
          '/',
          '/about',
          '/blog',
          '/blog/posts/2023-06-28-my-first-post',
        ],
      },
    }),
  ],
}));

这些路由在构建时会预渲染成静态 HTML，并在 Angular 应用加载之前发送给客户端，从而提供更佳的用户体验。之后，Angular 应用才会加载，为网站或应用提供持续的交互式用户体验。

部署🚀

您还可以将 Analog 应用程序部署到许多不同的提供商，几乎无需任何配置，包括 Netlify、Vercel、Firebase 等。

请访问部署文档了解更多信息。

赞助 Analog 💰

Analog 是一个采用 MIT 许可证的开源项目，但维护该项目所需的资源主要来自赞助和贡献。我们正在寻求赞助和合作伙伴关系，以支持该项目的未来发展。

考虑赞助 Analog 项目。

如果您是一家使用 Angular 构建盈利产品的企业，赞助 Analog 及其开发也有助于推动 Analog 和 Angular 的发展。如果您是一位支持开源项目的个人，不妨考虑赞助并为 Analog 做出贡献。

加入社区🤝

• 访问并给GitHub 仓库点赞
• 加入Discord
• 请在Twitter上关注我们

如果你喜欢这篇文章，请点击❤️，让更多人看到。关注我的推特，订阅我的YouTube频道，获取更多关于Angular、Analog、NgRx等内容！