Share
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 envisagez d'apprendre Angular mais ne savez pas par où commencer, suivre cette série pourrait être une bonne idée..
L'objectif de cette série est de couvrir les bases de Angular tout en créant une application très simple qui affiche des informations sur différents pays. Angular est écrit en TypeScript. Il est donc logique que vous écriviez également votre propre code dans TypeScript..
Ne vous inquiétez pas si vous n'avez jamais utilisé TypeScript auparavant. Pour le dire simplement, TypeScript est simplement typé JavaScript avec des fonctionnalités supplémentaires. J'ai également écrit une série intitulée TypeScript for Beginners sur Envato Tuts +, dans laquelle vous pouvez apprendre les bases de TypeScript..
Si vous connaissez déjà TypeScript, vous pouvez simplement créer votre première application Angular..
La première étape consisterait à installer Node.js. Vous pouvez vous rendre sur le site officiel et télécharger la version appropriée. Le gestionnaire de package de noeud sera installé avec Node.js.
L'étape suivante consiste à installer TypeScript en exécutant la commande suivante. Je vous recommande d'installer une version TypeScript sur la version 2.1.
npm install -g typescript
Enfin, vous devez installer la CLI angulaire en exécutant la commande suivante. Installer Angular CLI facilitera le processus de création de votre application Angular.
npm install -g @ angular / cli
Maintenant, vous pouvez créer une nouvelle application Angular directement en utilisant la commande suivante dans le terminal. Avant d'exécuter la commande, assurez-vous d'avoir déplacé le répertoire dans lequel vous voulez créer l'application..
ng nouvelle application de pays
L'installation de toutes les dépendances pour le projet prend un certain temps. Veuillez patienter pendant que Angular CLI configure votre application. Une fois l’installation terminée, vous verrez un dossier nommé app pays dans le répertoire en cours. Vous pouvez exécuter votre application dès maintenant en modifiant le répertoire en app pays puis en cours d'exécution ng servir dans la console.
cd country-app ng serve --open
Ajouter --ouvrir ouvrira automatiquement votre application dans le navigateur à l'adresse http: // localhost: 4200 /.
L'application d'informations sur les pays que nous créons comportera trois éléments. le AccueilComposant affichera les trois premiers pays dans diverses catégories telles que la population, le PIB et la superficie. Vous pourrez cliquer sur le nom de chaque pays pour en savoir plus. Les informations supplémentaires sur le pays sont répertoriées à l'aide d'un autre composant, que nous appellerons le CountryDetailComponent. Il y aura un composant supplémentaire dans notre application, qui sera utilisé pour afficher une liste de tous les pays que nous avons stockés dans notre application..
Comme il s’agit de votre première application Angular, notre objectif principal sera de garder les choses simples sans ajouter de fonctionnalités compliquées. Une fois que vous maîtriserez les bases, créer des applications plus complexes ne vous semblera pas une tâche ardue..
L'image ci-dessous est celle de la page d'accueil ou AccueilComposant dans notre application d'information pays. Comme vous pouvez le constater, il y a trois pays dans chaque catégorie et ils ont été classés par ordre décroissant. En créant le AccueilComposant, vous apprendrez à trier les différents pays avant de les afficher à l'intérieur du modèle.
L'image suivante montre la "page de tous les pays" ou Tous les paysComposant de notre application. La disposition de ce composant est très similaire à la AccueilComposant. La seule différence est que cette fois nous listons tous les pays avec leurs capitales.
Si vous cliquez sur la case de n'importe quel pays rendue à l'intérieur du AccueilComposant ou la Tous les paysComposant, vous serez dirigé vers la page de détail du pays ou CountryDetailComponent. Les informations fournies sur un pays ne sont pas modifiables.
Il y a un bouton de retour après les détails de chaque pays. Ce bouton de retour vous ramène au composant ou à la page précédente. Si vous êtes venu au CountryDetailComponent du AccueilComposant, vous serez ramené à la AccueilComposant. Si vous êtes arrivé au CountryDetailComponent du Tous les paysComposant, vous serez ramené à la Tous les paysComposant.
Faire référence à différents composants que nous créons en tant que pages n’est pas techniquement correct. Cependant, j'utilise des termes tels que page d'accueil ou AccueilComposant de manière interchangeable, car voir de nombreux termes inconnus tels que routage, composants et décorateurs peut être intimidant pour les lecteurs qui n'ont jamais créé d'application Angular auparavant. L'utilisation de ces termes pour cette série peut vous aider à apprendre rapidement au lieu d'être confus par le jargon.
Avant de commencer à créer notre application, vous devez être à l'aise avec les concepts de base de Angular. Cette section couvrira très brièvement des sujets importants tels que les composants et les modèles..
Les composants sont les blocs de construction d'une application angulaire. Ils vous permettent de contrôler l'interface utilisateur de votre application. Un composant de base comprend deux parties: un décorateur et une définition de classe. Vous pouvez spécifier la logique d'application d'un composant dans la classe..
Le décorateur de composants est utilisé pour spécifier des informations, telles qu'un sélecteur personnalisé, permettant d'identifier le composant, le chemin d'accès au modèle HTML et les règles de style à appliquer au composant..
Voici un décorateur de composants de base qui définit les trois valeurs pour CountryDetailComponent:
@Component (sélecteur: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css'])
Tous les composants que nous créons auront un sélecteur personnalisé qui spécifie la balise qui rend le composant dans le navigateur. Ces balises personnalisées peuvent avoir le nom de votre choix. Par exemple, nous allons créer un countryDetailComponent dans le troisième tutoriel de la série, et nous allons utiliser notre propre balise personnalisée appelée app-pays-detail rendre ce composant dans le navigateur.
Tout composant que vous créez sera constitué d'un modèle qui contrôle ce qui est rendu sur la page de l'application. Par exemple, le countryDetailComponent a deux div balises qui agissent comme une enveloppe autour du contenu principal du composant. Chaque information sur un pays est mise dans son propre p tag, et le nom du pays est mis à l’intérieur d’un h2 étiquette. Toutes ces balises peuvent être stockées ensemble en tant que modèle pour la countryDetailComponent et ensuite rendu comme une unité. Ce modèle de composant peut être enregistré en tant que fichier HTML ou spécifié directement dans le décorateur à l'aide de la commande modèle attribut.
Différents composants de notre application devront récupérer les données à afficher à l'écran. Nous allons créer une classe de service qui contiendra des fonctions nous permettant de récupérer ces données et de les trier ou les modifier d’une manière ou d’une autre. Nous utiliserons ensuite les fonctionnalités de différentes classes de composants pour afficher ces données à l'utilisateur..
Vous pouvez envisager un Un service être simplement n'importe quelle valeur, fonction ou fonctionnalité dont votre application a besoin. Obtenir tous les pays stockés dans notre application est un service, ainsi que de les trier et de les afficher. Les trois composants de notre classe utiliseront les fonctions de notre service pour récupérer des données..
Lors de la création de composants pour votre application, vous devrez importer des dépendances à partir de différents modules. Par exemple, nous allons importer Composant du @ angulaire / noyau chaque fois que nous créons notre propre composant. Vous pouvez également utiliser la même syntaxe pour importer des dépendances que vous avez créées. La partie entre accolades est utilisée pour spécifier la dépendance que vous souhaitez importer, et la partie après de est utilisé pour spécifier où Angular peut trouver la dépendance.
Voici un extrait de code de la app pays que nous allons créer. Comme vous pouvez le constater, nous importons Composant et OnInit du @ angulaire / noyau. De même, nous importons un Pays et CountryService à partir de fichiers que nous avons créés.
importer Component, OnInit à partir de '@ angular / core'; importer Pays de '… / pays'; importer CountryService de '… /country.service';
Après avoir couru le ng nouvelle application de pays commande, l’interface CLI angulaire a créé pour vous un ensemble de fichiers et de dossiers. Voir autant de fichiers peut être intimidant pour 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 ne modifierons que les fichiers existant déjà dans le répertoire. src / app dossier ainsi que la création de nouveaux fichiers dans le même répertoire. À l'heure actuelle, vous devriez avoir cinq fichiers différents dans le src / app dossier. Ces fichiers créent un shell d'application qui sera utilisé pour assembler le reste de notre application..
le app.component.ts Le fichier contient la logique de notre composant écrit en TypeScript. Vous pouvez ouvrir ce fichier et mettre à jour le Titre propriété du AppComponent classe à «Faits amusants sur les pays». le app.component.ts le fichier devrait maintenant avoir le code suivant.
importer composant de '@ angular / core'; @Component (sélecteur: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']) exportez la classe AppComponent title = 'Faits intéressants sur les pays ';
le app.component.html fichier contient le modèle pour notre AppComponent classe. Ouvrez le app.component.html fichier et remplacez le code HTML standard à l’intérieur par la ligne suivante:
Titre
En emballant Titre à l'intérieur des accolades, nous disons Angular de mettre la valeur de Titre propriété du AppComponent classe à l'intérieur du h1 étiquette.
Nous mettrons à jour ce fichier dans le dernier tutoriel de la série pour afficher les nouveaux composants que nous allons créer. Pour l'instant, il suffit de montrer le titre de notre application.
Les modifications apportées à ce fichier seront automatiquement répercutées dans le navigateur à l'adresse http: // localhost: 4200 /. Assurez-vous simplement que la console est toujours ouverte et que vous avez déjà saisi le mot de passe. ng servir commande 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 créerons plus tard. Vous pouvez considérer cette application comme une voiture et différents composants que nous allons créer en tant que pièces de cette voiture, comme le moteur et les roues. Chaque composant remplira sa fonction spécifique et vous pourrez les assembler pour créer la voiture entière..
Le but de ce tutoriel était de vous aider à installer tous les outils nécessaires pour créer une application Angular et à passer rapidement en revue certains concepts angulaires fondamentaux..
Pour résumer, vous devez connaître les bases de TypeScript avant de pouvoir créer une application angulaire. Dans l'étape suivante, vous devez installer Node.js, TypeScript et la CLI angulaire. Après cela, vous pouvez simplement exécuter plusieurs commandes à partir de la section Mise en route de ce tutoriel et votre première application Angular sera opérationnelle..
Notre application de pays fera beaucoup plus que simplement montrer le titre. Dans le prochain tutoriel, vous allez créer quelques classes et 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 créerons différents composants de notre application..
Pendant que nous travaillons sur cette série de didacticiels, n'oubliez pas de consulter Envato Market pour savoir ce qui est disponible pour utilisation et étude pour Angular et JavaScript, en général..
Accentsconagua