La structrue d'un projet
angularApp
├── e2e
├── node_modules
├── src
│ ├── app
│ │ ├─Les composantes ICI on travaille
│ ├── assets
│ ├── environments
│ ├── index.hmtl
│ ├── styles.css
- node_modules :un dossier qui contient les dépendances du projet
- src:le dossier qui contient le code source de l'application
- app: le dossier le plus important dans les projets Angular, qui contient les fichiers de types components, routing,modules...
- index.html: le point d'entrer d'exécution du projet
- styles.css : le fichier de style global
La structure d'un projet Angular typique se compose de plusieurs fichiers et dossiers qui sont organisés de manière hiérarchique pour faciliter le développement et la maintenance de l'application. Voici un aperçu des fichiers et dossiers les plus importants :
La structure d'un projet Angular typique se compose de plusieurs fichiers et dossiers qui sont organisés de manière hiérarchique pour faciliter le développement et la maintenance de l'application. Voici un aperçu des fichiers et dossiers les plus importants :
e2e/: Ce dossier contient les fichiers de test End-to-End (E2E) de l'application.node_modules/: Ce dossier contient tous les modules Node.js installés via npm.src/: Ce dossier contient le code source de l'application, y compris les fichiers TypeScript, HTML, CSS et les fichiers d'assets tels que les images.app/: Ce dossier contient les fichiers de composants, de services, de directives et de modules qui constituent l'application.assets/: Ce dossier contient les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript externes.environments/: Ce dossier contient les fichiers de configuration pour les différents environnements, tels queenvironment.tspour le développement etenvironment.prod.tspour la production.index.html: C'est le point d'entrée de l'application, qui contient les balises<app-root>pour le composant racine.main.ts: C'est le point d'entrée de l'application côté client, qui charge le module principalAppModuleet démarre l'application.
angular.json: Ce fichier de configuration contient des informations sur le projet Angular, telles que les options de build et les dépendances.package.json: Ce fichier de configuration contient les informations sur le projet Node.js, les dépendances et les scripts npm.tsconfig.json: Ce fichier de configuration contient les options de compilation TypeScript pour le projet.tslint.json: Ce fichier de configuration contient les règles de linting TypeScript pour le projet.README.md: Ce fichier contient des informations sur le projet, y compris les instructions d'installation et d'utilisation.
En utilisant cette structure hiérarchique, les développeurs peuvent facilement organiser leur code et les ressources de l'application en fonction de leurs besoins.
Les composants dans Angular
Chaque component contient 3 fichiers :
- app.component.html :la template (interface graphique)
- app.component.ts : la partie logique de la component
- app.component.css : les styles CSS
- app.component.spec :un fichier de test
la component utilise un ensemble de libraires et api donc on doit les importer dans la component
Dans Angular, les décorateurs sont des fonctions spéciales qui permettent d'ajouter des métadonnées à des classes, des méthodes, des propriétés et des paramètres. Les décorateurs sont largement utilisés dans Angular pour fournir des fonctionnalités et des comportements supplémentaires à diverses parties d'une application.
Angular fournit plusieurs décorateurs intégrés, tels que @Component, @Directive, @Injectable, @Input, @Output et bien d'autres. Voici une brève explication de chacun de ces décorateurs :
@Component: Ce décorateur est utilisé pour définir un nouveau composant dans Angular. Il prend un objet de configuration en entrée et spécifie le sélecteur, le template, les styles et d'autres propriétés du composant.@Directive: Ce décorateur est utilisé pour définir une nouvelle directive dans Angular. Les directives sont utilisées pour ajouter un comportement aux éléments dans le DOM. Le décorateur@Directiveprend un objet de configuration en entrée et spécifie le sélecteur, les propriétés de l'hôte et d'autres propriétés de la directive.@Injectable: Ce décorateur est utilisé pour définir un nouveau service dans Angular. Les services sont utilisés pour partager des données et des fonctionnalités entre les composants et les directives. Le décorateur@Injectableest généralement utilisé avec une classe de service et permet de l'injecter dans d'autres composants ou services.@Input: Ce décorateur est utilisé pour définir une propriété d'entrée sur un composant ou une directive. Les entrées sont utilisées pour passer des données dans un composant ou une directive à partir de son parent.@Output: Ce décorateur est utilisé pour définir une propriété de sortie sur un composant ou une directive. Les sorties sont utilisées pour émettre des événements d'un composant ou d'une directive vers son parent.
b.le styles css -app.component.scss
le code TypeScript qui contient la logique de la component
Exemple:
La component Principale: app.component
-app.component:joue le rôle de la templates
L'app.component est le composant principal dans une application Angular. Il s'agit d'un composant racine qui agit comme un conteneur pour tous les autres composants de l'application.
Lorsque vous créez une nouvelle application Angular à l'aide de la commande "ng new", le framework génère automatiquement un fichier app.component.ts contenant une classe AppComponent qui est décorée avec l'annotation @Component.
L'app.component est ensuite utilisé dans le fichier app.module.ts pour initialiser l'application en tant que module Angular. Il est également utilisé comme point d'entrée pour l'application et peut être utilisé pour définir des routes, des gardes de navigation et d'autres fonctionnalités essentielles de l'application.
En résumé, l'app.component est le composant principal qui sert de point d'entrée pour une application Angular et qui contient les autres composants de l'application. Il est essentiel pour la configuration et l'initialisation de l'application.