Guide GIF de l'interface utilisateur de Kendo pour Angular

Intéressé par la construction d'une application web avec Kendo UI pour Angular? Apprenez comment dans ce guide GIF étape par étape.

Ce guide GIF montre les étapes nécessaires pour intégrer UI Kendo pour Angular dans une application Web. Cela va être une application de magasin de démonstration que nous construisons et chaque nouveau guide GIF vous guidera à travers une composante différente de l'interface utilisateur de Kendo. Ce guide particulier vous guide à travers le processus d'utilisation du composant Button ainsi que la configuration d'une application de magasin et l'ajout de produits à un «panier». Allons-y!

Mise en route: Configuration

Nous commençons ce guide GIF avec une application déjà commencée. Si vous avez besoin d'un peu d'aide pour créer votre première application, nous avons un Guide de démarrage ! Il décrit les étapes nécessaires à la configuration de votre machine pour utiliser Kendo UI pour Angular . Il fournit également des instructions étape par étape sur la façon de construire votre première application.



Je suis allé de l'avant et ai fait du style et créé un en-tête, donc pour suivre, vous devriez cloner la première graine du projet ici .

Note rapide sur les techniciens de service

J'ai commencé notre projet en utilisant le Service Worker et le drapeau - style = scss (plus sur ce sujet dans un guide GIF ultérieur):

 ng new KUI-buttons --style = scss --service-worker 

Le drapeau –service-worker prend en charge la configuration de votre application pour utiliser les techniciens de maintenance en ajoutant le package service-worker avec la mise en place des fichiers nécessaires pour soutenir les travailleurs du service. Pour plus d'informations sur les détails, consultez la section suivante, qui couvre le processus en détail, car il vous montre comment ajouter manuellement un technicien de maintenance à une application existante. – Angular.io Guide

Définir l'encapsulation de la vue à Aucune pour le composant racine

Je suis également allé de l'avant et j'ai fixé l'encapsulation de la vue à aucun sur notre composant racine. Cela va nous permettre d'importer un fichier de variable de styles et tous les composants enfants de la racine app.component hériteront de ces styles. Yay styles en cascade! De app.component.ts :

 import {Component} à partir de '@ angular / core';

@Composant({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})
classe d'exportation AppComponent {
  title = 'app';
} 

Créer la feuille de style de variable

Si vous consultez le app.component.sass vous verrez que j'ai créé et importé une feuille de style variable. C'est un endroit pour nous de stocker des variables de style globales, comme celles déjà présentes. De app.component.sass :

 $ kendo-orange: # ff6358
$ kendo-blanc: # f8f8f8
$ kendo-light-grey: #ededed
$ kendo-black: # 4b4e52 

Maintenant que vous avez cloné la graine de départ à ce guide GIF, cd à ce projet dans votre terminal et npm installez toutes les choses. Ensuite, exécutons le projet en utilisant ng serve . Vous devriez voir ceci à http: // localhost: 4200 / dans votre navigateur:

Installer le thème par défaut de l'interface utilisateur de Kendo

Nous allons maintenant installer le thème par défaut de l'interface utilisateur de Kendo:

Puis nous inclurons le thème dans notre styles.scss ]

 @import '~ @ progression / kendo-theme-default / scss / all' 

Générer les composants de la chemise et de l'autocollant

Maintenant, avant de commencer à utiliser des composants d'interface utilisateur de Kendo, allons-y notre navigation fonctionne. Nous allons commencer par générer les deux composants qui nous manquent; T-shirts et Autocollants .

 ng g c t-shirts
ng g c autocollants 

Créer les routes de navigation

Importer le service de routeur angulaire dans app.module.ts

 importer {RouterModule, Routes} à partir de '@ angular / router'; 

Créer des routes

 const appRoutes: Routes = []; 

Configurer les routes

Ensuite, nous devons configurer nos appRoutes avec routerModule.forRoot () . Cela va dans notre tableau app.module.ts imports:

 RouterModule.forRoot (
  appRoutes
) 

Établir des chemins de route

Maintenant, créer quelques routes! Notre autocollants chemin doit pointer vers notre StickersComponent :

 const appRoutes: Routes = [
  { path: 'stickers', component: StickersComponent },
  { path: '', redirectTo: '/stickers', pathMatch: 'full' }
]; 

Le chemin vide dans la deuxième route représente le chemin par défaut pour le application, l'endroit où aller quand le chemin dans l'URL est vide, comme il est généralement au début.

Créer un itinéraire pour les chemises Composant

N'oubliez pas de laisser les routes les plus génériques pour la fin. L'ordre a de l'importance! Dans ce cas, nous quittons la route vide jusqu'à la toute fin, pour notre itinéraire "attrape-tout":

Ajouter Navigation dans app.component.html

En haut, nous allons ajouter un attribut routerLink avec la route pour chaque élément :

Inclure le routeur-sortie au bas de notre app.component.html :

Nos routes fonctionnent actuellement!

Récupérer les liens actifs vers LOOK Active

Cependant, nous n'avons pas de styles actifs qui s'appliquent aux liens lorsque chaque route est sélectionnée. J'ai déjà ajouté des styles .active au fichier app.component.sass :

 a, a: focus, a: active
  couleur: $ kendo-black
  text-decoration: aucun
  marge: 14px
  &:premier enfant
    marge gauche: 0

a.active
  font-weight: gras
  curseur: par défaut
  couleur: $ kendo-orange 

Nous avons juste besoin de mettre un attribut routerLinkActive à l'élément actif :

 T-Shirts 
 Autocollants  

Ça va pour ajouter une classe de .active à chaque élément lorsque la route routerLink est sélectionnée

Regarder la magie se produire:

Installer le composant Button et les dépendances

Installez le composant Button pour pouvoir l'utiliser dans notre application. Il est contenu dans le paquet, @ progress / kendo-angular-buttons . Il a une dépendance d'homologue pour le package Localisation @ progress / kendo-angular-l10n qui vous permet de traduire les composants dans différentes langues:

 npm install --save @ progression / kendo-angulaire-boutons @ progrès / kendo-angulaire-l10n 

Importer un bouton et un composant d'animation dans app.module.ts

Les animations sont une dépendance de notre composant Button . Donc, nous aurons besoin d'inclure les deux!

 import {BrowserAnimationsModule} de "@ angular / platform-browser / animations";
importer {ButtonsModule} à partir de "@ progress / kendo-angular-buttons"; 

Veillez également à les ajouter au tableau imports :

 @NgModule ({
  déclarations: [
    AppComponent,
    TShirtsComponent,
    StickersComponent
  ],
  importations: [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonsModule,
    ...
  ]

Je suis allé de l'avant et j'ai rempli le modèle d'autocollants pour nous:

Inclure les boutons de l'UI Kendo dans le composant Autocollants

Maintenant, ajoutons nos boutons dans le composant autocollant. Chaque autocollant à vendre aura un bouton pour ajouter cet autocollant au panier!

  

    

      
    
     Autocollant angulaire 5 $ 
  
  

    

      
    
     AngularJS Autocollant 5 $ 
  
  

    

      
    
     Autocollant NativeScript 5 $ 
  
  

    

      
    
     Autocollant React 5 $ 
  
  

    

      
    
     Autocollant VueJS 5 $ 
  

Ajouter une fonctionnalité de bouton

Nous avons besoin de chacun de ces boutons pour ajouter leur produit au panier. Le reste de notre plan de jeu ressemblera à ceci:

• Service Generate Cart
• Importation et inclusion du service de panier à l'intérieur app.module.ts Provider Array
• Créer une classe de produit
• Créer CartItem Class

Generate Cart Service

Nous allons avoir besoin d'un service de panier pour nous donner accès à notre panier pour ajouter / supprimer des articles. Pour générer notre service de panier, j'ai utilisé la commande CLI:

 ng g s cart 

Importer et inclure le service de panier dans la matrice de fournisseurs app.module.ts

 import {CartService} à partir de './cart.service';

...

fournisseurs: [
  CartService
]

Créer des classes pour produit et cartItem

Afin d'ajouter quelque chose à notre panier, nous devons créer un couple de classes, cartItem s qui se composera de produit ]

Créer une classe de produit

Nous aimerions que nos produits comprennent un ID, un type, un nom et un prix (en cents) dans ./ product.ts :

 export produit de la classe {
  id: numéro;
  type: chaîne;
  nom: chaîne;
  prix: nombre;
} 

Créer Panier Article Class

Nous souhaitons que tous les articles de notre panier contiennent non seulement les informations produit (voir ci-dessus) mais aussi la quantité et la taille le cas échéant dans ./ cartItem.ts :

 import {Product} à partir de './product';

classe d'exportation CartItem {
  produit: Produit;
  quantité: nombre;
  taille ?: chaîne | nul;
} 

Populate Cart Service

Maintenant, dans notre service panier, nous allons importer les classes cartItem et produit dans cart.service.ts :

 import {Injectable} à partir de '@ angular / coeur';
importer {CartItem} à partir de './cartItem';
importer {Product} à partir de './product';

@Injectable ()

Ensuite, nous allons créer une liste de produits codée en dur pour l'instant, avec tous les autocollants:

 export class CartService {

  // données codées en dur, POUR MAINTENANT! MUHAHA
  productList: Product [] = [
    {
      id: 0,
      type: 'sticker',
      name: 'Angular Sticker',
      price: 500
    },
    {
      id: 1,
      type: 'sticker',
      name: 'AngularJS Sticker',
      price: 500
    },
    {
      id: 2,
      type: 'sticker',
      name: 'NativeScript Sticker',
      price: 500
    },
    {
      id: 3,
      type: 'sticker',
      name: 'React Sticker',
      price: 500
    },
    {
      id: 4,
      type: 'sticker',
      name: 'VueJS Sticker',
      price: 500
    }
  ]; 

Ensuite, nous devons créer un panier qui est un tableau de cartItem objets:

 cart: CartItem [] = [];
constructeur () {}

Maintenant, pour la partie amusante! Nous avons besoin de trois fonctions, une pour retourner les produits dans le panier ( getCart () ), une pour retourner tous les produits disponibles ( getProducts () ) et une pour ajouter des éléments dans notre panier pour le shopping amusant ( addToCart )! Ici, nous pourrions importer et utiliser Observable et de de RxJS, mais pour l'instant j'ai choisi de rester simple:

 // Pourrait utiliser les Observables si nous le voulions
// getCart (): Observable  {
// retour de (this.cart);
//}
//
// getProducts (): Observable  {
// retour de (this.productList);
//}

getCart (): CartItem [] {
  retourner this.cart;
}

getProducts (): Produit [] {
  return this.productList;
} 

Notre méthode addToCart () doit être un peu plus complexe, donc décomposons-la. Nous pourrions faire quelque chose comme ceci:

 addToCart (productId): void {
  let item = this.productList.find ((produit) => {
    return product.id == productId;
  });

  let cartItem: CartItem = {
    produit: article,
    quantité: 1
  }

  this.cart.push (cartItem);
  console.log ('CART:', this.cart);
} 

Dans cette implémentation, nous prenons le productId transmis et définissons le item au produit avec un identifiant correspondant. Ensuite, nous prenons cet objet et le mettons dans un cartItem avec une quantité par défaut de 1 . Ensuite, poussez simplement le cartItem dans le panier. Cela fonctionne bien sûr, mais n'est pas super flexible. Si le client choisit d'acheter deux autocollants identiques, le même autocollant sera envoyé deux fois dans le chariot au lieu de simplement mettre à jour la quantité du premier autocollant. Ce que nous préférerions, c'est d'abord vérifier si ce produit existe dans le panier, s'il met à jour la quantité, sinon pousser le nouveau produit dans le panier.

 addToCart (productId): void {
  let item = this.productList.find ((produit) => {
    return product.id == productId;
  });

  let cartItem: CartItem = {
    produit: article,
    quantité: 1
  }

  pour (laisser thingInCart de this.cart) {
    if (thingInCart.product.id == item.id) {
      thingInCart.quantity ++;
      console.log ('CART:', this.cart);
      revenir;
    }
  }

  this.cart.push (cartItem);
  console.log ('CART:', this.cart);
} 

Maintenant que toute cette fonctionnalité de panier a été créée, nous pouvons utiliser notre composant autocollant et l'utiliser! Pour un test rapide, connectons chacun des boutons (encore une fois, codés en dur, je sais) et appelons une méthode addToCart () que nous devons créer dans le composant autocollants. Nous transmettrons un identifiant de produit pour chaque produit.

 Angulaire Autocollant 5 $  

Donc, chacun de nos boutons aura cet appel astucieux cliquer (click) = "addToCart (0)" .

Terminer la fonctionnalité addToCart dans le composant Stickers

Créons la fonctionnalité addToCart dans notre stickers.component.ts en important le CartService dans stickers.component.ts :

 import {Composant, OnInit} à partir de '@ angular / core';
importer {CartService} à partir de '../cart.service';

@Composant({
  sélecteur: 'app-stickers',
  templateUrl: './stickers.component.html',
  styleUrls: ['./stickers.component.sass']
})

Ensuite, nous irons de l'avant et injecterons notre cartService dans les paramètres du constructeur. Nous devons le faire ici, car il existe des méthodes sur le cartService que nous aimerions utiliser:

 export class StickersComponent implémente OnInit {
  constructeur (cartService privé: CartService) {}

  ngOnInit () {}
} 

Créer une fonction addToCart

Cette fonction passera le productId au Service et le laissera gérer toute la logique:

 export class StickersComponent implémente OnInit {
  constructeur (cartService privé: CartService) {}

  addToCart (productId): void {
    this.cartService.addToCart (productId);
  }

  ngOnInit () {}
} 

Cart is Populated

Maintenant, quand nous cliquons sur les boutons des autocollants, chaque autocollant est ajouté au panier!

Et si nous avons choisi le même autocollant plusieurs fois, nous voyons qu'il met à jour la quantité pour ce produit dans le panier!

Nous avons beaucoup plus à faire en matière de nettoyage, mais pour le moment nous allons laisser ça pour le prochain guide GIF ! Nous espérons que vous avez apprécié ce premier et que vous avez hâte d'en publier d'autres qui viendront s'ajouter à ce que nous avons laissé. Codage heureux!

---