IONIC - 3.4 Structure du projet avec Angular

Bienvenue dans cette vidéo. Pour réaliser notre projet, nous aurons besoin de connaître quelques fonctionnalités Angular. Dans un premier temps, nous allons voir la structure du projet, puis dans un second temps quelques directives indispensables. Regardons en détail l'ensemble des fichiers générés à la création d'un projet Ionic. Mon dossier s'appelle angular-test : c'est un projet vierge que je viens d'installer.

Structure des fichiers

  • e2e/ : pour les tests fonctionnels et d'intégration (non utilisé ici).
  • node_modules/ : les modules installés au préalable.
  • src/ : le dossier principal où nous développerons. Il contient le composant app par défaut (HTML, CSS, TypeScript), le fichier app-routing.module.ts pour le routage et app.module.ts, le cœur de démarrage du projet où l'on déclare les modules nécessaires.
  • environments/ : contient deux fichiers, un pour le développement et un pour la production.
  • index.html, main.ts, styles.css (où importer Bootstrap si besoin), test.ts pour les tests unitaires.
  • angular.json : configuration Angular CLI ; karma.conf.js : tests unitaires ; package.json : dépendances ; tsconfig.json : configuration TypeScript.

Passons maintenant aux directives Angular dont nous aurons besoin : *ngIf, *ngFor, [(ngModel)] et (click). La petite étoile devant ngIf et ngFor est une syntaxe obligatoire pour qu'Angular sache qu'il s'agit d'une directive structurelle ; ces directives proviennent du CommonModule. Par exemple, *ngIf="isUserLoggedIn" affichera le nom de l'utilisateur uniquement si la condition est vraie. La directive *ngFor permet de boucler sur un tableau et d'injecter les éléments dans le DOM, avec la possibilité de récupérer l'index, le premier ou le dernier élément (*ngFor="let book of books; let i = index; let first = first").

[(ngModel)] crée une liaison bidirectionnelle entre un élément de formulaire HTML et une propriété du composant : la valeur du contrôle est synchronisée avec les données de l'application. Pour la to-do list, nous l'utiliserons sur un <ion-input> afin de récupérer le nom de la tâche saisie. Enfin, (click) permet d'appeler une fonction lors d'un clic. La notation entre parenthèses s'applique à tous les événements dans les versions modernes d'Angular (différente de l'AngularJS d'origine). Pour aller plus loin, je vous conseille la documentation officielle Angular : les forums comme Stack Overflow peuvent aider, mais leurs réponses sont parfois datées d'un an ou plus. Cette vidéo touche à sa fin, nous sommes parés pour notre projet !

En résumé

Cette leçon présente la structure complète d'un projet Ionic/Angular créé avec la CLI, en détaillant les dossiers clés (`src/`, `node_modules/`) et fichiers essentiels (`app.module.ts`, `angular.json`, `package.json`, `index.html`). Elle introduit ensuite les quatre directives Angular fondamentales (*ngIf, *ngFor, ngModel, (click)) avec des exemples concrets pour manipuler l'affichage, itérer sur des listes, créer des liaisons bidirectionnelles et gérer les événements utilisateur.

Points clés

  • Dossier src/ : emplacement central du développement (composants, TypeScript, CSS, routage)
  • Fichier app.module.ts : point d'entrée du projet où on enregistre les modules Angular
  • Dossier environments/ : configurations distinctes pour dev et prod
  • Directive *ngIf : affichage conditionnel d'éléments basé sur une valeur booléenne
  • Directive *ngFor : itération sur des arrays et injection dynamique d'éléments avec accès à l'index
  • Directives ngModel et (click) : liaison de données bidirectionnelle et gestion des événements utilisateur (formulaires, clics)

Questions fréquentes

Quel est le rôle du fichier app.module.ts ?

C'est le cœur de démarrage du projet Angular. Il permet d'enregistrer et de déclarer tous les modules dont le projet a besoin.

Comment fonctionne la directive *ngIf ?

Elle affiche ou masque un élément HTML selon le résultat d'une condition booléenne. L'astérisque (*) est une syntaxe spéciale Angular requise pour que le framework reconnaisse qu'il s'agit d'une directive structurelle.

Quelle est la différence entre les fichiers de configuration dev et prod ?

Le dossier environments/ contient deux fichiers : l'un pour le développement (permettant le débogage) et l'autre pour la production (optimisé pour le déploiement).