Créer une galerie d’images à défilement avec Kendo UI pour Angular

Parrainé par l'interface utilisateur de Kendo pour l'équipe Angular

Vous souhaitez en savoir plus sur la création d'excellentes applications Web angulaires? Tout commence avec Kendo UI for Angular – une bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux listes déroulantes et jauges.

L'équipe de Kendo UI for Angular s'engage à vous fournir les derniers conseils et astuces dans le monde du développement angulaire.

Découvrez comment utiliser Kendo UI pour améliorer vos applications Angular en utilisant facilement le widget ScrollView pour afficher une galerie d'images avec une navigation intégrée.

Dans cet article, vous allez En savoir plus sur l'utilisation de Kendo UI pour améliorer votre application Angular. Kendo UI est une collection de composants d'interface utilisateur JavaScript avec des bibliothèques pour React, Vue, Angular et JQuery.

Ce message se concentrera sur l'utilisation du widget ScrollView pour afficher une collection horizontale de vues d'image avec des navigations intégrées entre eux. Nous allons utiliser quelques images, considérées comme des articles de commerce électronique, pour créer une galerie d’images. Entre autres choses, vous apprendrez à quel point il est facile de se familiariser rapidement avec les composants de Kendo UI pour une application angulaire.

Installation de la CLI angulaire

Si vous n'avez jamais utilisé de CLI angulaire ou si vous ne l'avez pas déjà installée sur votre ordinateur, exécutez la commande suivante à partir de votre terminal pour l'installer, car il sera nécessaire pour créer de manière transparente un nouvel angulaire. application:

 npm install -g @ angular / cli 

La commande précédente installe globalement la Angular CLI sur votre ordinateur. Vous pouvez maintenant utiliser la commande ng pour créer facilement une nouvelle application angulaire, générer plusieurs composants pour les besoins de votre projet et exécuter l'application à l'aide du serveur de développement intégré.

Configuration d'une application angulaire avec le CLI [19659011] Ici, vous allez configurer la nouvelle application Angular pour ce tutoriel. Exécutez la commande suivante pour créer une application nommée kendo-gallery-app dans votre dossier de développement:

connectez-vous à la nouvelle application kendo-gallery 

. Une fois le processus d'installation terminé, changez le répertoire. Créez le projet comme indiqué ici et démarrez l'application à l'aide de la commande ng serve :

 cd kendo-gallery-app
    
// lance l'application
ng serve 

Vous pouvez rencontrer une erreur avec le message ci-dessous dans la console:

 ERROR dans node_modules / rxjs / internal / types.d.ts (81,44): erreur TS1005: ';' attendu.
node_modules / rxjs / internal / types.d.ts (81,74): erreur TS1005: ';' attendu.
node_modules / rxjs / internal / types.d.ts (81,77): erreur TS1109: expression attendue 

Cela se produit car la dernière version de rxjs n'est plus compatible avec votre version de TypeScript. Le moyen rapide de remédier à cela consiste à supprimer le dossier node_modules . Ouvrez maintenant le fichier package.json et dans l’objet dependencies, éditez les fichiers rxjs en supprimant ^ :

  : "dépendances": {
    ...
    "rxjs": "6.0.0", // supprime le ^
    "zone.js": "^ 0.8.26"
  }, 

Enregistrez le fichier et relancez la commande npm install . Une fois le processus d'installation terminé, vous pouvez maintenant lancer l'application avec ng serve .

Ceci compilera votre application et démarrera le serveur de développement. Pour afficher la page par défaut de cette application angulaire, accédez à http: // localhost: 4200 à partir de votre navigateur préféré et vous verrez ceci:

Votre nouvelle application vient d'être compilée et servie sur le port par défaut pour les projets Angular. Vous allez ensuite commencer à explorer les avantages de Kendo UI pour la création d'une application Gallery, comme indiqué précédemment.

Génération d'un composant Galerie [19659011] Pour que la structure de cette application reste un peu organisée, vous allez générer un composant distinct pour la page de galerie et y utiliser le widget ScrollView. Arrêtez l'application avec CTRL + C et exécutez la commande suivante pour installer le widget:

 ng génère un composant galerie d'images 

Ceci générera un nouveau dossier nommé image-gallery contenant les fichiers CSS, HTML et TypeScript du nouveau composant que vous utiliserez plus tard dans cette application. En outre, le ImageGalleryComponent a également été importé et ajouté aux déclarations dans le module racine d'application app.module.ts comme indiqué ci-dessous:

 ..
import {ImageGalleryComponent} de './image-gallery/image-gallery.component';
@NgModule ({
  déclarations: [
    AppComponent,
    ImageGalleryComponent // this was also added
  ],
...
})
export class AppModule {} 

Cela permettra à l'application Angular de connaître le nouveau composant.

Ajoutez le widget Scrub View Kendo UI UI

à l'application déjà configurée et à un composant distinct pour la galerie créée. vous pouvez maintenant ajouter le widget ScrollView de Kendo UI à l'application. Vous pouvez le faire rapidement et facilement en utilisant Angular CLI pour ajouter le package Kendo UI en une seule étape. Depuis le terminal et toujours dans le répertoire de votre projet, exécutez la commande suivante:

 ng add @ progress / kendo-angular-scrollview 

La commande ci-dessus utilise la commande ng add de Angular CLI pour l'ajout. tout nouveau paquet pour un projet Angular, à télécharger et installer kendo-angular-scrollview . Une fois le processus d'installation terminé, vous vous rendrez compte que ScrollViewModule et BrowserAnimationsModule a été importé et ajouté à la section imports du fichier app.module.ts : [19659031] // ./src/app/app.module.ts
…
importer {ScrollViewModule} de '@ progress / kendo-angular-scrollview';
importer {BrowserAnimationsModule} depuis '@ angular / platform-browser / animations';

@NgModule ({
  …
  importations: [
BrowserModule,
ScrollViewModule, // this was added
BrowserAnimationsModule // this was added
],
  …
})
classe d'exportation AppModule {}

Cela fait, vous pouvez maintenant utiliser le widget ScrollView.

Pour utiliser le composant ScrollView de Kendo UI, accédez au fichier TypeScript du composant galerie dans ./ src / app / image- gallery / image-gallery.component.ts et remplace son contenu par ceci:

 // ./src/app/image-gallery/image-gallery.component.ts
importer {composant} de '@ angular / core';
@Composant({
  sélecteur: 'app-image-gallery',
  templateUrl: './image-gallery.component.html',
  styleUrls: ['./image-gallery.component.css']
})
classe d'exportation ImageGalleryComponent {
  constructeur () {}
  objets publics: tous [] = [
    { title: 'E-Commerce item 1', url: 'https://bit.ly/2VlsHZ8' },
    { title: 'E-Commerce item 2', url: 'https://bit.ly/2TmQeeW' },
    { title: 'E-Commerce item 3', url: 'https://bit.ly/2NrURzf' },
    { title: 'E-Commerce item 4', url: 'https://bit.ly/2EcKcnD' },
    { title: 'E-Commerce item 5', url: 'https://bit.ly/2U9KYse' },
    { title: 'E-Commerce item 6', url: 'https://bit.ly/2EcLlLX' },
    { title: 'E-Commerce item 7', url: 'https://bit.ly/2Vr5jd9' }
  ];
  largeur publique = '100%';
  hauteur publique = '600px';
} 

Ici, en plus d'une largeur et d'une hauteur particulières pour l'application de galerie, vous avez également défini un tableau items [] qui contient quelques objets avec le titre et une URL d'image. Vous allez parcourir ces éléments et afficher les images dans la vue.

Ensuite, accédez à ./ src / app / image-gallery / image-gallery.component.html et remplacez son contenu par:

 // ./src/app/image-gallery/image-gallery.component.html


  
    
      
 {{item.title}} 
      
    
  

Vous avez utilisé ici la balise HTML de kendo-scrollview qui contient des attributs de données tels que:

• width : pour spécifier la largeur de la galerie.
• height ]: Pour spécifier la hauteur de la galerie.
• flèches : Permet d'activer ou de désactiver les flèches de navigation intégrées. La valeur par défaut est toujours false.
• pageable : utilisé pour activer ou désactiver la fonctionnalité de pagination intégrée. La valeur par défaut est également false.

Enfin, finalement, vous avez parcouru les éléments et passé chaque URL d'élément à l'attribut src dans la balise HTML img.

Ajoutez le composant de la galerie d'images à la vue.

Enfin, pour afficher le composant de galerie, remplacez le contenu de ./ src / app / app.component.html par:

 // ./src/app/app.component.html
 

Le sélecteur utilisé ici fait référence au ImageGalleryComponent .

Test de la demande

Lorsque tous les composants requis sont en place, vous pouvez présenter votre demande depuis le terminal avec:

 ng serve [19659013] Cela vous montrera ce que vous avez construit jusqu'à présent sur http: // localhost: 4200. Accédez à cette page et voir l'application. 

  
 Conclusion 
 Dans cet article, vous avez appris à créer une galerie d'images très simple à l'aide du widget ScrollView de Kendo UI dans une application Angular, ce qui s'avère pratique lorsque vous avez besoin d'un moyen simple et rapide pour implémenter une galerie pour toute application Angular. [19659006] Il s’agit d’un des nombreux composants d’interface utilisateur conçus par Kendo UI pour améliorer un nouveau projet Angular ou un projet existant. Consultez la documentation officielle   pour connaître les autres composants de l'interface utilisateur. 
 J'espère que ce tutoriel vous sera utile. Le code source peut être trouvé  ici sur GitHub .