Apprenez à créer votre première application angulaire en 20 minutes

Photo de Kelly Sikkema sur Unsplash

Angular est un framework JavaScript, créé par Misko Hevery et mis à jour par Google. C’est un MVC (Model View Vontroller). Vous pouvez visiter la page officielle pour en savoir plus.

À l'heure actuelle, la dernière version de Angular est la 5.2.10. Il y a la première génération 1.x et la deuxième génération 2.x, et les structures et les méthodes des deux générations sont totalement différentes. Ne vous inquiétez pas si vous vous sentez confus à propos de la version, car dans cet article, nous utiliserons la deuxième génération 2.x

Table des matières

  • Ajouter un élément (apprendre à soumettre un formulaire en angulaire)
  • Supprimer un élément (apprendre à ajouter un événement dans Angular)
  • Animation angulaire (découvrez comment animer les composants)

Conditions préalables:

  • Node.js

Vérifiez si node.js est installé sur votre ordinateur. En savoir plus sur l'installation.

  • npm

npm (node ​​package manager) est installé avec Node.js

Vérifiez la version de node.js:

noeud -v

npm:

npm -v

CLI angulaire

Vous devriez avoir la dernière version de Angular-CLI. Apprenez-en plus sur la CLI angulaire ici et trouvez les instructions d’installation.

Installez Angular-cli:

npm install -g @ angular / cli

Et enfin, vous devriez avoir:

  • Connaissance de base de JavaScript
  • Principes fondamentaux HTML et CSS

Vous n’avez pas besoin de connaître Angular.

Maintenant que nous avons l'environnement pour exécuter notre application Angular, commençons!

Créer notre première application

Nous allons utiliser angular-cli pour créer et générer nos composants. Il générera des services, des routeurs, des composants et des directives.

Pour créer un nouveau projet Angular avec Angular-cli, exécutez simplement:

ng nouveau my-app

Le projet sera généré automatiquement. Créons notre application de tâches!

Nouveau todo-app

Ensuite, ouvrez les fichiers dans votre éditeur de texte. J'utilise du texte Sublime, mais vous pouvez choisir n'importe quel éditeur.

Voici à quoi ressemble la structure de l'application:

Ne vous inquiétez pas si vous êtes confus au sujet des fichiers. Tout notre travail sera dans le dossier de l'application. Il contient cinq fichiers:

Remarque: Angular 2 utilise TypeScript, dans lequel les fichiers se terminent par l’extension «.ts».

Pour créer une interface agréable pour notre application, nous allons utiliser le framework Bootstrap 4.

Incluez bootstrap cdn dans index.html:

Exécutez l'application dans votre terminal:

ng servir

L'application fonctionnera sous http: // localhost: 4200 /

Tout va bien !

Faisons maintenant une structuration HTML. Nous allons utiliser les classes Bootstrap pour créer un formulaire simple.

app.component.html:

    
  

Application pour Todo    
             Ajouter         

Dans app.component.css:

corps{
 rembourrage: 0;
 marge: 0;
}
forme{
 largeur maximale: 25em;
 marge: 1em auto;
}

Pour capturer la valeur d'entrée dans Angular 2, nous pouvons utiliser la directive ngModel. Vous pouvez insérer une variable en tant qu'attribut dans l'élément d'entrée.

Pour créer une variable en tant qu’attribut, utilisez # suivi du nom de la variable.

// récupère la valeur de la variable

{{myVariable.value}}

Maintenant, obtenez la valeur de la variable "todo":

{{todo.value}}

Tout va bien !

Nous devons maintenant stocker la valeur capturée à partir de l'entrée. Nous pouvons créer un tableau vide dans app.component.ts à l'intérieur de la classe AppComponent:

classe d'exportation AppComponent {
  todoArray = []
 
}

Ensuite, nous devons ajouter un événement de clic à notre bouton qui insère la valeur capturée dans «todoArray».

app.component.html:

 Ajouter 

Dans app.component.ts:

classe d'exportation AppComponent {
 todoArray = []
addTodo (valeur) {
    this.todoArray.push (valeur)
    console.log (this.todoArray)
  }
 
}
Utilisez console.log (this.todoArray) pour voir la valeur de tableau

Récupérer les données de “todoArray”

Nous devons maintenant récupérer les données stockées dans «todosArray». Nous allons utiliser la directive * ngFor pour parcourir le tableau et extraire les données.

app.component.html:

  
       
  • {{todo}}      

Après avoir récupéré les données:

Les données vont maintenant être récupérées automatiquement lorsque nous cliquons sur le bouton Ajouter.

Styliser l'application

J'aime utiliser les polices Google et les icônes Matériau, qui sont libres d'utilisation.

Inclure les polices Google dans app.component.css:

/ * Polices Google * /
@import url ('https://fonts.googleapis.com/css?family=Raleway');

Et Matériau-icônes à l'intérieur de index.html:

Après avoir ajouté du style à notre application, cela ressemblera à ceci:

Pour utiliser les icônes Matériau:


 ajouter 
// et supprime l'icône dans l'élément de liste
 
  • {{todo}} supprimer
  • Pour les styles dans app.component.css:

    / * Polices Google * /
    @import url ('https://fonts.googleapis.com/css?family=Raleway');
    corps{
     rembourrage: 0;
     marge: 0;
    }
    forme{
     largeur maximale: 30em;
     marge: 4em auto;
     position: relative;
     arrière-plan: # f4f4f4;
     rembourrage: 2em 3em;
    }
    formulaire h1 {
        famille de polices: "Raleway";
        couleur: # F97300;
    }
    entrée de formulaire [type = text] :: placeholder {
       famille de polices: "Raleway";
       couleur: # 666;
    }
    Données de formulaire{
        marge supérieure: 1em;
    }
    forme .data li {
     background: #fff;
     bordure gauche: solide 4px # F97300;
     rembourrage: 1em;
     marge: 1em auto;
     couleur: # 666;
     famille de polices: "Raleway";
    }
    forme .data li i {
        Flotter à droite;
        couleur: # 888;
        curseur: pointeur;
    }
    forme .input-group-text {
        arrière-plan: # F97300;
        rayon de bordure: 50%;
        largeur: 5em;
        hauteur: 5em;
        rembourrage: 1em 23px;
        couleur: #fff;
        position: absolue;
        à droite: 13px;
        en haut: 68px;
        curseur: pointeur;
    }
    forme .input-group-text i {
        taille de police: 2em;
    }
    form .form-control {
     hauteur: 3em;
        famille de polices: "Raleway";
    }
    form .form-control: focus {
     boîte-ombre: 0;
    }

    Notre application est presque terminée, mais nous devons ajouter certaines fonctionnalités. Une fonctionnalité de suppression devrait permettre aux utilisateurs de cliquer sur une icône de suppression et de supprimer un élément. Il serait également intéressant d’avoir la possibilité de saisir un nouvel élément avec la clé de retour au lieu de cliquer sur le bouton Ajouter.

    Suppression d'éléments

    Pour ajouter la fonctionnalité de suppression, nous allons utiliser la méthode de tableau «splice» et une boucle for. Nous allons parcourir “todoarray” et extraire l'élément que nous voulons supprimer.

    Ajoutez un événement (clic) à supprimer et attribuez-lui le paramètre «todo»:

  • {{todo}} delete
  • Dans app.component.ts:

    /*effacer l'article*/
      effacer l'article(){
       console.log ("delete item")
      }

    Lorsque vous cliquez sur Supprimer, ceci devrait apparaître dans la console:

    Nous devons maintenant parcourir «todoArray» et épisser l’élément sur lequel nous avons cliqué.

    Dans app.component.ts:

    /*effacer l'article*/
      deleteItem (todo) {
       for (let i = 0; i <= this.todoArray.length; i ++) {
        if (à faire == this.todoArray [i]) {
         this.todoArray.splice (i, 1)
        }
       }
      }

    Le résultat:

    Génial !!

    Saisie pour ajouter des éléments

    Nous pouvons ajouter un événement de soumission au formulaire:

    (ngSubmit) = "TodoSubmit ()"

    Nous devons ajouter la variable «#todoForm» au formulaire et lui donner la valeur «ngForm». Dans ce cas, nous n’avons qu’un champ et nous n’obtenons qu’une seule valeur. Si nous avons plusieurs champs, l’événement submit retournera les valeurs de tous les champs du formulaire.

    app.component.html

    dans app.component.ts

    // soumettre le formulaire
      todoSubmit (valeur: tout type) {
     console.log (valeur)
      }

    Vérifiez la console. Il retournera un objet de valeurs:

    Alors maintenant, nous devons pousser la valeur renvoyée à «todoArray»:

    // soumettre le formulaire
      todoSubmit (valeur: tout type) {
         if (valeur! == "") {
        this.todoArray.push (valeur.todo)
         //this.todoForm.reset ()
        }autre{
          alerte ('Champ requis **')
        }
        
      }

    Ici nous sommes. La valeur est insérée sans qu'il soit nécessaire de cliquer sur le bouton d'ajout, simplement en cliquant sur «entrer»:

    Une dernière chose. Pour réinitialiser le formulaire après la soumission, ajoutez la méthode intégrée «resetForm ()» pour soumettre l'événement.

     

    Le formulaire sera réinitialisé après chaque soumission maintenant:

    Ajout d'animations

    J'aime ajouter une petite touche d'animations. Pour ajouter une animation, importez les composants des animations dans votre app.component.ts:

    importer {composant, déclencheur, animer, style, transition, images clés} de '@ angular / core';

    Ajoutez ensuite la propriété animations au décorateur “@component”:

    @Composant({
      sélecteur: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animations: [
       trigger ("moveInLeft", [
          transition ("void => *", [style ({transform: "translateX (300px)"}),
            animate (200, images clés ([
             style ({transform: "translateX (300px)"}),
             style ({transform: "translateX (0)"})
     
              ]))]),
    transition ("* => void", [style ({transform: "translateX (0px)"}),
            animate (100, images clés ([
             style ({transform: "translateX (0px)"}),
             style ({transform: "translateX (300px)"})
     
              ]))])
         
        ])
    ]
    })

    Maintenant, les éléments ont un effet intéressant quand ils sont entrés et supprimés.

    Tout le code

    app.component.ts

    importer {composant, déclencheur, animer, style, transition, images clés} de '@ angular / core';
    @Composant({
      sélecteur: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animations: [
       trigger ("moveInLeft", [
          transition ("void => *", [style ({transform: "translateX (300px)"}),
            animate (200, images clés ([
             style ({transform: "translateX (300px)"}),
             style ({transform: "translateX (0)"})
     
              ]))]),
    transition ("* => void", [style ({transform: "translateX (0px)"}),
            animate (100, images clés ([
             style ({transform: "translateX (0px)"}),
             style ({transform: "translateX (300px)"})
     
              ]))])
         
        ])
    ]
    })
    classe d'exportation AppComponent {
      todoArray = [];
      faire;
      // todoForm: new FormGroup ()
    addTodo (valeur) {
        if (valeur! == "") {
         this.todoArray.push (valeur)
        //console.log(this.todos)
      }autre{
        alerte ('Champ requis **')
      }
        
      }
    /*effacer l'article*/
      deleteItem (todo) {
       for (let i = 0; i <= this.todoArray.length; i ++) {
        if (à faire == this.todoArray [i]) {
         this.todoArray.splice (i, 1)
        }
       }
      }
    // soumettre le formulaire
      todoSubmit (valeur: tout type) {
         if (valeur! == "") {
        this.todoArray.push (valeur.todo)
         //this.todoForm.reset ()
        }autre{
          alerte ('Champ requis **')
        }
        
      }
     
    }

    app.component.html

        
      

    Application pour Todo    
                      ajouter          
      
         
    • {{todo}} supprimer       

    app.component.css

    / * Polices Google * /
    @import url ('https://fonts.googleapis.com/css?family=Raleway');
    corps{
     rembourrage: 0;
     marge: 0;
    }
    forme{
     largeur maximale: 30em;
     marge: 4em auto;
     position: relative;
        arrière-plan: # f4f4f4;
        rembourrage: 2em 3em;
        débordement caché;
    }
    formulaire h1 {
        famille de polices: "Raleway";
        couleur: # F97300;
    }
    entrée de formulaire [type = text] :: placeholder {
       famille de polices: "Raleway";
       couleur: # 666;
    }
    Données de formulaire{
        marge supérieure: 1em;
    }
    forme .data li {
     background: #fff;
     bordure gauche: solide 4px # F97300;
     rembourrage: 1em;
     marge: 1em auto;
     couleur: # 666;
     famille de polices: "Raleway";
    }
    forme .data li i {
        Flotter à droite;
        couleur: # 888;
        curseur: pointeur;
    }
    forme .input-group-text {
        arrière-plan: # F97300;
        rayon de bordure: 50%;
        largeur: 5em;
        hauteur: 5em;
        rembourrage: 1em 23px;
        couleur: #fff;
        position: absolue;
        à droite: 13px;
        en haut: 68px;
        curseur: pointeur;
    }
    forme .input-group-text i {
        taille de police: 2em;
    }
    form .form-control {
     hauteur: 3em;
        famille de polices: "Raleway";
    }
    form .form-control: focus {
     boîte-ombre: 0;
    }

    Nous avons fini. Vous pouvez trouver les fichiers et le code sur Github.

    Voir la démo

    Conclusion

    Angular est plus facile que vous ne le pensez. Angular est l’une des meilleures bibliothèques JavaScript, elle offre un excellent support et une communauté agréable. Il possède également des outils qui rendent le travail avec Angular rapide et facile, comme Angular-cli.

    Abonnez-vous à cette liste de diffusion pour en savoir plus sur Angular.

    Voici quelques-uns des meilleurs cours en ligne pour apprendre Angular gratuitement:

    Angulaire 1.x

    • Façonner avec angulaire
    • Apprendre angulaire

    Angular 2.x (recommandé)

    • apprendre Angular2 (coursetro)
    • Playlist YouTube