Share
Avant de poursuivre ce didacticiel, il est judicieux de résumer tout ce que nous avons fait jusqu'à présent afin d'éviter toute confusion et toute erreur. Si vous avez manqué l’une des étapes des trois derniers tutoriels, c’est une bonne idée de revenir en arrière et d’apporter les modifications nécessaires..
Dans le deuxième tutoriel, nous avons créé trois fichiers différents nommés pays.ts, country-data.ts, et pays.service.ts. le pays.ts le fichier est utilisé pour stocker le Pays définition de classe afin que nous puissions l'importer dans différents fichiers. le country-data.ts le fichier est utilisé pour stocker un tableau nommé DES PAYS.
Ce tableau stocke tous les objets de pays que nous voulons afficher dans notre application. le pays.service.ts fichier est utilisé pour définir un CountryService classe avec toutes les méthodes que nous allons utiliser pour accéder aux informations sur différents pays en un seul endroit. Les méthodes du CountryService classe sont utilisés pour obtenir les meilleurs pays en fonction de critères tels que la population et la région ou pour trouver des informations sur un pays avec un nom donné.
Dans le troisième tutoriel, nous avons créé le AccueilComposant pour notre application. Cela a été fait avec l'aide de trois fichiers différents nommés home.component.ts, home.component.html, et home.component.css. le home.component.ts fichier contenait la définition de la AccueilComposant classe avec différentes méthodes et propriétés pour accéder et stocker des informations sur tous les pays.
Les méthodes à l'intérieur du AccueilComposant classe s'appuie sur les méthodes définies dans pays.service.ts pour obtenir toutes les données. le home.component.html Le fichier est utilisé pour stocker le modèle qui sera utilisé lors de l’affichage de toutes les données auxquelles accèdent les méthodes définies dans l’affichage. home.component.ts fichier. le home.component.css Le fichier est utilisé pour fournir différentes règles de style permettant de contrôler l'apparence de différents éléments dans notre modèle..
Dans le quatrième tutoriel, nous avons créé deux autres composants pour notre application. Pour le Tous les pays composant, nous avons créé des fichiers nommés all-countries.component.ts, all-countries.component.html, et all-countries.component.css. Pour le CountryDetail composant, nous avons créé des fichiers nommés country-detail.component.ts, country-detail.component.html, et country-detail.component.css. Comme le AccueilComposant, la .ts les fichiers contenaient la logique de nos composants, la .html les fichiers contenaient le modèle, et le .css les fichiers contenaient différentes règles qui étaient appliquées aux éléments dans les fichiers de modèle.
Dans ce tutoriel, nous allons implémenter le routage dans notre application. De cette façon, les utilisateurs pourront naviguer facilement d’un composant à l’autre..
Nous devons maintenant apporter des modifications au shell de l'application pour que notre application commence à fonctionner. le app.component.ts fichier restera exactement le même que dans le premier tutoriel.
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 ';
Cependant, nous apporterons des modifications à la app.component.html fichier. Le fichier HTML devrait maintenant avoir le code suivant:
Titre
Plus tôt, nous ne montrions que le titre de l'application. Nous avons également ajouté la navigation au modèle. le routerLink directive est utilisée pour fournir des liens vers différentes sections ou pages de votre application. Angular détermine le composant qu’il doit afficher à l’aide du bouton routerLink directif. La position où ces composants sont rendus est contrôlée à l'aide de routerOutlets. Les composants sont rendus après la routeur-prise Mots clés.
Après avoir créé le fichier modèle, nous ajouterons le CSS suivant à app.component.css styliser les liens de navigation et le titre:
nav margin: 0px; text-align: center; h1 font-family: 'Lato'; couleur: # 999; text-align: center; h2 font-size: 2em; marge supérieure: 0; rembourrage en haut: 0; nav a padding: 10px; texte-décoration: aucun; marge: 10px 0px; affichage: inline-block; couleur de fond: noir; Couleur blanche; border-radius: 5px; famille de polices: 'Lato'; nav a: hover background-color: grey; nav a.active color: # 039be5;
Nous allons maintenant indiquer à Angular quelles composantes doivent être rendues pour un itinéraire ou un chemin particulier. Créer un fichier nommé app-routage.module.ts à l'intérieur de src / app répertoire et mettez-y le code suivant:
importer NgModule de '@ angular / core'; importer RouterModule, Routes de '@ angular / router'; importer HomeComponent de './home/home.component'; importer AllCountriesComponent de './all-countries/all-countries.component'; importer CountryDetailComponent de './country-detail/country-detail.component'; routes const: Routes = [chemin: ", redirectTo: '/ home', pathMatch: 'complet', chemin: 'home', composant: HomeComponent, chemin: 'detail /: name', composant: CountryDetailComponent , chemin: 'tous les pays', composant: AllCountriesComponent]; @NgModule (imports: [RouterModule.forRoot (routes)], exportations: [RouterModule]) classe d'exportation AppRoutingModule
Nous commençons par importer toutes les dépendances nécessaires, y compris les composants que nous voulons rendre pour différents itinéraires. Ensuite, nous spécifions différents chemins et les composants à rendre lorsque les utilisateurs les visitent. Vous pouvez également rediriger les chemins, comme nous l'avons fait pour cette application d'informations sur le pays. Chaque fois que les utilisateurs visitent http: // localhost: 4200 /, ils seront redirigés vers http: // localhost: 4200 / home. N'oubliez pas que pour spécifier les itinéraires de redirection, vous devez spécifier une valeur pour le pathMatch propriété pour indiquer au routeur la correspondance d'une URL avec le chemin de n'importe quelle route.
Si les utilisateurs visitent http: // localhost: 4200 / all-countries, nous rendrons Tous les paysComposant après le routeur-prise étiquette à l'intérieur du app.component.html fichier pour afficher une liste de tous les pays.
Nous avons utilisé le routerLink directive à l'intérieur des modèles pour Tous les paysComposant aussi bien que AccueilComposant fournir un lien sur lequel les utilisateurs peuvent cliquer pour en savoir plus sur n'importe quel pays. La valeur de routerLink pour chaque pays rendu dans ces modèles suit le format routerLink = "/ detail / country.name". La valeur de la chemin propriété pour le rendu CountryDetailComponent a été spécifié comme détail /: nom, garder la valeur de la routerLink directive à l'esprit. le :prénom une partie de ce chemin est utilisée pour identifier le nom du pays.
La dernière chose que nous devons faire pour avoir une application Angular pleinement fonctionnelle est de mettre à jour le app.module.ts fichier. Si vous ouvrez ce fichier dans un éditeur de texte, vous remarquerez que les trois composants que nous avons générés à l'aide de la CLI angulaire ont déjà été importés dans le fichier. Avant de procéder à des modifications, votre app.module.ts Le fichier doit avoir le code suivant:
importer BrowserModule de '@ angular / platform-browser'; importer NgModule de '@ angular / core'; importer AppComponent depuis './app.component'; importer CountryService de './country.service'; importer HomeComponent de './home/home.component'; importer AllCountriesComponent de './all-countries/all-countries.component'; importer CountryDetailComponent de './country-detail/country-detail.component'; @NgModule (declarations: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], importations: [BrowserModule], fournisseurs: [CountryService], bootstrap: [AppComponent]) Classe d'exportation AppModule
Il n'y a que deux changements que nous devons apporter à la app.module.ts fichier. Premièrement, nous devons importer le AppRoutingModule classe de la app-routage.module.ts fichier que nous avons créé dans la section précédente. Deuxièmement, ajoutez la classe à la @ NgModule.providers tableau. Après ces changements, votre app.module.ts le fichier devrait ressembler à ceci.
importer BrowserModule de '@ angular / platform-browser'; importer NgModule de '@ angular / core'; importer AppComponent depuis './app.component'; importer CountryService de './country.service'; importer HomeComponent de './home/home.component'; importer AllCountriesComponent de './all-countries/all-countries.component'; importer CountryDetailComponent de './country-detail/country-detail.component'; import AppRoutingModule depuis './app-routing.module'; @NgModule (declarations: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], importations: [BrowserModule, AppRoutingModule], fournisseurs: [CountryService], bootstrap: [AppComponent]) classe d'exportation AppModule
Si vous passez dans le répertoire de votre projet et tapez la commande suivante dans la console, votre application se chargera et affichera le résultat. AccueilComposant.
ng servir - ouvert
Vous pouvez cliquer sur différents blocs de pays ou sur les liens de navigation pour charger différents composants..
Dans cette série, je voulais enseigner aux lecteurs qui n'avaient jamais utilisé Angular auparavant comment créer une application angulaire de base. L'application n'a commencé à fonctionner correctement qu'après avoir terminé notre dernier tutoriel. C'était intentionnel parce que je voulais éviter de basculer entre les mêmes fichiers en apportant des modifications qui devraient être remplacées dans des tutoriels ultérieurs. Cela peut être très déroutant pour un débutant, nous avons donc apporté toutes les modifications à un fichier à la fois..
Pour vous entraîner, vous pouvez essayer de créer plus de composants qui affichent les informations sur les pays dans un format différent..
De plus, si ce n'est pas clair, JavaScript est devenu l'un des langages de facto du Web. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux frameworks et bibliothèques pour vous occuper, comme Angular l’a démontré dans ce tutoriel. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Si vous avez des questions sur ce sujet ou sur un autre tutoriel de la série, n'hésitez pas à commenter..
Accentsconagua