Share
Une application angulaire est composée de composants. Dans une application Angular, un composant est constitué d'un modèle HTML et d'une classe de composants. De la documentation officielle:
Les composants sont le bloc de construction le plus fondamental d'une interface utilisateur dans une application angulaire. Une application angulaire est un arbre de composants angulaires. Les composants angulaires sont un sous-ensemble de directives. Contrairement aux directives, les composants ont toujours un modèle et un seul composant peut être instancié par élément dans un modèle..
Dans ce didacticiel, vous apprendrez à créer un gestionnaire de liste d'épicerie à l'aide de Angular..
Vous aurez besoin de la version de nœud> 6.9.x et du gestionnaire de package de nœud (npm)> 3.x.x. Une fois que vous avez les deux, essayez d’installer la CLI angulaire à l’aide de npm.
npm install -g @ angular / cli
Après avoir installé la CLI angulaire, essayez de créer un projet utilisant le même.
ng new AngularGrocery --skip-npm
La commande ci-dessus créera la structure du projet. Accédez au répertoire du projet et installez les dépendances requises.
cd AngularGrocery npm installer
Pour démarrer le serveur Web de l'application, tapez la commande suivante:
ng servir
Une fois le serveur d'applications démarré, pointez votre navigateur sur http: // localhost: 4200 / et vous pourrez afficher l'application par défaut..
La figure ci-dessus montre la structure d'application pour notre gestionnaire de liste d'épicerie. le src Le dossier contient le code source de l'application par défaut. le app dossier à l'intérieur du src dossier contient le code TypeScript. index.html à l'intérieur de src dossier est le fichier HTML principal dans lequel les composants angulaires créés sont rendus.
Par défaut, l'application dispose d'un app-root composant. Créons un nouveau composant appelé app-épicerie pour créer notre application de gestion d'épicerie. Dans le dossier de l'application, créez un fichier appelé app.grocery.ts.
Importer le Composant module de la noyau angulaire.
importer composant de '@ angular / core';
Vous utiliserez Bootstrap pour concevoir le composant. Téléchargez et incluez le paquet Bootstrap à partir du site officiel. Gardez les fichiers dans le src / actifs dossier.
Définissons le composant à l'intérieur du app.grocery.ts fichier. Le composant aura trois propriétés: sélecteur, modèle, et styleUrls. sélecteur indique la manière dont le composant sera utilisé. modèle définit le code HTML qui sera rendu lors de l'utilisation du sélecteur particulier. styleUrls définit l'URL des styles utilisés dans le composant.
À l'intérieur app.grocery.ts, une fois le module de composant importé, définissez le app-épicerie composant comme indiqué:
@Component (sélecteur: 'app-épicerie', templateUrl: './app.grocery.html', styleUrls: ['… /assets/css/bootstrap.min.css'])
Comme indiqué dans le code ci-dessus, le composant utilise un modèle appelé app.grocery.html. Créez un fichier appelé app.grocery.html à l'intérieur de src / app dossier. Ajoutez le code suivant au app.grocery.html fichier:
Gestionnaire de liste d'épicerie
dans le app.grocery.ts fichier, ajoutez le EpicerieComponent classe à exporter.
classe d'exportation GroceryComponent
Vous devez importer le composant nouvellement créé à l’intérieur du app.module.ts avant de pouvoir l'utiliser. Importer le EpicerieComponent dans le app.module.ts.
importer GroceryComponent de './app.grocery';
Déclarez et démarrez le composant Épicerie nouvellement créé dans le app.module.ts fichier.
@NgModule (déclarations: [GroceryComponent], importations: [BrowserModule, FormsModule, HttpModule], fournisseurs: [], bootstrap: [GroceryComponent])
Maintenant, vous êtes prêt à utiliser le composant Épicerie à l’intérieur du index.html page. Supprimer le composant par défaut de la index.html page et ajoutez le code HTML suivant:
Chargement…
Enregistrez les modifications ci-dessus et redémarrez le serveur. Accédez au navigateur à http: // localhost: 4200 / et vous aurez le composant Épicerie affiché..
Une fois qu'un élément est entré dans la zone de texte de saisie, vous devez le lire et l'enregistrer dans une liste. Pour lire l'entrée, vous utiliserez ngModel, ce qui le liera à une variable. Ajouter ngModel dans la zone de saisie.
Chaque fois que du texte est entré dans la zone de saisie, le texte tâche La variable est mise à jour en conséquence. Définir les tâche variable à l'intérieur du EpicerieComponent dans le app.grocery.ts fichier. Ajouter une variable appelée les tâches conserver un ensemble de tâches saisies.
tâche: chaîne; tâches = [];
En cliquant sur le bouton OK, la tâche sera ajoutée à la les tâches liste de collecte que vous avez définie à l'intérieur du EpicerieComponent. Définir un sur clic méthode à l'intérieur du EpicerieComponent pour gérer le bouton OK, cliquez sur. Voici à quoi ça ressemble:
onClick () this.tasks.push (name: this.task); this.task = ";
Ajoutez l'événement click au bouton OK comme indiqué:
Lorsque vous cliquez sur le bouton OK, la nouvelle tâche est ajoutée à la liste. les tâches liste de collection. le tâche la variable est également réinitialisée pour effacer la zone de texte saisie.
Enregistrez les modifications ci-dessus et, en entrant le tâche et en cliquant sur le bouton OK, la tâche est ajoutée à la les tâches collection. Pour afficher la collection de tâches, ajoutez une étendue à l'intérieur app.grocery.html.
Accentsconagua
tâches | json Entrez la tâche dans la zone de saisie et appuyez sur la touche D'accord bouton. Vous aurez le les tâches variable affichée en JSON sur la page.
Voici le complet app.grocery.ts fichier:
importer composant de '@ angular / core'; @Component (sélecteur: 'app-épicerie', templateUrl: './app.grocery.html', styleUrls: ['… /assets/css/bootstrap.min.css']) classe d'exportation GroceryComponent task: string ; tâches = []; onClick () this.tasks.push (name: this.task); this.task = ";
Maintenant, puisque vous avez les éléments ajoutés dans le les tâches variable, vous pouvez l’utiliser pour afficher les tâches. Vous allez utiliser le NgFor directive pour itérer le les tâches collection et créer dynamiquement le code HTML pour l’affichage des tâches. Vous allez afficher la tâche à l'intérieur de l'élément UL et répéter le LI à l'aide du bouton NgFor directif. Voici à quoi ça ressemble:
Comme indiqué dans le code ci-dessus, vous parcourez le les tâches variable et créer dynamiquement l’élément LI et le span. Voici comment la complète app.grocery.html fichier modèle ressemble:
Gestionnaire de liste d'épicerie
- Nom de la tâche
Enregistrez les modifications ci-dessus et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 4200 / et entrez la tâche et appuyez sur le bouton D'accord bouton. Chaque tâche ajoutée sera affichée dans la liste ci-dessous.
Dans ce tutoriel sur Angular, vous avez vu comment commencer à créer un gestionnaire de liste d'épicerie en utilisant Angular. Vous avez appris à créer la vue du composant Épicerie, à ajouter des éléments à la liste d'épicerie et à afficher les éléments ajoutés..
Dans la partie suivante de ce didacticiel, vous allez implémenter les fonctionnalités pour marquer les éléments terminés, archiver les éléments terminés et supprimer les éléments ajoutés..
Le code source de ce tutoriel est disponible sur GitHub. Faites-nous savoir vos suggestions dans les commentaires ci-dessous.
