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
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:
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 .
Source link