- Vue globale de la structure du projet
- Explication de chaque fichier nécessaire au bon fonctionnement de l'application
- Des informations sur comment utiliser Angular
- /e2e
- /node_modules
- /src
- /.browserslistrc
- /.editorconfig
- /.gitignore
- /angular.json
- /karma.conf.js
- /package-lock.json
- /package.json
- /README.md
- /tsconfig.app.json
- /tsconfig.json
- /tsconfig.spec.json
- /tslint.json
-
Généré par
Angular CLI
, c'est un dossier qui contient les test End-To-End. Ils sont utiles lorsque l'on veut tester des fonctionnalités très complètes dans lesquelles le développeur à besoin d'une grande partie de l'application. -
Généré par
NPM
, c'est un dossier contenant toutes les dépendances externes nécessaires au bon fonctionnement du projet. -
Généré par
Angular CLI
, contient tous les fichiers nécessaires au bon fonctionement de l'application, dont les sources, les environements de développement (cf: /src/environments) et les assets (des images par exemples).-
Contient les fichiers de comopnents dans lesquels la logique et les données de l'application sont définies
-
Fichier servant à gérer les routes de l'application
-
Définit le modèle HTML associé au AppComponent
-
Définit la feuille de style CSS de base pour l'AppComponent
-
Définit un test unitaire pour l'AppComponent
-
Définit la logique du composant racine de l'application, nommé AppComponent. La vue associée à ce composant racine devient la racine de la hiérarchie des vues lorsque qu'on ajoute des components à l'application
-
Définit le module racine, nommé AppModule, qui indique à Angular comment assembler l'application. Initialement, déclare uniquement AppComponent. Lorsque qu'on ajoute des components à l'application, ils doivent être déclarés ici
-
-
Contient des images ou autre fichier de ressource pour l'application
-
Contient des options de configuration de construction pour des environnements particuliers. Par défaut, il existe un environnement de développement standard sans nom et un environnement de production ("prod")
-
Ce fichier est un fichier icon: c'est celui utilisé par défaut dans le navigateur
-
La page HTML principale qui est envoyée lorsqu'un internaute visite votre site. La CLI ajoute automatiquement tous les fichiers JavaScript et CSS lors de la création de votre application, donc pas besoin d'ajouter manuellement des balises <script> ou <link> (sauf pour Bulma par exemple)
-
Le principal point d'entrée de votre application
-
Généré par la CLI, fournit des scripts polyfill pour la prise en charge du navigateur
-
Répertorie les fichiers CSS qui fournissent des styles pour un projet. L'extension reflète le préprocesseur de style que vous avez configuré pour le projet (CSS, SASS, SCSS...)
-
Le point d'entrée principal pour vos tests unitaires, avec une configuration spécifique à Angular
-
-
La configuration pour partager les navigateurs cibles et les versions de Node.js entre différents outils front-end. Voir github/browserslist
-
Configuration pour les éditeurs de code
-
Permet de dire à Git d'ignorer certains fichiers ou dossier lors des comits (notamment
node_module
) -
Paramètres de configuration d'
Angular CLI
, avec les options de configuration pour les outils de génération, de service et de test dont la CLI a besoin -
Configuration Karma spécifique à l'application
-
Fournit des informations de version pour tous les packages installés dans node_modules par
NPM
-
Configurer les dépendances
NPM
pour le projet -
Documentation pour l'application de base (on pourrait en avoir une pour chaque component ou page de cette dernière)
-
Configuration TypeScript spécifique à l'application. Comprend aussi les options du compilateur de modèles TypeScript et Angular
-
La configuration TypeScript de base pour les projets dans l'espace de travail
-
Configuration TypeScript pour les tests d'application
-
Configuration TSLint par défaut pour les projets dans l'espace de travail
- Installation
L'Angular CLI
est l'invité de commande Angular, pour créer des projets, les compiler, ajouter des components etc.
Pour l'installer, il faut avoir NPM
, puis faire npm install -g @angular/cli
.
Vous pouvez ensuite utiliser les commandes relatives à angular.
- Compilation
Pour compiler le projet Angular, il faut ouvrir un terminal dans le dossier racine de l'application (./projet-rp/) et écrire ng serve
. Ensuite, allez sur l'URL donnée par Angular dans la console dans et vous aurez accès à l'application.
C'est comme un live server, donc vous pouvez le laisser tourner et les modifications seront appliquées en direct
- Créer une nouvelle page
Pour créer une nouvelle page, il faut générer un nouveau component. Pour ce faire, il faut ouvrir un terminal dans le dossier racine de l'application (./projet-rp/) et écrire ng generate component nom-du-component
(le component devrait être écrit en Kebab Case (lien) minuscule, avec un nom court et descriptif, en anglais de préférence. Acceuil sera alors "home" par example)
Il faudra ensuite ajouter ce component au routeur.
Attention, une page ne doit contenir que ce son contenu: pas de header, footer ni rien, tout cela sera géré par le composant racine. Il faut s'imaginer qu'on construit une maison, le component racine AppComponent représente les fondations, chaque page un mur: pas besoin de remettre des fondations en dessous de chaque mur, une fois suffit.
- Ajouter une page au routeur
Allez dans src/app/app-routing.module.ts
. Il y a un objet Routes
. Pour y en ajouter une nouvelle, il suffit d'ajouter les bonnes données dans ce tableau :
{
path: "", // Route pour accéder à la page, par exemple "home"
component: // Nom de votre component, par exemple HomeComponent
}
Quand vous ajoutez une nouvelle route, il faut faire attention à bien laisser la route
{
path: "",
redirectTo: "/home",
pathMatch: "full"
}
en dernier.
Il faut maintenant importer le component. Pour ce faire, il suffit d'ajouter, en haut du script la ligne
import { /* Nom du component */ } from /* Chemin du component */;
// Par exemple, avec le component Home, il faudrait écrire
import { HomeComponent } from './home/home.component';
- Ajouter un lien vers une page
Pour faire un lien vers une page, il suffit d'ajouter deux propriétés à n'importe quel élément:
<p class="title" routerLike="route" routerLinkActive="active">Lorem Ipsum</p>
Par exemple, pour rediriger vers la page "home, il faudrait écrire
<p class="title" routerLike="home" routerLinkActive="active">Accueil</p>
L'élément va ensuite se comporter comme un lien. Cette méthode s'applique sur n'importe quel élément HTML.