de Zafar Saleem

Cum se efectuează operații CRUD în Angular

Așa cum ați văzut probabil în mine blogul anterior, este posibil să efectuați operațiuni CRUD în JavaScript vanilat. Cu toate acestea, poate fi o decizie dificilă să alegeți JavaScript vanilat, deoarece devine mai dezordonat la un moment dat. Mai mult, adăugarea de ascultători de evenimente la elemente DOM adăugate dinamic este o durere, așa cum am văzut. Devine și mai complicat pentru proiectele de anvergură.

Cum se efectueaza operatii CRUD in Angular

O soluție este utilizarea cadrelor moderne precum Angular, React și așa mai departe. Această postare pe blog se bazează pe același concept ca în exemplul anterior, dar utilizând Angular.

Acest blog presupune că ați instalat deja Angular-cli pe computer. După ce o aveți, creați o nouă aplicație folosind comanda de mai jos.

ng new ngTodo
Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

Așteptați câteva secunde după ce proiectul este creat, apoi cd în acest proiect. Primul lucru de care avem nevoie este să creăm o componentă nouă folosind comanda de mai jos.

ng generate component todo

Aceasta va crea un folder cu numele todo în folderul src / app. Acest dosar este format din fișiere todo.component.ts, todo.component.html, todo.component.css și todo.component.spec.ts.

Toate JavaScript vor fi scrise în fișierul .ts. De fapt, codul șablonului TypeScript (de aceea extensia de fișier este .ts) merge la fișierul todo.component.html, stilurile la todo.component.css și todo.component.spec.ts este pentru teste.

Pentru a începe, primul lucru care trebuie făcut este să adăugați această componentă în fișierul „app.component.html” astfel:

<app-todo></app-todo>

Acum, când rulați „ng serve” și încărcați aplicația în browser, va fi încărcată componenta todo.

Citește mai multCum se generează un fișier de reducere GitHub din Microsoft Word utilizând TypeScript

Acum este timpul să accesați fișierul todo.component.ts.

Ar trebui să existe un cod de cazan scris de angular-cli. Tot codul nostru intră în clasa TodoComponent.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

Să explicăm mai întâi codul cazanului de mai sus. Mai întâi importăm Component decorator și interfața OnInit din nucleul unghiular. Mai jos este definiția unui decorator.

Decorator marchează o clasă ca componentă unghiulară și ne permite să setăm metadate de configurație care determină modul în care componenta ar trebui procesată, instanțiată și utilizată în timpul rulării.

Întrucât

Interfața este un cârlig al ciclului de viață care este apelat după ce Angular a inițializat toate proprietățile legate de date ale unei directive. Definiți un ngOnInit()metoda de gestionare a oricăror sarcini suplimentare de inițializare.

Apoi exportăm clasa TodoComponent pentru ao face disponibilă pentru import în restul proiectului. Pentru acest exemplu, vom avea nevoie doar de importarea acestei componente app.module.ts pentru a iniția componenta.

Citește mai multAutentificare utilizând Google în ASP.NET Core 2.0

Din moment ce am creat această componentă folosind angular-cli, acea parte este deja îngrijită. Dacă te uiți în app.module.ts fișier, veți vedea că clasa TodoComponent este importată și adăugată la matricea de declarații. Să adăugăm un cod acum.

La fel ca exemplul nostru anterior, adăugați un mockData proprietate pentru clasa de mai jos.

import { Component, OnInit } from '@angular/core';
@Component({  selector: 'app-todo',  templateUrl: './todo.component.html',  styleUrls: ['./todo.component.css']})export class TodoComponent implements OnInit {
  // mockData array the includes list of objects with items  mockData: any = [    {      id: '1',      title: 'Buy Milk.',      done: false,      date: new Date()    }, {      id: '2',      title: 'Meeting with Ali.',      done: false,      date: new Date()    }, {      id: '3',      title: 'Tea break.',      done: false,      date: new Date()    }, {      id: '4',      title: 'Go for a run.',      done: false,      date: new Date()    }  ];
  constructor() { }
  ngOnInit() { }
}

După cum puteți vedea, am adăugat și tipul „orice” la mockData. TypeScript aduce funcționalități de tip strict în JavaScript, dar în acest caz nu contează. Dacă lăsați acea parte din ea, ar trebui să fie în continuare bine.

Să adăugăm câteva proprietăți la această clasă, care vor fi folosite mai târziu.

import { Component, OnInit } from '@angular/core';
@Component({  selector: 'app-todo',  templateUrl: './todo.component.html',  styleUrls: ['./todo.component.css']})export class TodoComponent implements OnInit {
  mockData: any = [    {      id: '1',      title: 'Buy Milk.',      done: false,      date: new Date()    }, {      id: '2',      title: 'Meeting with Ali.',      done: false,      date: new Date()    }, {      id: '3',      title: 'Tea break.',      done: false,      date: new Date()    }, {      id: '4',      title: 'Go for a run.',      done: false,      date: new Date()    }  ];
  // properties to show hide edit form, set updated value and id.  show: boolean = false;  value: string;  id: number;
  constructor() {}
  ngOnInit() { }
}

spectacol proprietatea este utilizată pentru a afișa editForm, fișierul valoare proprietatea este utilizată pentru a seta valoarea editării titlului, în timp ce id este folosit pentru a atribui ID-ul articolului curent editat. Vom vedea asta mai târziu.

Înainte de a intra în discuții suplimentare, să adăugăm un șablon html pe care îl vom folosi.

<div class="sections">  <div class="edit-popup" *ngIf="show">    <input type="text" name="" class="edit-item" value="{{value}}" #item>    <button class="btn-update" (click)="update(item.value)">Update</button>  </div>
<input type="text" name="" class="item" #item>  <button class="btn-add-item" (click)="create(item.value)">Add</button>
<ul>    <li *ngFor="let item of mockData">      <span [ngClass]="{'done': item.done}">{{item.title}}</span>      <button (click)="remove(item.id)">Delete</button>      <button (click)="edit(item.id, item.title)">Edit</button>      <button (click)="setTaskComplete(item.id)">Complete</button>    </li>  </ul></div>

Aici pot fi observate o grămadă de diferențe. Primul lucru care este vizibil este „edit-popup”. Are un * ngIf condiţional directivă care arată și ascunde această bucată de cod html pe baza valorii „show” care este fie adevărat, fie fals. Aceasta este proprietatea care vine de la TodoComponent pe care l-am configurat mai devreme.

Apoi pur și simplu puneți valoarea (titlul) folosind paranteze {{}} în câmpul de text de intrare. În cele din urmă, adăugați un eveniment de clic care va apela funcția de actualizare și va transmite valoarea câmpului de intrare ca argument.

Apoi, este lista ul care arată toate articolele. După cum puteți vedea, elementul li are * ngPentru care este un directiva repetor. Se parcurge mockData iar în interiorul său accesăm obiectul curent și afișăm titlul acestuia.

[ngClass] directiva adaugă clasa done la elementul li pe baza valorii done și a proprietății elementului. Dacă este adevărat, adăugați Terminat clasa care pune linie-jgheab pe elementul li pentru a indica faptul că această sarcină a fost realizată.

Are, de asemenea, butoanele sale, care sunt butoanele Ștergere, Editare și Completare. Și fiecare dintre ele are evenimente de clic care apelează funcția respectivă și transmit ID-ul elementului curent. În funcția de editare alături de id, titlul este trecut și ca argument.

Deci asta este pentru șablon. Să ne întoarcem la TodoComponent. Aici nu avem nevoie de nicio funcție de redare pe care o aveam în JavaScript vaniliat mockData listă și * ngPentru directivă face treaba pentru redare. Deci, partea R a CRUD este terminată. Rulați serverul unghiular folosind „ng serve” și încărcați aplicația în browser. Ar trebui să aveți rezultate similare ca mai jos:

1611251770 736 Cum se efectueaza operatii CRUD in Angular

Să creăm acum funcția care este C în CRUD.

import { Component, OnInit } from '@angular/core';
@Component({  selector: 'app-todo',  templateUrl: './todo.component.html',  styleUrls: ['./todo.component.css']})export class TodoComponent implements OnInit {
mockData: any = [    {      id: '1',      title: 'Buy Milk.',      done: false,      date: new Date()    }, {      id: '2',      title: 'Meeting with Ali.',      done: false,      date: new Date()    }, {      id: '3',      title: 'Tea break.',      done: false,      date: new Date()    }, {      id: '4',      title: 'Go for a run.',      done: false,      date: new Date()    }];
  show: boolean = false;  value: string;  id: number;
  constructor() {}
  // Create function to create new item.  create(item) {    this.mockData.push({      id: Date.now(),      title: item,      done: false,      date: new Date()    });  }
  ngOnInit() { }
}

Funcția Create este declanșată când ADĂUGA se face clic pe butonul din șablon. Acest lucru este foarte ușor de înțeles și de urmat. În primul rând, accesează fișierul mockData matrice folosind acest cuvânt cheie și împinge un obiect nou cu proprietăți adecvate (cum ar fi id, titlu, terminat și dată etc.). Aceasta va face treaba.

1611251770 943 Cum se efectueaza operatii CRUD in Angular

Reîmprospătați browserul și tastați „Acesta este un element nou” și apăsați butonul ADAUGĂ – veți obține un rezultat similar cu cel de mai sus.

Acum să continuăm spre elimina / șterge funcție care este partea D a CRUD.

import { Component, OnInit } from '@angular/core';
@Component({  selector: 'app-todo',  templateUrl: './todo.component.html',  styleUrls: ['./todo.component.css']})export class TodoComponent implements OnInit {
  mockData: any = [    {      id: '1',      title: 'Buy Milk.',      done: false,      date: new Date()    }, {      id: '2',      title: 'Meeting with Ali.',      done: false,      date: new Date()    }, {      id: '3',      title: 'Tea break.',      done: false,      date: new Date()    }, {      id: '4',      title: 'Go for a run.',      done: false,      date: new Date()    }  ];
  show: boolean = false;  value: string;  id: number;
  constructor() {}
  create(item) {    this.mockData.push({      id: Date.now(),      title: item,      done: false,      date: new Date()    });  }
  // delete/remove function goes here.  remove(id) {    this.mockData = this.mockData.filter(item => {      if (item.id !== id) {        return item;      }    });  }
  ngOnInit() { }
}

Din nou foarte simplu. Filtrează prin mockData și găsiți elementul curent folosind ID-ul elementului care urmează să fie șters și ID-ul elementului curent din mockData. Și returnează toate articolele, cu excepția celui care se potrivește cu acest element.

Reîmprospătați browserul și ștergeți primul element din listă. Ar trebui șters de pe ecran, după cum urmează:

1611251771 572 Cum se efectueaza operatii CRUD in Angular

Pentru actualizare, din nou, este la fel ca exemplul JavaScript vanilat: edit face parte din doi pași. Mai întâi afișați formularul de editare și apoi actualizați articolul. Mai întâi să arătăm formularul de editare care este „edit-popup”:

import { Component, OnInit } from '@angular/core';
@Component({  selector: 'app-todo',  templateUrl: './todo.component.html',  styleUrls: ['./todo.component.css']})export class TodoComponent implements OnInit {
  mockData: any = [    {      id: '1',      title: 'Buy Milk.',      done: false,      date: new Date()    }, {      id: '2',      title: 'Meeting with Ali.',      done: false,      date: new Date()    }, {      id: '3',      title: 'Tea break.',      done: false,      date: new Date()    }, {      id: '4',      title: 'Go for a run.',      done: false,      date: new Date()    }  ];
  show: boolean = false;  value: string;  id: number;
  constructor() {}
  create(item) {    this.mockData.push({      id: Date.now(),      title: item,      done: false,      date: new Date()    });  }
  remove(id) {    this.mockData = this.mockData.filter(item => {      if (item.id !== id) {        return item;      }    });  }
  // this function does the same as renderEditForm in previous blog.  edit(id, title) {    this.show = true;    this.value = title;    this.id = id;  }
  ngOnInit() { }
}

Funcția de mai sus setează pur și simplu unele TodoComponent atribute – adică setate acest spectacol la adevărat care afișează formularul. Setați valoarea aceasta.valoare la titlul elementului care urmează să fie actualizat și setat aceasta.id la ID-ul articolului. Toate aceste atribute pot fi apoi accesate în șablon și le putem folosi în consecință.

Acum apăsați butonul EDITARE pentru primul element și ar trebui să puteți vedea formularul de editare care apare în partea de sus a paginii:

1611251771 295 Cum se efectueaza operatii CRUD in Angular

Acum este timpul să scrieți funcția de actualizare care efectuează de fapt operațiuni de actualizare – aceasta este partea U a CRUD.

import { Component, OnInit } from '@angular/core';
@Component({  selector: 'app-todo',  templateUrl: './todo.component.html',  styleUrls: ['./todo.component.css']})export class TodoComponent implements OnInit {
  mockData: any = [    {      id: '1',      title: 'Buy Milk.',      done: false,      date: new Date()    }, {      id: '2',      title: 'Meeting with Ali.',      done: false,      date: new Date()    }, {      id: '3',      title: 'Tea break.',      done: false,      date: new Date()    }, {      id: '4',      title: 'Go for a run.',      done: false,      date: new Date()    }  ];
  show: boolean = false;  value: string;  id: number;
  constructor() {}
  create(item) {    this.mockData.push({      id: Date.now(),      title: item,      done: false,      date: new Date()    });  }
  remove(id) {    this.mockData = this.mockData.filter(item => {      if (item.id !== id) {        return item;      }    });  }
  edit(id, title) {    this.show = true;    this.value = title;    this.id = id;  }
  // function that performs update   update(title) {    this.mockData.map(item => {      if (item.id === this.id) {        item['title'] = title;      }    });
    this.show = false;  }
  ngOnInit() { }
}

Această funcție primește titlul, adică valoarea câmpului de text de intrare actualizat, ca argument. Apoi hartați prin mockData și bifați o verificare pentru a găsi elementul care trebuie actualizat pe baza id-ului său. Odată găsit, înlocuiți proprietatea titlu cu cea editată și setați acest spectacol a false pentru a ascunde formularul de editare.

Cu această parte, când apăsați butonul UPDATE, după introducerea titlului actualizat, ar trebui să vedeți titlul actualizat astfel:

1611251771 364 Cum se efectueaza operatii CRUD in Angular

Partea finală este de a marca sarcina ca terminată, funcție care este mai jos.

import { Component, OnInit } from '@angular/core';
@Component({  selector: 'app-todo',  templateUrl: './todo.component.html',  styleUrls: ['./todo.component.css']})export class TodoComponent implements OnInit {
  mockData: any = [    {      id: '1',      title: 'Buy Milk.',      done: false,      date: new Date()    }, {      id: '2',      title: 'Meeting with Ali.',      done: false,      date: new Date()    }, {      id: '3',      title: 'Tea break.',      done: false,      date: new Date()    }, {      id: '4',      title: 'Go for a run.',      done: false,      date: new Date()    }  ];
  show: boolean = false;  value: string;  id: number;
  constructor() {}
  create(item) {    this.mockData.push({      id: Date.now(),      title: item,      done: false,      date: new Date()    });  }
  remove(id) {    this.mockData = this.mockData.filter(item => {      if (item.id !== id) {        return item;      }    });  }
  edit(id, title) {    this.show = true;    this.value = title;    this.id = id;  }
  update(title) {    this.mockData.map(item => {      if (item.id === this.id) {        item['title'] = title;      }    });
    this.show = false;  }
  setTaskComplete(id) {    this.mockData.map(item => {      if (item.id === id) {        item['done'] = true;      }    });  }
  ngOnInit() {  }
}

Acest lucru face cam aceleași lucruri: hărți prin mockData și găsiți elementul care urmează să fie setat ca realizat pe baza id-ului și setați proprietatea sa finalizată la adevărat.

În cele din urmă, adăugați câteva CSS în fișierul todo.component.css de mai jos.

.done {  text-decoration: line-through;}

CSS de mai sus adaugă o linie directă către orice element care are clasa done, în acest caz sarcinile care sunt finalizate.

După aceasta, apăsați câteva butoane complete și ar trebui să vedeți ceva similar:

1611251772 341 Cum se efectueaza operatii CRUD in Angular

Puteți vedea diferența dintre acest exemplu și cel anterior folosind JavaScript vanilat. Angular ne permite să scriem o abordare ușor de înțeles, de întreținut și de scalat. Acest lucru este benefic în aplicații pe scară largă. Vanilla JavaScript face treaba, dar se complică cu adevărat odată ce aplicația crește.

Pentru a obține tot codul scris în acest exemplu, continuați și clonați depozitul de mai jos.

https://github.com/zafar-saleem/ngTodo