Créer votre première application Angular: Notions de base

() translation by (you can also view the original English article)

Angular est devenu très populaire au cours des deux dernières années. Vous pouvez utiliser ce framework JavaScript open-source pour créer des applications web et mobiles. Si vous avez pensé à apprendre Angular mais vous ne savez pas par où commencer, suivre cette série pourrait être une bonne idée.

Le but de cette série est de couvrir les notions de bases du framework Angular tout en créant une application très simple qui montre des informations sur différents pays. Angular est écrit en TypeScript, il est donc logique que vous écriviez votre propre code en TypeScript.

Vous n'avez pas besoin de s'inquiéter si vous n'avez jamais utilisé TypeScript auparavant. Pour le dire simplement, TypeScript est juste typé JavaScript avec des fonctionnalités supplémentaires. J’ai également écrit une série intitulée TypeScript pour les Débutants sur Envato Tuts +, où vous pouvez commencer à apprendre les bases du TypeScript.

Mise en route

Si vous êtes déjà familiarisé avec TypeScript, vous pouvez simplement commencer à créer votre première application Angular.

La première étape serait d’installer Node.js. Vous pouvez aller sur le site officiel et télécharger la version appropriée. Le gestionnaire de paquets node npm s’installera avec Node.js.

L’étape suivante consiste à installer TypeScript en exécutant la commande suivante. Je vous recommande d’installer une version supérieure à TypeScript 2.1.

1	npm install -g typescript

Enfin, vous devez installer Angular CLI en exécutant la commande suivante. L'installation d'Angular CLI rendra le processus de création de votre application Angular plus facile.

1	npm install -g @angular/cli

Maintenant, vous pouvez créer une nouvelle application Angular en exécutant la commande suivante dans votre terminale. Avant d’exécuter la commande, assurez-vous que vous êtes dans le répertoire où vous souhaitez créer l’application.

1	ng new country-app

Installer toutes les dépendances pour le projet prend quelque temps, alors merci de patientez le temps que Angular CLI met en place votre application. Une fois l’installation terminée, vous obtenez un dossier nommé country-app dans le répertoire courant. Vous pouvez exécuter votre application dès maintenant en remplaçant le répertoire par country-app et puis en exécutant ng serve dans la console.

1	cd country-app
2	ng serve --open

Ajouter--open va ouvrir automatiquement votre application dans le navigateur à http://localhost:4200 /.

Présentation de l'application Informations de pays

L’application de renseignements de pays que nous créons aura trois composantes. Le HomeComponent indique les trois premiers pays sous différentes catégories comme population, GDP et zone. Vous serez en mesure de cliquer sur le nom de chaque pays pour en savoir plus à ce sujet. Les informations supplémentaires concernant le pays figure à l’aide d’un autre composant, qui nous demanderons la CountryDetailComponent. Il y aura un élément de plus dans notre application, qui sera utilisée pour afficher une liste de tous les pays que nous avons conservé dans notre application.

Puisqu’il s’agit de votre première application angulaire, notre principal objectif sera de garder les choses simples sans ajouter n’importe quelle fonctionnalité compliquée. Une fois que vous avez une bonne connaissance des bases, création d’applications plus complexes semblera pas comme une tâche ardue.

L’image ci-dessous est la page d’accueil ou HomeComponent dans notre application de renseignements du pays. Comme vous pouvez le voir, il y a trois pays dans chacune des catégories, et ils ont été placés dans l’ordre décroissant. Lors de la création du HomeComponent, vous apprendrez comment trier différents pays avant de les afficher à l’intérieur du modèle.

L’illustration suivante montre la page « all countries page » ou AllCountriesComponent de notre application. La mise en page de ce composant est très similaire à la HomeComponent. La seule différence est que cette fois que nous sommes répertoriant tous les pays ainsi que de leurs capitales respectives.

Si vous cliquez sur la case de tout pays restitué à l’intérieur du HomeComponent ou AllCountriesComponent, vous passerez à la page de détail de pays ou du CountryDetailComponent. Les informations fournies concernant un pays ne sont pas modifiables.

Il y a un bouton "retour" après les détails de chaque pays. Ce bouton "retour" vous ramène à la page ou composant précédent. Si vous êtes venu à la CountryDetailComponent de la HomeComponent, vous reviendra en arrière à la HomeComponent. Si vous êtes arrivé à la CountryDetailComponent de la AllCountriesComponent, vous reviendra en arrière à la AllCountriesComponent.

Se référant aux différentes composantes que nous créons en tant que pages n’est pas techniquement correcte. Cependant, j’utilise indifféremment des termes comme page d’accueil ou HomeComponent parce qu’en voyant beaucoup de termes inconnus comme composants de routage, et décorateurs peuvent être intimidants pour les lecteurs qui n’ont jamais créé un app angulaire avant. En utilisant ces termes lâche pour cette série peut vous aider à apprendre rapidement au lieu de se confondre par le jargon.

Les notions de base Angular

Avant de commencer la création de notre application, vous devez être à l’aise avec les concepts de base du moment cinétique. Cette section couvrira très brièvement les sujets importants comme les composants et modèles.

Les composants sont les éléments constitutifs d’une application angulaire. Ils vous permettent de contrôler l’interface utilisateur de votre application. Un composant de base se compose de deux parties : un décorateur et une définition de classe. Vous pouvez spécifier la logique d’application pour un composant à l’intérieur de la classe.

Le décorateur de composant est utilisé pour spécifier des informations comme un sélecteur personnalisé pour identifier le composant, le chemin vers le modèle HTML et les règles de style à appliquer à l’élément.

Voici un décorateur de composant de base qui définit les trois valeurs pour CountryDetailComponent :

@Component({
    selector: 'app-country-detail',
    templateUrl: './country-detail.component.html',
    styleUrls: ['./country-detail.component.css']
})

Tous les composants que nous créons aura un sélecteur personnalisé qui spécifie la balise qui rend le composant à l’intérieur du navigateur. Ces balises personnalisées peuvent avoir n’importe quel nom que vous voulez. Par exemple, nous allons créer un countryDetailComponent dans le troisième tutoriel de la série, et nous utiliserons notre propre balise personnalisée appelée app-country-detail pour rendre ce composant dans le navigateur.

Tout élément que vous créez sera composé d’un modèle qui contrôle ce qui est restitué sur la page de l’application. Par exemple, le countryDetailComponent a deux balises div qui agissent comme un wrapper autour du contenu principal de la composante. Chaque élément d’information sur un pays est mis à l’intérieur de sa propre balise p, et le nom du pays est placée à l’intérieur d’une balise h2. Toutes ces balises peuvent être stockés ensemble comme un modèle pour le countryDetailComponent et ensuite rendus en tant qu’unité. Ce modèle du composant peut être sauvegardé comme un fichier HTML ou spécifié directement à l’intérieur de la décoratrice à l’aide de l’attribut template.

Différentes composantes de notre application devra récupérer les données à afficher sur l’écran. Nous allons créer une classe de service qui contiendra les fonctions pour nous aider à récupérer ces données et tri ou de modifier une manière ou une autre. Nous utiliserons ensuite les fonctionnalités des classes de différents composants pour afficher ces données à l’utilisateur.

Vous pouvez envisager un Service simplement être toute valeur, fonction ou fonctionnalité dont votre application a besoin. Obtention de tous les pays, stockés à l’intérieur de notre application est un service et donc est tri et leur affichage. Tous les trois composants dans notre classe utilisera les fonctions de notre service pour récupérer des données.

Lorsque vous créez des composants de votre application, vous devrez importer les dépendances des modules différents. Par exemple, nous importeront Component de la @angular/core chaque fois que nous avons créer un composant de la nôtre. Vous pouvez également utiliser la même syntaxe pour importer des dépendances qui ont été créés par vous. La partie à l’intérieur d’accolades est utilisée pour spécifier l’interdépendance que vous souhaitez importer, et la partie from sert à spécifier où angulaire peut trouver la dépendance.

Voici un extrait de code du country-app pour que nous allons créer. Comme vous pouvez le voir, nous importons Component et OnInit de la @angular/core. De même, nous importons Country et le CountryService de fichiers que nous avons créé nous-mêmes.

1	import { Component, OnInit } from '@angular/core';
2
3	import { Country } from '../country';
4	import { CountryService } from '../country.service';

Le Shell de l’Application

Après que vous avez exécuté la commande de ng new country-app , Angular CLI créé un tas de fichiers et dossiers pour vous. Voir autant de fichiers peut être intimidant, comme un débutant, mais vous n’avez pas besoin de travailler avec tous ces fichiers. Lors de la création de notre application de pays, nous seront uniquement modifier les fichiers déjà existants dans le dossier src/app ainsi que la création de nouveaux fichiers dans le même répertoire. Droit maintenant, vous devriez avoir cinq différents fichiers dans le dossier src/app. Ces fichiers créent une coquille d’application qui servira à mettre sur pied le reste de notre application.

Le fichier app.component.ts contient la logique pour notre composant écrit en caractères dactylographiés. Vous pouvez ouvrir ce fichier et mettre à jour la propriété title de la classe AppComponent pour « Fun Facts About Countries ». Le fichier app.component.ts devrait maintenant avoir le code suivant.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Fun Facts About Countries';
}

Le fichier app.component.html contient le modèle pour notre classe de AppComponent. Ouvrez le fichier app.component.html et remplacez le texte souvent utilisé le code HTML à l’intérieur par la ligne suivante :

1	<h1>{{title}}</h1>

En enroulant le title à l’intérieur des accolades, nous disons angulaire pour mettre la valeur de la propriété title de la classe AppComponent à l’intérieur de la balise h1.

Nous mettrons à jour ce fichier dans le dernier tutoriel de la série pour restituer des éléments nouveaux que nous allons créer. Pour l’instant, il lui suffit de montrer le titre de notre application.

Les modifications apportées à ce fichier apparaîtra automatiquement dans le navigateur à http://localhost:4200 /. Assurez-vous simplement que la console est toujours ouverte et vous avez déjà tapé dans la commande ng serve depuis le début du tutoriel.

Différentes fonctions et fonctionnalités de l’application seront contrôlées par plusieurs composants plus simples que nous allons créer plus tard. Vous pouvez considérer cette coquille d’application comme une voiture et les différents éléments que nous allons créer comme pièces de cette voiture comme le moteur et les roues. Chaque composant effectuera sa fonction spécifique, et vous pouvez les mettre tous ensemble pour créer la voiture entière.

Réflexions finales

Le but de ce tutoriel est de vous aider à installer tous les outils nécessaires dont vous avez besoin pour créer une application Angular et passer rapidement sur certains concepts fondamentaux de ce framework.

Pour résumer, vous devez connaître les notions de bases du TypeScript, avant de pouvoir créer une application Angular. Dans l’étape suivante, vous devez installer Node.js, TypeScript et Angular CLI. Après cela, vous pouvez simplement exécuter un tas de commandes à partir de la section Mise en route de ce tutoriel et votre première application Angular sera lancée et fonctionnel.

Notre application de pays fait beaucoup plus que voir le titre. Dans le tutorial suivant, vous allez créer un peu de classes et de services qui seront utilisés pour stocker et récupérer des données sur différents pays. Ces classes et services seront utiles dans les troisième et quatrième tutoriels, où nous allons créer les différentes composantes de notre application.

Pendant que nous travaillons sur cette série de tutoriels, n'oubliez pas de consulter Envato Market pour voir ce qui est disponible pour l'utilisation et l'étude qui concerne Angular et JavaScript, en général.