Construire des applications angulaires complètes avec analog

Voyez comment construire une application angulaire avec Analog, en profitant d’une expérience de développeur moderne et fluide.

Angular est depuis longtemps un cadre puissant pour créer des applications Web robustes. Et maintenant, avec Analog, vous pouvez profiter d’une expérience de développeur plus rationalisée et de capacités modernes de pile complète comparables à des cadres comme Next.js et Nuxt.

Dans cet article, nous explorerons comment créer des applications complètes avec Analog, couvrant tout, du routage basé sur les fichiers au rendu côté serveur. Si vous êtes déjà familier avec TypeScript et Angular, vous constaterez que Analog est une extension naturelle et puissante de ce que vous savez déjà.

Qu’est-ce que l’analogue?

Analog est un méta-trame de pile complet construit sur Angular. Il apporte des fonctionnalités modernes comme le routage basé sur des fichiers, les routes d’API, le rendu côté serveur et plus encore à l’écosystème angulaire. Considérez-le comme la réponse d’Angular à Next.js ou nuxt.js – un cadre qui s’étend Angular pour rendre la construction d’applications complètes plus intuitives et adaptées aux développeurs. Les intégrations du serveur et du déploiement sont alimentées par Nitro.

Configuration d’un projet analogique

Le début de l’analogue est simple. Créons un nouveau projet en utilisant le création-analog emballer Et votre choix de gestionnaire de packages (ce tutoriel utilise NPM).

Ouvrez votre terminal et exécutez la commande npm create analog@latest my-analog-app. On vous demandera comment vous aimeriez que votre application soit amorcée. Prendre Full-stack Applicationet sélectionner No pour analogique SFC et vent arrière.

Suivons l’invite CLI pour installer et exécuter l’application que nous venons de créer. Les commandes suivantes nous aideront à le faire:

cd my-analog-app


npm install


npm run dev

Cela démarre votre application avec un serveur de développement fonctionnant à http://localhost:5173.

Routage basé sur des fichiers dans Analog

L’une des fonctionnalités remarquables d’Analog est le routage basé sur des fichiers, qui simplifie la façon dont vous organisez et naviguez entre les pages de votre application.

En analogique, chaque fichier du src/app/pages répertoire qui se termine par .page.ts devient un itinéraire dans votre application. Le chemin d’accès est déterminé par le chemin du fichier:

src/app/pages/
├── index.page.ts              -> /
├── about.page.ts              -> /about
├── users/
│   ├── index.page.ts          -> /users
│   └── urn:uuid:091c071f-54ac-4d2a-9e5b-a2caa5315c69.page.ts           -> /users/:id (dynamic route)
└── blog/
    └── [...slug].ts      -> /blog/* (catch-all route)

Il est possible de définir les routes imbriquées de deux manières différentes:

1. En nichant les fichiers d’itinéraire dans les dossiers – src/app/pages/about/team.page.ts définit un /about/team itinéraire.
2. En utilisant la notation de points dans le nom de fichier – src/app/pages/about.team.page.ts définit également un /about/team itinéraire.

Nous avons actuellement pages/index.page.tsce qui rend la page d’accueil que vous avez vue plus tôt. Ajoutons un /à propos page. Ajouter un nouveau fichier about.page.ts au répertoire des pages et collez le code ci-dessous:

import { Component } from "@angular/core";
import { RouterLink } from "@angular/router";

@Component({
  standalone: true,
  imports: [RouterLink],
  template: `
    <h1>About Us</h1>
    <p>We are building a full-stack application with Analog!</p>
    <a routerLink="https://www.telerik.com/">Back to Home</a>
  `,
})
export default class AboutPageComponent {}

Remarquez comment nous exportons le composant comme exportation par défaut. C’est ainsi que Analog identifie le composant principal de chaque itinéraire. Si votre serveur de développement est toujours en cours d’exécution, accédez à localhost: 5173 / À propos pour le voir fonctionner.

Il y a plus dans le routage basé sur les fichiers que je ne voudrais couvrir dans cet article. Vous pouvez en savoir plus sur le routage dans le Documentation analogique. Il couvre davantage les itinéraires de mise en page, le regroupement, etc.

Création de routes API avec analogique

Analog facilite la création de points de terminaison API qui peuvent servir des données à l’application. Ceux-ci sont définis dans le src/server/routes annuaire. Les routes API sont également un routage basé sur le système de fichiers et sont exposés sous la valeur par défaut /api préfixe. Par conséquent, le fichier src/server/routes/users.ts sera accessible sous /api/users. Le préfixe peut être configuré avec le apiPrefix paramètre passé au analog Plugin VITE. Par exemple:

import analog from "@analogjs/platform";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      analog({
        apiPrefix: "services",
      }),
    ],
  };
});

Faisons des itinéraires pour récupérer les données utilisateur. Ajouter un nouveau fichier, users.tsau src/server répertoire et collez le code ci-dessous:

export const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
  { id: 4, name: "David" },
  { id: 5, name: "Eve" },
  { id: 6, name: "Frank" },
  { id: 7, name: "Grace" },
];

Maintenant, créons un itinéraire pour récupérer tous les utilisateurs. Ajouter un nouveau fichier index.get.ts au src/server/routes/v1/users répertoire et collez le code ci-dessous:

import { eventHandler } from "h3";
import { users } from "../../../users";

export default eventHandler(() => ({ users }));

Cette route renvoie tous les utilisateurs. Il exporte une fonction de gestionnaire qui traitera la demande de l’utilisateur et renvoie une réponse. Un gestionnaire d’événements est une fonction qui sera liée à un itinéraire et exécutée lorsque l’itinéraire est égalé par le routeur.

Note: Le eventHandler La fonction fournit un moyen pratique de créer des gestionnaires d’événements pour les demandes HTTP. Cela fait partie du h3 package, qui analogique (via Nitro) dépend de.

Notez que nous avons ajouté un get suffixe au nom de fichier. Il s’agit d’une convention qu’Analog utilise pour identifier la méthode HTTP pour l’itinéraire, et elle est facultative. Lorsqu’elle est absente, l’itinéraire correspondra à toutes les méthodes HTTP.

Créons un itinéraire pour récupérer un seul utilisateur. Créer un nouveau fichier urn:uuid:091c071f-54ac-4d2a-9e5b-a2caa5315c69.get.ts au src/server/routes/v1/users répertoire et collez le code ci-dessous:

import { eventHandler, getRouterParam } from "h3";
import { users } from "../../../users";

export default eventHandler((event) => {
  const id = getRouterParam(event, "id");

  const user = users.find((user) => user.id === Number(id));
  if (!user) {
    return new Response("User not found", { status: 404 });
  }
  return user;
});

Ici, nous utilisons le getRouterParam fonction pour obtenir le id Paramètre de l’itinéraire. Nous utilisons ensuite le find Méthode pour trouver l’utilisateur avec l’ID donné. Si l’utilisateur n’est pas trouvé, nous renvoyons une réponse 404.

Vous pouvez tester les routes API en exécutant le serveur de développement et en naviguant vers LocalHost: 5173 / API / V1 / utilisateurs. Vous devriez voir la liste des utilisateurs. Vous pouvez également tester le urn:uuid:091c071f-54ac-4d2a-9e5b-a2caa5315c69.get.ts route en naviguant vers LocalHost: 5173 / API / V1 / utilisateurs / 1. Vous devriez voir l’utilisateur avec ID 1.

Vous pouvez accéder à des cookies et ajouter une prise en charge WebSocket à vos itinéraires API, mais cela dépasse le cadre de cet article. Nous couvrirons cela dans un prochain article.

Vous pouvez en savoir plus sur Itinérations API dans la documentation.

Rendu côté serveur en analogique

Le rendu côté serveur (SSR) est une fonctionnalité critique pour les applications Web. Il offre un meilleur référencement, des charges de page initiales plus rapides et une expérience utilisateur améliorée. Analog prend en charge SSR, et il est activé par défaut. Cela signifie que lorsque vous créez votre application, Analog générera des artefacts de construction qui seront utilisés pour le rendre sur le serveur. Vous les trouverez dans le build/analog/server annuaire.

Vous pouvez vous retirer de SSR en définissant le ssr option de false dans votre vite.config.ts déposer.

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


export default defineConfig(({ mode }) => ({
  
  plugins: [analog({ ssr: false })],
}));

Certaines dépendances peuvent nécessiter des transformations supplémentaires pour travailler pour le rendu côté serveur. Vous devrez peut-être ajouter le ou les packages au (s) ssr.noExternal Array dans la configuration VITE Si vous recevez des erreurs liées à eux. Par exemple:

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


export default defineConfig(({ mode }) => ({
  ssr: {
    noExternal: [
      "apollo-angular", 
      "apollo-angular/**", 
      "@spartan-ng/**", 
    ],
  },
  plugins: [analog({ ssr: true })],
}));

Analog prend en charge le rendu côté serveur (SSR) et la génération de sites statiques (SSG), vous offrant la flexibilité de choisir la bonne approche pour chaque page de votre application. Vous pouvez utiliser une approche hybride où certaines pages sont pré-rendues au moment de la construction (SSG) et d’autres sont rendues sur le serveur (SSR) au moment de la demande.

Pour SSG, les pages de pré-rendements analogiques au moment de la construction, créant des fichiers HTML statiques qui peuvent être desservis par n’importe quel serveur de fichiers statique. C’est idéal pour le contenu qui ne change pas souvent. Pour activer SSG pour une page, vous pouvez utiliser le prerender option dans le analog() Plugin pour VITE. Par exemple:

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

export default defineConfig(({ mode }) => ({
  plugins: [
    analog({
      prerender: {
        routes: async () => ["https://www.telerik.com/", "/about", "https://www.telerik.com/services"],
      },
    }),
  ],
}));

Le pouvoir de Vite dans Analog

Analog est construit sur Vite, un outil de construction de frontend moderne qui offre des avantages importants. Il est devenu l’outil de construction standard pour de nombreux frameworks de frontend. Il est utilisé dans Remix, Solid Start, Tanstack Start et bien d’autres. Vous obtenez les fonctionnalités suivantes de Vite:

1. Server de développement rapide: VITE utilise des modules ES natifs pour servir votre code pendant le développement, ce qui entraîne un start-up de serveur instantané et un remplacement de module chaud et rapide (HMR).
2. Buildages de production optimisés: Quand vient le temps de construire pour la production, Vite utilise Rollup pour créer des faisceaux hautement optimisés. Cependant, l’équipe VITE travaille sur un nouveau Bundler appelé (Roladdown) qui remplacera Rollup à l’avenir.
3. Écosystème de plugin riche: Vous pouvez tirer parti de l’écosystème croissant des plugins Vite pour étendre les capacités d’Analog. Il y a des plugins pour CSS (par exemple, CSS de vent arrière), le rendu de Markdown et plus encore. Si vous utilisez Nuxt ou Nitro, vous connaissez une partie de la configuration VITE que vous avez vue plus tôt.
4. Prise en charge prête à l’emploi Pour TypeScript, JSX, CSS et plus encore.
5. Support SSR de première classe: Analog tire les capacités SSR de Vite pour fournir une expérience transparente pour le rendu côté serveur.

L’intégration avec VITE signifie que votre flux de travail de développement est beaucoup plus rapide et plus agréable. Vous bénéficierez également de l’écosystème vaste des plugins Vite, qui peut être utilisé pour améliorer la fonctionnalité de votre application.

Conclusion et étapes suivantes

Dans cet article, nous avons exploré comment Analog apporte des capacités modernes de la pile complète à l’écosystème angulaire. Nous avons couvert:

• Configuration d’un projet analogique
• Utilisation du routage basé sur les fichiers pour la navigation plus propre
• Création de routes API pour les fonctionnalités backend
• Implémentation de rendu côté serveur pour de meilleures performances et SEO
• Tirer parti du SSR / SSG hybride pour des stratégies de rendu flexibles
• Profiter de l’expérience de développement puissante de Vite

Analog représente une évolution passionnante pour le développement angulaire. Il apporte de nombreuses améliorations de l’expérience des développeurs qui ont rendu d’autres méta-trames si populaires tout en tirant parti de l’architecture robuste pour laquelle Angular est connu. Je ne suis pas allé profondément dans les détails des fonctionnalités d’Analog, mais j’espère que cet aperçu a piqué votre intérêt. Je publierai plus de contenu sur Analog dans les semaines à venir, alors restez à l’écoute!

Dirigez-vous vers le Documentation analogique pour en savoir plus.