Angular este un cadru JavaScript, creat de Misko Hevery și întreținut de Google. Este un MVC (Model View Vontroller). Poti vizitați pagina oficială pentru a afla mai multe despre asta.

În acest moment, cea mai recentă versiune de Angular este 5.2.10. Există prima generație 1.x și a doua generație 2.x, iar cele două generații sunt total diferite în structurile și metodele lor. Nu vă faceți griji dacă vă simțiți confuz cu privire la versiune, deoarece în acest articol vom folosi a doua generație 2.x

Aflati cum sa creati prima aplicatie Angular in 20 de

Cuprins

  • Adăugarea unui articol (aflați cum să trimiteți un formular în Angular)
  • Eliminarea unui articol (aflați cum să adăugați un eveniment în Angular)
  • Animație unghiulară (aflați cum se animă componentele)

Condiții preliminare:

  • Node.js

Verificați dacă node.js este instalat pe computer. Aflați mai multe despre instalare.

  • npm

npm (managerul de pachete nod) este instalat cu Node.js

Verifică node.js versiune:

node -v

npm:

npm -v

Angular-CLI

Ar trebui să aveți cea mai recentă versiune de Angular-CLI. Aflați mai multe despre CLI angular aici, și găsiți instrucțiunile de instalare.

Instalați Angular-cli:

npm install -g @angular/cli

Și, în cele din urmă, ar trebui să aveți:

  • Cunoștințe de bază despre JavaScript
  • Fundamentele HTML și CSS

Nu trebuie să aveți cunoștințe despre Angular.

Acum, că avem mediul pentru a rula aplicația noastră Angular, să începem!

Crearea primei noastre aplicații

Vom folosi angular-cli pentru a crea și genera componentele noastre. Acesta va genera servicii, router, componente și directive.

Pentru a crea un nou proiect Angular cu Angular-cli, rulați:

ng new my-app

Proiectul va fi generat automat. Să creăm aplicația noastră de rezolvat!

ng new todo-app

Apoi, deschideți fișierele din editorul de text. Folosesc text Sublim, dar puteți alege orice editor.

Iată cum arată structura aplicației:

Aflati cum sa creati prima aplicatie Angular in 20 de

Nu vă faceți griji dacă sunteți confuz cu privire la fișiere. Toată munca noastră va fi în aplicație pliant. Conține cinci fișiere:

1611622386 663 Aflati cum sa creati prima aplicatie Angular in 20 de

Notă: Angular 2 utilizează TypeScript, în care fișierele se termină cu „.ts ”extensie.

Pentru a crea o interfață drăguță pentru aplicația noastră, vom folosi Bootstrap 4 Cadru.

Includeți bootstrap cdn în index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Rulați aplicația în terminal:

ng serve

Aplicația va rula http: // localhost: 4200 /

1611622386 597 Aflati cum sa creati prima aplicatie Angular in 20 de

Totul e bine ?!

Acum să facem o structurare HTML. Vom folosi clasele Bootstrap pentru a crea un formular simplu.

1611622386 379 Aflati cum sa creati prima aplicatie Angular in 20 de

app.component.html:

<div class="container"> <form>  <div class="form-group">  <h1 class="text-center text-primary">Todo App</h1>   <div class="input-group-prepend">       <input type="text" class="form-control" placeholder="Add Todo" name="todo">    <span class="input-group-text">Add</span>   </div>  </div> </form></div>

În app.component.css:

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

Pentru a captura valoarea de intrare în Angular 2, putem folosi ngModel directivă. Puteți insera o variabilă ca atribut în interiorul elementului de intrare.

1611622386 821 Aflati cum sa creati prima aplicatie Angular in 20 de
<input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel>

Pentru a crea o variabilă ca atribut, utilizați # urmat de numele variabilei.

<input #myVariable type="text" name="text" ngModel>
// get the value of the Variable<p>{{myVariable.value}}</p>

Acum obțineți valoarea variabilă „todo”:

<p>{{todo.value}}</p>

Totul e bine ?!

Acum trebuie să stocăm valoarea capturată din intrare. Putem crea o matrice goală în app.component.ts în clasa AppComponent:

export class AppComponent {  todoArray=[] }

Apoi trebuie să adăugăm un eveniment de clic la butonul nostru care împinge valoarea capturată în „todoArray”.

1611622386 422 Aflati cum sa creati prima aplicatie Angular in 20 de

app.component.html:

<span class="input-group-text" (click)="addTodo(todo.value)">Add</span>

În app.component.ts:

export class AppComponent { todoArray=[]
addTodo(value){    this.todoArray.push(value)    console.log(this.todos)  } }

Utilizați console.log (this.todoArray) pentru a vedea valoarea matricei

Obțineți date din „todoArray”

Acum trebuie să preluăm datele stocate în „todosArray”. Vom folosi *ngPentru directivă pentru a parcurge matricea și a extrage datele.

app.component.html:

<div class="data">  <ul class="list-instyled">   <li *ngFor="let todo of todoArray">{{todo}}</li>  </ul>  </div>

După preluarea datelor:

1611622386 161 Aflati cum sa creati prima aplicatie Angular in 20 de

Datele vor fi preluate automat atunci când facem clic pe butonul Adăugare.

1611622386 143 Aflati cum sa creati prima aplicatie Angular in 20 de

Stilul aplicației

Îmi place să folosesc Google-fonts și Pictograme materiale, care sunt gratuite.

Includeți fonturi Google în interior app.component.css:

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

Și icoane materiale în interior index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

După adăugarea unor stiluri în aplicația noastră, va arăta astfel:

1611622386 181 Aflati cum sa creati prima aplicatie Angular in 20 de

Pentru a utiliza pictogramele Material:

<i class="material-icons>iconName</i>

Adăugați pictograme „ștergeți” și „adăugați” în app.component.html:

// put add icon inside "input-group-text" div
<span class="input-group-text" (click)="addTodo(todo.value)"><i class="material-icons">add</i></span>
// and delete icon inside list item <li *ngFor="let todo of todoArray">{{todo}}<i class="material-icons">delete</i></li>

Pentru stiluri în app.component.css:

/*Google fonts*/@import url('https://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;}

Aplicația noastră este aproape terminată, dar trebuie să adăugăm câteva funcții. O funcționalitate de ștergere ar trebui să permită utilizatorilor să facă clic pe o pictogramă de ștergere și să șteargă un element. De asemenea, ar fi minunat să aveți opțiunea de a introduce un nou articol cu ​​tasta de returnare, în loc să faceți clic pe butonul Adăugați.

Ștergerea articolelor

Pentru a adăuga funcționalitatea de ștergere, vom folosi metoda matricei „splice” și o buclă for. Vom cerceta prin „todoarray” și vom extrage elementul pe care dorim să-l ștergem.

Adăugați un eveniment (clic) pentru a șterge pictograma și dați-i „todo” ca parametru:

<li *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>

În app.component.ts:

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

Când faceți clic pe ștergere, aceasta ar trebui să apară în consolă:

1611622386 116 Aflati cum sa creati prima aplicatie Angular in 20 de

Acum trebuie să parcurgem „todoArray” și să îmbinăm elementul pe care am făcut clic.

În 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)    }   }  }

Rezultatul:

1611622386 666 Aflati cum sa creati prima aplicatie Angular in 20 de

Minunat ?!!

Intrarea pentru a adăuga elemente

Putem adăuga un eveniment de trimitere la formular:

(ngSubmit)="TodoSubmit()"

Trebuie să adăugăm variabila „#todoForm” la formular și să-i dăm „ngForm” ca valoare. În acest caz, avem doar un câmp, așa că vom obține o singură valoare. Dacă avem mai multe câmpuri, evenimentul de trimitere va returna valorile tuturor câmpurilor din formular.

app.component.html

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value)"></form>

în app.component.ts

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

Verificați consola. Acesta va returna un obiect de valori:

1611622386 734 Aflati cum sa creati prima aplicatie Angular in 20 de

Deci, acum trebuie să împingem valoarea returnată la „todoArray”:

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

Iată-ne ?. Valoarea este inserată fără a fi nevoie să faceți clic pe butonul Adăugare, doar făcând clic pe „enter”:

1611622386 663 Aflati cum sa creati prima aplicatie Angular in 20 de

Inca un lucru. Pentru a reseta formularul după trimitere, adăugați metoda integrată „resetForm ()” pentru a trimite evenimentul.

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value); todoForm.resetForm()" ></form>

Formularul se va reseta după fiecare trimitere acum:

1611622386 822 Aflati cum sa creati prima aplicatie Angular in 20 de

Adăugarea de animații

Îmi place să adaug un pic de animație. Pentru a adăuga animație, importați componentele animațiilor din fișierul dvs. app.component.ts:

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

Apoi adăugați proprietatea animațiilor la decoratorul „@component”:

@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)"})           ]))])             ])
]})

Acum elementele au un efect frumos atunci când sunt introduse și șterse.

1611622386 270 Aflati cum sa creati prima aplicatie Angular in 20 de

Tot codul

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

<div class="container"> <form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" >  <div class="form-group">  <h1 class="text-center ">Todo App</h1>   <div class="input-group-prepend">       <input type="text" #todo  class="form-control" placeholder="Add Todo" name="todo" ngModel>    <span class="input-group-text" (click)="addTodo(todo.value)">    <i class="material-icons">add</i></span>   </div>  </div>  <div class="data">  <ul class="list-unstyled">   <li [@moveInLeft]  *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>  </ul> </div> </form></div>

app.component.css

/*Google fonts*/@import url('https://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;}

Am terminat ?. Puteți găsi fișierele și codul pe Github.

Vezi Demo

Concluzie

Unghiular este mai ușor decât crezi. Angular este una dintre cele mai bune biblioteci JavaScript și are un mare sprijin și o comunitate plăcută. De asemenea, are instrumente care fac lucrul cu Angular rapid și ușor, cum ar fi Angular-cli.

Abonează-te la asta mail-list pentru a afla mai multe despre Angular.

SaidHayani @ (@ hayanisaid1995) | Stare de nervozitate
Cele mai recente tweets de la SaidHayani @ (@ hayanisaid1995). #Web_Developer / # Frontend / #Back_end (#PHP & …twitter.com

Iată câteva dintre cele mai bune cursuri online pentru a învăța Angular gratuit:

Unghiular 1.x

2.x unghiular (recomandat)