English

Boilerplate Angular

Boilerplate Angular 11 avec Spectre.css, l'i18n, le pré-rendu statique et des ressources courantes.

Démarrage

Installez tout avec npm install, puis :

  • npm start pour lancer le projet en local sur http://localhost:4200 (accessible sur le réseau local)
  • npm run start:fr fait la même chose en utilisant la localisation française
  • npm lint pour linter (la configuration par défaut n'a pas été modifiée)
  • npm run extract pour extraire le fichier de la langue source danssrc/locale
  • npm run build pour générer la version de production, les fichiers sont générés dans dist/angular-boilerplate/browser
  • npm run prerender fait la même chose mais il pré-rend aussi les routes définies dans la configuration prerender dans angular.json

Fonctionnalités

Style

Spectre.css, un framework CSS léger, est inclus avec sa collection d'icônes en CSS pur Icons.css.

i18n

L'i18n est réalisée avec le paquet natif. Elle est actuellement configurée pour être en Anglais dans le code source et pour avoir une traduction en Français. La configuration exacte est détaillée plus bas.

Ressources courantes

Directives

  • AutofocusDirective: fait un focus dynamique sur un élément

Pipes

  • ConcatPipe
  • ForObjectPipe: itère à travers les clés d'un objet
  • JoinPipe
  • LastElementPipe: retourne le dernier élément d'un tableau
  • SplitPipe
  • ToFixedPipe

Structure

@core

CoreModule est censé contenir les services globaux et les modèles. Il y a plusieurs autres fichiers utiles :

  • core.constants.ts pour stocker les constantes de l'application (à ne pas confondre avec environment.ts)
  • core.utils.ts pour stocker les fonctions simples que vous voulez pouvoir utiliser partout

@theme

ThemeModule est censé contenir les ressources globales qui peuvent être utilisées dans les templates (composants, directives, pipes, etc.). vous pouvez aussi y trouver un dossier nommé styles contenant les fichiers suivants :

  • custom-spectre.css.scss importe et configure Spectre.css
  • main.scss définit les styles globaux
  • variables.scss stocke les variables SCSS

@modules

Ceci est censé contenir les modules qui sont susceptibles d'être importés à divers endroits de l'application.

Configuration

Le projet a été initialisé avec le CLI Angular puis modifié.

Débogage

.vscode/launch.json permet d'attacher le débogueur à Chrome.

i18n

L'i18n a été configurée de cette manière :

  • le code source est en Anglais et il y a une traduction en Français
  • les fichiers de langue sont stockés dans src/locale
  • la commande de génération génère toutes les localisations configurées
  • le HREF de base est vide pour la langue du code source et défini comme le code de la langue pour les traductions
  • une traduction manquante lance une erreur et arrête la génération

Routing

Les routes inexistantes sont redirigées vers l'accueil et la restauration de la position du défilement est activée.