Débuter avec Angular et Kendo UI

Un aperçu rapide pour vous aider à commencer à développer vos applications avec Angular et Kendo UI. Découvrez la série complète de vidéos pour en savoir plus.

Le mois dernier, j'ai créé une série de vidéos expliquant comment démarrer avec nombre de nos composants astucieux de Kendo pour Angular . Ce post
couvrira les points saillants de la première vidéo, Introduction à Angular & Kendo UI . Tout le code source produit
dans cette série, vous pouvez trouver ici sur Github .

Pour lancer la série, nous allons créer notre application Angular et nous allons également installer et utiliser notre
premier composant de Kendo UI, qui est le bouton. Pour créer l'application, nous allons utiliser la CLI angulaire.

Installez la CLI

Allez-y et ouvrez le terminal, et si vous n'avez jamais utilisé cette CLI auparavant, vous devez l'installer: [19659003] npm install -g @ angular / cli

Création d'une nouvelle application angulaire avec CLI

Créez maintenant l'application à l'aide de la commande ng new . Nous appellerons notre application Angular-Kendo-Unite: dans la nouvelle version Angular-Kendo-Unite .

J’ai démarré ce projet sans scss, car je suppose que la plupart des projets ne sont pas générés d’emblée avec le drapeau —scss. Alors
Pour utiliser nos thèmes, voici comment intégrer facilement vos fichiers dans votre projet. [bien sûr, ce n’est pas obligatoire, mais
sans scss, vous ne pourrez pas tirer parti des variables css pour personnaliser facilement les styles pour votre application.

Mettez à jour votre fichier angular.json:

       ...
      construire: {
        ...
        options: {
          modes:{
            "src / styles.scss"
          }
        }   

Nous avons quelques choses à faire dans cette série, alors dans cette première partie, je veux simplement obtenir notre application.
créé avec notre premier composant qui utilisera un composant Kendo UI.
Maintenant, dans notre application, nous allons l'ouvrir dans VS Code.

Ajouter les boutons angulaires Kendo à notre application

Donc, à l'intérieur du terminal dans VS Code, utilisons l'énoncé ajouté à . Commande pour ajouter l'interface utilisateur de Kendo à notre application angulaire:

ng add @ progress / kendo-angular-buttons

Générer une Composant

Nous allons ensuite générer un composant dans lequel insérer notre ou nos boutons avec le composant ng generate
commande de la CLI. Et nous allons le nommer le panneau de commande de bouton .

ng gc le panneau de commande de bouton

Donc, ici, vous pouvez voir que nous 'a généré le panneau de contrôle de bouton qui contient les types CSS, HTML et TypeScript
fichiers dont nous aurons besoin pour ce genre d’effort. Et vous pouvez également savoir que le fichier app.module.ts a été
modifié parce que le panneau de contrôle des boutons a été ajouté aux déclarations, ainsi que importé en haut.

Bouton Ajouter un nouveau composant vide

Ainsi, afin de utiliser notre premier bouton, que nous venons d'installer, je vais créer un wrapper div, puis un bouton
à l'intérieur de l'emballage. Dans notre bouton, nous voulons lui attribuer un attribut chamelé de kendoButton nous sommes également
Je vais y jeter un coup d'oeil, et je sais, ça a l'air super ennuyeux, mais on va utiliser le défaut pour le moment. Nous aurons
colombophile en une seconde. Ensuite, je vais simplement faire en sorte que le bouton "Bouton par défaut" s'affiche pour que nous puissions voir à quoi ça ressemble.

    

       Bouton par défaut 
    

Ajouter un composant du panneau de contrôle du bouton à afficher

Nous devons maintenant ajouter notre panneau de boutons. -component à notre fichier app.component.html. (Par défaut, le sélecteur était
avec le préfixe app cependant, par souci de simplicité, je l’ai enlevé.)

Desservir notre appli 1965

Avec notre panneau de configuration prêt à l'emploi, nous pouvons enfin servir notre application, et consultez notre
bouton. Nous pouvons servir notre application à partir de la racine de l'application dans le terminal avec ng serve et ouvrir
localhost: 4000 dans le navigateur de notre choix et voir le bouton que nous avons créé!

Options d'apparence supplémentaires

Nous avons d'autres options d'apparence pour nos boutons (comme indiqué ici dans nos docs ). La démo sera également présentée ici:

   

     Bouton par défaut 
     Bouton de contour 
     Bouton nu 
     Bouton 
  

Si tout va bien vous avez apprécié cette première partie de la série Angular & Kendo UI Unite! Il y a 7 autres pièces à venir
et chacun s'appuiera sur le dernier, deviendra un peu plus compliqué et utilisera de plus en plus de composants de Kendo UI au fur et à mesure de la construction!

Si vous êtes nouveau dans Kendo UI pour Angular, vous pouvez en apprendre plus ici ou tout simplement sauter aujourd'hui dans un essai gratuit gratuit.