Kako izvoditi CRUD operacije u Angulu

Programiranje

Kao što ste mogli vidjeti na mom prethodnom blogu, moguće je raditi CRUD operacije na vanilin JavaScript-u. Međutim, može biti teška odluka odabrati vanilin JavaScript jer u nekom trenutku postane neuredniji. Štoviše, dodavanje slušatelja događaja dinamički dodanim DOM elementima je muka, kao što smo vidjeli. To postaje još složenije za velike projekte.

Jedno je rješenje korištenje modernih okvira poput Angular, React itd. Ovaj se post na blogu temelji na istom konceptu kao i prethodni primjer, ali koristeći Angular.

Ovaj blog pretpostavlja da ste na svoj stroj već instalirali Angular-cli. Kad ga dobijete, stvorite novi program pomoću naredbe u nastavku.

ng new ngTodo

Pričekajte nekoliko sekundi nakon izrade projekta, a zatim cd u ovaj projekt. Prvo što trebamo je stvoriti novu komponentu pomoću naredbe u nastavku.

ng generate component todo

To će stvoriti mapu s imenom todo unutar mape src / app. Ova se mapa sastoji od datoteka todo.component.ts, todo.component.html, todo.component.css i todo.component.spec.ts.

Sav JavaScript bit će zapisan u .ts datoteku. Zapravo kod TypeScript predloška (zato je ekstenzija datoteke .ts) ide u datoteku todo.component.html, stilovi u todo.component.css, a todo.component.spec.ts je za testove.

Da biste započeli, prvo što treba učiniti je dodati ovu komponentu u datoteku "app.component.html" ovako:

Sada kada pokrenete "ng serve" i učitate aplikaciju u preglednik, učitat će se komponenta todo.

Sada je vrijeme da prijeđete na datoteku todo.component.ts.

Trebao bi postojati neki standardni obrazac koji je napisao angular-cli. Sav naš kod ulazi u klasu 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() { }
}

Objasnimo prvo gornji kod tipa. Prvo uvozimo dekorater komponenata i sučelje OnInit iz kutne jezgre. Ispod je definicija dekoratera.

Dekorator označava klasu kao Angular komponentu i omogućuje nam postavljanje metapodataka konfiguracije koji određuju kako komponenta treba biti obrađena, instancirana i korištena tijekom izvođenja.

Dok

Sučelje je kuka životnog ciklusa koja se poziva nakon što je Angular inicijalizirao sva svojstva vezana za podatke direktive. Definirajte ngOnInit()metodu za rukovanje dodatnim zadacima inicijalizacije.

Tada izvozimo klasu TodoComponent kako bismo je učinili dostupnom za uvoz u ostatak projekta. U ovom primjeru trebat će nam samo da se ova komponenta uveze u app.module.ts za pokretanje komponente.

Budući da smo ovu komponentu stvorili pomoću angular-cli, taj je dio već zbrinut. Ako pogledate datoteku app.module.ts , vidjet ćete da je klasa TodoComponent uvezena i dodana u niz deklaracija. Dodajmo sada kod.

Baš kao i naš prethodni primjer, dodajte svojstvo mockData u klasu kao u nastavku.

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

Kao što vidite, u mockData smo dodali i tip "bilo koji" . TypeScript donosi strogo funkcionalnost tipa u JavaScript, ali u ovom slučaju to stvarno nije važno. Ako iz njega ostavite taj dio, i dalje bi trebao biti u redu.

Dodajmo ovoj klasi još neka svojstva koja će se koristiti kasnije.

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

Pokazuju svojstvo se koristi za prikaz editForm je vrijednost imovine se koristi za postavljanje vrijednosti za uređivanje naslova, dok id se koristi za dodjeljivanje ID-a trenutno uređuje stavke. To ćemo vidjeti kasnije.

Prije nego što krenemo u daljnju raspravu, dodajmo html predložak koji ćemo koristiti.

 Update 
 Add

    
    
     
  •  {{item.title}} Delete Edit Complete 
    •

Tu se može uočiti hrpa razlika. Prvo što je uočljivo je "edit-skočni prozor". To je * ngIf uvjetno direktiva koja pokazuje i skriva ovaj komad HTML kod se temelji na vrijednosti „show” koji je true ili false. To je svojstvo koje dolazi iz TodoComponenta koji smo ranije postavili.

Zatim jednostavno stavite vrijednost (naslov) pomoću zagrada {{}} unutar polja za unos teksta. Na kraju dodajte događaj klika koji će pozvati funkciju ažuriranja i proslijediti vrijednost polja za unos kao argument.

Zatim je popis ul koji prikazuje sve stavke. Kao što vidite, element li ima * ngFor, što je repetitorska direktiva . Petlja se kroz mockData i unutar nje pristupamo trenutnom objektu i prikazujemo njegov naslov.

Direktiva [ngClass] dodaje klasu done u stavku li na temelju vrijednosti učinka i svojstva stavke. Ako je istina, dodajte izvedenu klasu koja stavlja stavku -line na stavku li kako bi se naznačilo da je taj zadatak postignut.

Također ima svoje gumbe koji su gumbi Delete, Edit i Complete. I svaki od njih ima događaje klika koji pozivaju odgovarajuću funkciju i prosljeđuju ID trenutne stavke. U funkciji uređivanja uz id, naslov se također prenosi kao argument.

To je to za predložak. Vratimo se TodoComponentu. Ovdje nam ne treba nikakvu pružanje funkciju koju smo imali u vanilija JavaScript.The mockData listi i * ngFor Direktiva obaviti posao za renderiranje. Dakle, R dio CRUD-a je gotov. Pokrenite kutni poslužitelj pomoću "ng serve" i učitajte aplikaciju u svoj preglednik. Trebali biste imati slične rezultate kao u nastavku:

Stvorimo sada funkciju koja je C u CRUD-u.

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

Funkcija Stvaranje aktivira se kada se na gumb ADD klikne iz predloška. To je vrlo lako razumjeti i slijediti. Prvo pristupa nizu mockData pomoću ove ključne riječi i gura novi objekt s odgovarajućim svojstvima (poput id, naslova, gotovog i datuma itd.). Ovo će obaviti posao.

Osvježite svoj preglednik i upišite "Ovo je nova stavka" i pritisnite gumb DODAJ - dobit ćete rezultat sličan gore navedenom.

Sada nastavimo s funkcijom uklanjanja / brisanja koja je D dio CRUD-a.

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

Opet vrlo jednostavno. Filtrirajte kroz mockData i pronađite trenutni element pomoću id-a stavke koji se želi izbrisati i id trenutnog elementa iz mockData . I vratite sve stavke osim one koja odgovara ovom elementu.

Osvježite svoj preglednik i izbrišite prvu stavku s popisa. Trebalo bi ga izbrisati sa zaslona kako je navedeno u nastavku:

Za ažuriranje, to je isto kao primjer vanilije JavaScript: uređivanje je dio dva koraka. Prvo prikažite obrazac za uređivanje, a drugo ažurirajte stavku. Prvo pokažimo obrazac za uređivanje koji je "edit-skočni prozor":

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