CRUD műveletek végrehajtása szögben

Amint az előző blogomban láthattad, CRUD műveleteket vanília JavaScript-sel lehet végrehajtani. Nehéz döntés lehet azonban a vanília JavaScript kiválasztása, mivel egy bizonyos ponton egyre szebb lesz. Sőt, fájdalom, amint láttuk, az eseményhallgatók dinamikusan hozzáadott DOM-elemekhez való hozzáadása. Még bonyolultabbá válik a nagyszabású projektek esetében.

Az egyik megoldás az olyan modern keretek használata, mint az Angular, a React és így tovább. Ez a blogbejegyzés ugyanazon az elven alapul, mint az előző példa, de Angular-t használ.

Ez a blog feltételezi, hogy már telepítette az Angular-cli-t a gépére. Miután elkészült, hozzon létre egy új alkalmazást az alábbi paranccsal.

ng new ngTodo

Várjon néhány másodpercet a projekt létrehozása után, majd cd-t a projektbe. Az első dolog, amire szükségünk van, egy új komponens létrehozása az alábbi paranccsal.

ng generate component todo

Ez létrehoz egy mappát, amelynek neve todo az src / app mappában. Ez a mappa todo.component.ts, todo.component.html, todo.component.css és todo.component.spec.ts fájlokból áll.

Az összes JavaScript be lesz írva a .ts fájlba. Valójában a TypeScript sablonkód (ezért a fájlkiterjesztés .ts) a todo.component.html fájlhoz, a stílusok a todo.component.css fájlhoz, a todo.component.spec.ts pedig a tesztekhez tartozik.

A kezdéshez először meg kell adni ezt az összetevőt az „app.component.html” fájlba, így:

Most, amikor a „ng serve” futtatja és betölti az alkalmazást a böngészőbe, a todo komponens betöltődik.

Itt az ideje áttérni a todo.component.ts fájlra.

Kell lennie valamilyen kazánlap kódnak, amelyet szögletes-cli írt. Minden kódunk a TodoComponent osztályba esik.

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() { }
}

Először magyarázzuk el a fenti kazán kódot. Először importáljuk a Component decorator és az OnInit interfészt az Angular magból. Az alábbiakban a dekoratőr definíciója található.

A Decorator egy osztályt szögletes összetevőként jelöl meg, és lehetővé teszi számunkra a konfigurációs metaadatok beállítását, amelyek meghatározzák, hogy az összetevőt hogyan kell feldolgozni, példányosítani és futás közben használni.

Mivel

Az interfész egy életciklus-kampó, amelyet akkor hívnak meg, amikor az Angular inicializálta az irányelv összes adathoz kötött tulajdonságát. Adjon meg egy ngOnInit()módszert a további inicializálási feladatok kezelésére.

Ezután exportáljuk a TodoComponent osztályt, hogy elérhetővé tegyük a projekt többi részében is. Ebben a példában csak arra lesz szükségünk, hogy ezt az összetevőt az app.module.ts fájlba importáljuk az összetevő elindításához.

Mivel ezt az összetevőt angular-cli segítségével hoztuk létre, máris gondját viseli az a rész. Ha belenéz az app.module.ts fájlba, látni fogja, hogy a TodoComponent osztály importálva van, és hozzáadódik a deklarációk tömbhöz. Adjunk hozzá most egy kis kódot.

Az előző példához hasonlóan adjon hozzá egy mockData tulajdonságot az alábbihoz hasonló osztályhoz.

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() { }
}

Mint láthatja, a mockData-hoz is hozzáadtuk az „any” típust . A TypeScript szigorúan írja be a funkcionalitást a JavaScript-be, de ebben az esetben ez nem számít. Ha elhagyja tőle azt a részt, akkor is rendben kell lennie.

Adjunk hozzá még néhány tulajdonságot ehhez az osztályhoz, amelyet később használunk.

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() { }
}

A show- tulajdonság mutatni editForm az érték tulajdonság az az értéket Edit, mivel id használnak ahhoz, hogy az id a jelenleg szerkesztett elem. Ezt később meglátjuk.

Mielőtt további megbeszélésbe kezdenénk, adjunk hozzá egy html sablont, amelyet használni fogunk.

 Update 
 Add

    
  • {{item.title}} Delete Edit Complete

Itt látható egy csomó különbség. Az első, ami észrevehető, az a „edit-popup”. Van egy * ngIf feltételes direktíva, amely megmutatja és elrejti a html kód ezen részét a „show” értéke alapján, amely igaz vagy hamis. Ez az a tulajdonság, amely a korábban beállított TodoComponentből származik.

Ezután egyszerűen írja be az értéket (címet) a {{}} zárójelek használatával a beviteli szövegmezőbe. Végül adjon hozzá egy kattintási eseményt, amely meghívja a frissítési függvényt, és argumentumként adja át a beviteli mező értékét.

Aztán ott van az ul lista, amely az összes elemet mutatja. Amint láthatja, a li elemnek van * ngFor, amely egy ismétlő irányelv . Hurkol a mockData-n, és benne elérjük az aktuális objektumot, és megjelenítjük a címét.

Az [ngClass] irányelv hozzáadja a kész osztályt a li elemhez a kész értéke és az elem tulajdonságai alapján. Ha ez igaz, adja hozzá az kész osztályt, amely a line-vályút helyezi a li elemre, jelezve, hogy ezt a feladatot elérték.

Meg vannak a gombjai, amelyek a Törlés, a Szerkesztés és a Teljes gomb. Mindegyikük rendelkezik kattintási eseményekkel, amelyek meghívják a megfelelő funkciót, és átadják az aktuális elem azonosítóját. Az id mellett található szerkesztési funkcióban a címet is argumentumként adják át.

Tehát ennyi a sablon. Térjünk vissza a TodoComponenthez. Itt nincs szükségünk olyan renderelési függvényre, amely a vanília JavaScriptben volt. Az mockData lista és a * ngFor direktíva elvégzi a renderelés feladatát. Tehát a CRUD R része elkészült. Futtassa a szögletes kiszolgálót az „ng serve” használatával, és töltse be az alkalmazást a böngészőjébe. Hasonló eredményeket kell elérnie, mint az alábbiak:

Most hozzuk létre azt a függvényt, amely a CR a CR-ben.

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() { }
}

A Létrehozás funkció akkor aktiválódik, amikor az ADD gombra kattint a sablonból. Ezt nagyon könnyű megérteni és követni. Először a kulcsszó segítségével éri el a mockData tömböt, és új objektumot tol be a megfelelő tulajdonságokkal (például azonosító, cím, kész és dátum stb.). Ez elvégzi a munkát.

Frissítse a böngészőt, írja be az „Ez egy új elem” kifejezést, majd nyomja meg az ADD gombot - hasonló eredményt kap a fentiekhez képest.

Most folytassuk az eltávolítás / törlés funkcióval, amely a CRUD D része.

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() { }
}

Ismét nagyon egyszerű. Szűrje át a mockData-t, és keresse meg az aktuális elemet a törlendő elem azonosítója és az aktuális elem azonosítója alapján a mockData-ból . És tegyen vissza minden elemet, kivéve azt, amelyik megfelel ennek az elemnek.

Frissítse a böngészőt, és törölje az első elemet a listából. Az alábbiak szerint törölni kell a képernyőről:

A frissítéshez megint ugyanaz, mint a vanília JavaScript példán: a szerkesztés két lépés része. Először mutassa meg a szerkesztési űrlapot, a második pedig frissítse az elemet. Először mutassuk meg a szerkesztési űrlapot, amely „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() { }
}

The above function simply sets some TodoComponent attributes — that is, set this.show to true which displays the form. Set the value of this.value to the item’s title that is to be updated, and set this.id to the item’s id. All these attributes can then be accessed in the template and we can use them accordingly.

Now press the EDIT button for the first item and you should be able to see the edit form appear at the top of the page:

Now it’s time to write the update function that actually performs update operations — this is the U part of 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() { }
}

This function gets the title, that is the value of the updated input text field, as an argument. Then map through mockData and place a check to find the item that needs to be updated based on its id. Once found, replace the title property with the edited one and set this.show to false to hide the edit form.

With this part, when you press the UPDATE button, after entering the updated title you should see the updated title like this:

The final part is to mark the task as done, which function is below.

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() { }
}

This does pretty much the same stuff: map through mockData and find the item to be set as done based on id, and set its done property to true.

Finally, add some CSS in the todo.component.css file below.

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

The above CSS adds a line-through to any element that has the done class, in this case tasks that are completed.

After this, press a couple of Complete buttons and you should see something similar like this:

You can see the difference between this example and the previous one using vanilla JavaScript. Angular allows us to write an approach that’s easy to understand, maintain and scale. This is beneficial in large scale applications. Vanilla JavaScript does the job, but really gets complicated once the application grows.

To get all the code written in this example, go ahead and clone the below repository.

//github.com/zafar-saleem/ngTodo