Како изводити ЦРУД операције у Ангулар-у

Као што сте можда видели на мом претходном блогу, могуће је извршити ЦРУД операције у ванилин ЈаваСцрипт-у. Међутим, може бити тешка одлука одабрати ванилин ЈаваСцрипт, јер у неком тренутку постане неуреднији. Штавише, додавање слушалаца догађаја динамички доданим ДОМ елементима је мука, као што смо видели. То постаје још компликованије за велике пројекте.

Једно од решења је употреба модерних оквира као што су Ангулар, Реацт итд. Овај пост на блогу заснован је на истом концепту као и претходни пример, али користећи Ангулар.

Овај блог претпоставља да сте на свој рачунар већ инсталирали Ангулар-цли. Када га добијете, креирајте нову апликацију помоћу наредбе у наставку.

ng new ngTodo

Сачекајте неколико секунди када се пројекат креира, а затим цд у овај пројекат. Прво што нам треба је да креирамо нову компоненту помоћу наредбе у наставку.

ng generate component todo

Ово ће створити директоријум са именом тодо унутар директоријума срц / апп. Ова фасцикла се састоји од датотека тодо.цомпонент.тс, тодо.цомпонент.хтмл, тодо.цомпонент.цсс и тодо.цомпонент.спец.тс.

Сав ЈаваСцрипт биће написан у .тс датотеци. Заправо код ТипеСцрипт шаблона (зато је екстензија датотеке .тс) иде у датотеку тодо.цомпонент.хтмл, стилови у тодо.цомпонент.цсс, а тодо.цомпонент.спец.тс је за тестове.

Да бисте започели, прво што треба учинити је додати ову компоненту у датотеку „апп.цомпонент.хтмл“ овако:

Сада када покренете „нг серве“ и учитате апликацију у прегледач, компонента тодо ће бити учитана.

Сада је време да пређете на датотеку тодо.цомпонент.тс.

Требало би да постоји нека шифра узорка коју је написао ангулар-цли. Сав наш код иде унутар класе ТодоЦомпонент.

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

Хајде да прво објаснимо горњи код типа. Прво увозимо декоратер компонената и интерфејс ОнИнит из угловног језгра. Испод је дефиниција декоратора.

Декоратор означава класу као Ангулар компоненту и омогућава нам да поставимо метаподатке конфигурације који одређују како компонента треба да се обрађује, инстанцира и користи током извођења.

Док

Интерфејс је кука животног циклуса која се позива након што је Ангулар покренуо сва својства везана за податке директиве. Дефинишите ngOnInit()метод за руковање било којим додатним задацима иницијализације.

Затим извозимо класу ТодоЦомпонент како бисмо је учинили доступном за увоз у остатак пројекта. У овом примеру требат ће нам само да се ова компонента увезе у апп.модуле.тс да би покренула компоненту.

Пошто смо креирали ову компоненту користећи ангулар-цли, тај део је већ збринут. Ако погледате датотеку апп.модуле.тс , видећете да је класа ТодоЦомпонент увезена и додата у низ декларација. Хајде сада да додамо неки код.

Баш као и наш претходни пример, додајте својство моцкДата класи као доле.

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

Као што видите, додали смо и тип „било који“ у моцкДата . ТипеСцрипт доноси строго функционалност типа у ЈаваСцрипт, али у овом случају то заиста није важно. Ако из њега оставите тај део, и даље би требало да буде у реду.

Хајде да додамо још нека својства овој класи која ће се касније користити.

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

Емисија имовина се користи да покаже едитФорм је вредност имовине се користи за подешавање вредности за уређивање наслова, а ИД се користи за доделу ид од тренутно уређује ставке. То ћемо видети касније.

Пре него што пређемо на даљу дискусију, додајмо хтмл образац који ћемо користити.

 Update 
 Add

    
  • {{item.title}} Delete Edit Complete

Овде се може видети гомила разлика. Прва ствар која је приметна је „едит-попуп“. Има условну директиву * нгИф која приказује и скрива овај део ХТМЛ кода на основу вредности „схов“ која је тачна или нетачна. То је својство које долази од ТодоЦомпонента који смо раније подесили.

Затим једноставно ставите вредност (наслов) помоћу заграда {{}} у поље за унос текста. На крају додајте догађај клика који ће позвати функцију ажурирања и проследити вредност поља за унос као аргумент.

Затим је ул листа која приказује све ставке. Као што видите, елемент ли има * нгФор, што је репетиторска директива . Петља кроз моцкДата и унутар ње приступамо тренутном објекту и приказујемо његов наслов.

Директива [нгЦласс] додаје класу доне у ставку ли на основу вредности готовог и својства ставке. Ако је тачно, додајте завршену класу која ставља ставку линија на ставку ли да би се означило да је овај задатак постигнут.

Такође има дугмад која су дугмад Делете, Едит и Цомплете. И сваки од њих има догађаје кликова који позивају одговарајућу функцију и прослеђују ИД тренутне ставке. У функцији уређивања уз ид, наслов се такође преноси као аргумент.

То је то за шаблон. Вратимо се на ТодоЦомпонент. Овде нам не треба ниједна функција рендеровања коју смо имали у ванилин ЈаваСцрипт- у. Листа моцкДата и директива * нгФор раде посао приказивања. Дакле, Р део ЦРУД-а је завршен. Покрените угаони сервер користећи „нг серве“ и учитајте апликацију у прегледач. Требали бисте имати сличне резултате као доле:

Хајде сада да креирамо функцију која је Ц у ЦРУД-у.

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

Функција Цреате се покреће када се кликне на дугме АДД из шаблона. Ово је врло лако разумети и пратити. Прво приступа низу моцкДата користећи ову кључну реч и гура нови објекат са одговарајућим својствима (као што су ид, наслов, урађено и датум итд.). Ово ће обавити посао.

Refresh your browser and type “This is a new item” and press the ADD button — you’ll get a similar result to the above.

Now let’s continue to the remove/delete function which is the D 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() }); }
 // delete/remove function goes here. remove(id) { this.mockData = this.mockData.filter(item => { if (item.id !== id) { return item; } }); }
 ngOnInit() { }
}

Again very simple. Filter through mockData and find the current element using the item’s id that is to be deleted and the id of the current element from mockData. And return all the items except the one that matches this element.

Refresh your browser and delete the first item from the list. It should be deleted from the screen as below:

For update, again, it’s the same as the vanilla JavaScript example: edit is part of two steps. First show the edit form, and second update the item. First let’s show the edit form which is “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;}

Горњи ЦСС додаје пролаз у било који елемент који има класу доне, у овом случају задатке који су завршени.

Након овога притисните неколико тастера Цомплете и требало би да видите нешто слично овоме:

Разлику између овог примера и претходног можете видети помоћу ЈаваСцрипт-а ваниле. Ангулар нам омогућава да напишемо приступ који је лако разумети, одржавати и скалирати. Ово је корисно за велике примене. Ванилла ЈаваСцрипт обавља посао, али се заиста компликује када апликација расте.

Да бисте добили сав код написан у овом примеру, наставите и клонирајте доље спремиште.

//гитхуб.цом/зафар-салеем/нгТодо