Découvrez comment créer votre première application Angular en 20 minutes

Programmation

Angular est un framework JavaScript, créé mon Misko Hevery et maintenu 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 d'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 deux générations sont totalement différentes dans leurs structures et méthodes. Ne vous inquiétez pas si vous vous sentez confus au sujet 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 (découvrez comment soumettre un formulaire dans Angular)
  • Suppression d'un élément (découvrez comment 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 ( gestionnaire de packages de nœuds) est installé avec Node.js

Vérifiez la version node.js :

node -v

npm:

npm -v

Angulaire-CLI

Vous devez avoir la dernière version d'Angular-CLI. En savoir plus sur CLI angulaire ici , et trouver les instructions d'installation.

Installez Angular-cli:

npm install -g @angular/cli

Et enfin, vous devriez avoir:

  • Connaissance de base de JavaScript
  • 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 utiliserons angular-cli pour créer et générer nos composants. Il générera des services, un routeur, des composants et des directives.

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

ng new my-app

Le projet sera généré automatiquement. Créons notre application à faire!

ng new todo-app

Ensuite, ouvrez les fichiers dans votre éditeur de texte. J'utilise Sublime text, 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 utiliserons le Framework Bootstrap 4.

Incluez bootstrap cdn dans index.html :

Exécutez l'application dans votre terminal:

ng serve

L'application s'exécutera dans // localhost: 4200 /

Tout est bien ?!

Maintenant, faisons un peu de structuration HTML. Nous utiliserons les classes Bootstrap pour créer un formulaire simple.

app.component.html :

Todo App
 Add

Dans app.component.css :

body{ padding: 0; margin: 0;
}form{ max-width: 25em; margin: 1em auto;}

Pour capturer la valeur d'entrée dans Angular 2, nous pouvons utiliser la directive ngModel . Vous pouvez insérer une variable comme attribut à l'intérieur de l'élément d'entrée.

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

// get the value of the Variable
{{myVariable.value}}

Maintenant, récupérez la valeur de la variable «todo»:

{{todo.value}}

Tout est 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 dans la classe AppComponent:

export class AppComponent { todoArray=[] }

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

app.component.html :

Add

Dans app.component.ts :

export class AppComponent { todoArray=[]
addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }
Utilisez console.log (this.todoArray) pour voir la valeur du tableau

Récupérer les données de "todoArray"

Now we have to fetch data stored in “todosArray.” We will use the *ngFor directive to loop through the array and extract the data.

app.component.html:

  • {{todo}}

After fetching data:

The data will now be fetched automatically when we click the add button.

Styling the app

I like to use Google-fonts and Material-icons, which are free to use.

Include Google fonts inside app.component.css:

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

And Material-icons inside index.html:

After adding some styling to our app, it will look like this:

To use Material icons:

iconName

Add “delete” and “add” icons in app.component.html:

// put add icon inside "input-group-text" div
add
// and delete icon inside list item 
  • {{todo}}delete

    • For styles in app.component.css:

    /*Google fonts*/@import url('//fonts.googleapis.com/css?family=Raleway');
    body{ padding: 0; margin: 0;
    }form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em;}form h1{ font-family: "Raleway"; color:#F97300; }form input[type=text]::placeholder{ font-family: "Raleway"; color:#666; }form .data{ margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{ float: right; color: #888; cursor: pointer;}form .input-group-text{ background: #F97300; border-radius: 50%; width: 5em; height: 5em; padding: 1em 23px; color: #fff; position: absolute; right: 13px; top: 68px; cursor: pointer;}form .input-group-text i{ font-size: 2em;}form .form-control{ height: 3em; font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}

    Our app is almost done, but we need to add some features. A delete functionality should let users click a delete icon and delete an item. It would also be great to have the option to enter a new item with the return key, instead of clicking the add button.

    Deleting items

    To add the delete functionality, we will use the “splice” array method and a for loop. We will loop through “todoarray” and extract the item we want to delete.

    Add a (click) event to delete icon and give it “todo” as parameter :

  • {{todo}} delete

    • In app.component.ts:

    /*delete item*/ deleteItem(){ console.log("delete item") }

    When you click delete, this should show up in the console:

    Now we have to loop through “todoArray” and splice the item we clicked.

    In app.component.ts:

    /*delete item*/ deleteItem(todo){ for(let i=0 ;i<= this.todoArray.length ;i++){ if(todo== this.todoArray[i]){ this.todoArray.splice(i,1) } } }

    The result:

    Awesome ?!!

    Entering to add items

    We can add a submit event to the form:

    (ngSubmit)="TodoSubmit()"

    We need to add the variable “#todoForm” to the form and give it “ngForm” as a value. In this case, we just have one field so we will just get a single value. If we have multiple fields, the submit event will return the values of all the fields in the form.

    app.component.html

    in app.component.ts

    // submit Form todoSubmit(value:any){ console.log(value) }

    Check the console. It will return an object of values:

    So now we have to push the returned value to “todoArray”:

    // submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } }

    Here we are ?. The value is inserted without needing to click the add button, just by clicking “enter”:

    One more thing. To reset the the form after submitting, add the “resetForm()” build-in method to submit the event.

    The form will reset after each submit now:

    Adding animations

    I like to add a little touch of animations. To add animation, import the animations components in your app.component.ts:

    import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';

    Then add the animations property to “@component” decorator:

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

    Now the items have a nice effect when they’re entered and deleted.

    All the code

    app.component.ts

    import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';
    @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations:[ trigger("moveInLeft",[ transition("void=> *",[style({transform:"translateX(300px)"}), animate(200,keyframes([ style({transform:"translateX(300px)"}), style({transform:"translateX(0)"}) ]))]),
    transition("*=>void",[style({transform:"translateX(0px)"}), animate(100,keyframes([ style({transform:"translateX(0px)"}), style({transform:"translateX(300px)"}) ]))]) ])
    ]})export class AppComponent { todoArray=[]; todo; //todoForm: new FormGroup()
    addTodo(value){ if(value!==""){ this.todoArray.push(value) //console.log(this.todos) }else{ alert('Field required **') } }
    /*delete item*/ deleteItem(todo){ for(let i=0 ;i<= this.todoArray.length ;i++){ if(todo== this.todoArray[i]){ this.todoArray.splice(i,1) } } }
    // submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } } }

    app.component.html

    Todo App
    add
    • {{todo}} delete

    app.component.css

    /*Google fonts*/@import url('//fonts.googleapis.com/css?family=Raleway');
    body{ padding: 0; margin: 0;
    }form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em; overflow: hidden;}form h1{ font-family: "Raleway"; color:#F97300; }form input[type=text]::placeholder{ font-family: "Raleway"; color:#666; }form .data{ margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{ float: right; color: #888; cursor: pointer;}form .input-group-text{ background: #F97300; border-radius: 50%; width: 5em; height: 5em; padding: 1em 23px; color: #fff; position: absolute; right: 13px; top: 68px; cursor: pointer;}form .input-group-text i{ font-size: 2em;}form .form-control{ height: 3em; font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}

    We are done ?. You can find the files and code on Github.

    See the Demo

    Conclusion

    Angular is easier than you think. Angular is one of the best JavaScript libraries, and it has great support and a nice community. It also has tools that make working with Angular fast and easy, like Angular-cli.

    Subscribe to this mail-list to learn more about Angular.

    [email protected] (@hayanisaid1995) | Twitter

    The latest Tweets from [email protected] (@hayanisaid1995). #Web_Developer /#Frontend / #Back_end(#PHP &…twitter.com

    Here are some of the best online courses to learn Angular for free:

    Angular 1.x

    • Shaping with Angular
    • Learn Angular

    Angular 2.x (recommended)

    • learn Angular2 (coursetro)
    • YouTube playlist