Зафар Салема
Как вы, возможно, видели в моем Предыдущий блог , можно сделать операции CRUD в ванильном JavaScript. Тем не менее, это может быть трудное решение выбрать ванильный JavaScript, поскольку он становится Мессие в какой-то момент. Более того, добавление слушателей событий в динамически добавленные элементы DOM – это боль, как мы видели. Это становится еще более сложным для крупномасштабных проектов.
Одно решение состоит в том, чтобы использовать современные рамки, такие как угловые, реагирующие и так далее. Этот пост блога основан на той же концепции, что и предыдущий пример, но с использованием угловых.
Этот блог предполагает, что вы уже установили угловую CLI на своей машине. Как только у вас есть, то создайте новое приложение, используя команду ниже.
ng new ngTodo
Подождите несколько секунд после создания проекта, а затем CD в этот проект. Первое, что нам нужно, это создать новый компонент, используя команду ниже.
ng generate component todo
Это создаст папку с именем ToDo внутри папки SRC/APP. Эта папка состоит из todo.component.ts, todo.component.html, todo.component.css и todo.component.spec.ts файлов.
Все JavaScript будет написано в файле .ts. На самом деле код шаблона Typeyctry (именно поэтому расширение файла есть .ts) идет на файл todo.component.html, стили todo.component.css и todo.component.spec.ts – для испытаний.
Чтобы начать работу, первое, что нужно сделать, это добавить этот компонент внутри файла «app.component.html», как так:
Теперь, когда вы запустите «NG», и загрузите приложение в браузере, компонент Todo будет загружен.
Теперь пришло время отправиться на файл todo.component.ts.
Там должен быть какой-то код котельной, написанный Angular-CLI. Весь ваш код идет внутри класса компонентов 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() { }}
Сначала объясним вышеуказанный код котельной. Сначала мы импортируем компонентный декоратор и интерфейс OnInit от углового ядра. Ниже приведено определение декоратора.
В то время как
Затем мы экспортируем класс TodoComponent, чтобы сделать его доступным для импорта в остальной части проекта. Для этого примера нам понадобится только этот компонент, который будет импортироваться в app.module.ts инициировать компонент.
Поскольку мы создали этот компонент, используя угловые CLI, эта часть уже позаботится. Если вы посмотрите в app.module.ts Файл, вы увидите класс TOOComponent Imported и добавлен в массив деклараций. Давайте добавим какой-нибудь код сейчас.
Как и наш предыдущий пример, добавьте Mockdata свойство в класс, как ниже.
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() { }}
Как видите, мы также добавили тип «любой» на Mockdata Отказ Typeyctry вызывает строго введите функциональность для JavaScript, но в этом случае действительно не имеет значения. Если вы оставите эту часть от нее, это все равно все равно будет хорошо.
Добавим еще несколько свойств в этот класс, который будет использоваться позже.
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() { }}
Показать Свойство используется для отображения редактирования формы, ценность Свойство используется для установки значения заголовка редактирования, тогда как ID используется для назначения идентификатора редактированного в данный момент элемента. Мы увидим это позже.
Прежде чем идти в дальнейшее обсуждение, давайте добавим шаблон HTML, который мы собираемся использовать.
- {{item.title}}
Это где можно увидеть кучу различий. Первое, что заметно, – это «редактирование всплывающего окна». У этого есть * NGIF Условный Директива который показывает и скрывает этот кусок HTML-кода на основе значения «Show», который является истинным или ложным. Это свойство, которое происходит от тодокомпонента, которое мы настраиваем ранее.
Затем просто поместите значение (заголовок), используя скобки {{}} внутри поля входного текста. Наконец добавьте событие щелчка, которое будет вызывать функцию обновления и передавать значение поля ввода в качестве аргумента.
Тогда есть список UL, который показывает все элементы. Как видите, элемент Li имеет * NGFOR который является Директива ретранслятора . Это петли через Mockdata И внутри него мы получаем доступ к текущему объекту и отобразить его заголовок.
Директива [NGClass] добавляет выполненный класс к элементу Li на основе значения выполненного и свойства элемента. Если это правда, добавьте сделано класс, который ставит Линейный корыт на элементе Li, чтобы указать, что эта задача была достигнута.
Он также имеет свои кнопки, которые являются удалениями, редактированием и полными кнопками. И каждый из них имеет события, которые вызывают его соответствующую функцию и передайте идентификатор текущего элемента. В функции редактирования наряду с ID заголовок также передается как аргумент.
Так что это для шаблона. Давайте вернемся к тодокомпонентному. Здесь нам не нужна какая-либо функция Render, которую мы имели в ванильном JavaScript. Mockdata Список и * NGFOR директива Сделайте работу для рендеринга. Таким образом, R части CRUD делается. Запустите угловой сервер, используя «NG служить» и загрузите приложение в браузер. У вас должны быть похожие результаты, такие как ниже:
Давайте теперь создадим функцию, которая является C в 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() { }}
Функция создания срабатывает, когда Добавить Кнопка нажала с шаблона. Это очень легко понять и следовать. Во-первых, это доступ к Mockdata Массив, используя Это Ключевое слово и толкает новый объект с соответствующими свойствами (например, id, title, deft и date etc). Это сделает работу.
Обновите свой браузер и введите «Это новый элемент» и нажмите кнопку «Добавить» – вы получите аналогичный результат к вышесказанному.
Теперь давайте продолжим Удалить/удалить Функция, которая является D часть 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() { }}
Опять очень просто. Фильтр через Mockdata И найдите текущий элемент, используя идентификатор элемента, который должен быть удален и идентификатор текущего элемента из Mockdata . И вернуть все предметы, кроме той, которые соответствуют этому элементу.
Обновите свой браузер и удалите первый элемент из списка. Он должен быть удален с экрана, как показано ниже:
Для обновления, опять же, это так же, как пример ванильного JavaScript : edit – это часть двух шагов. Сначала покажите форму редактирования, а второе обновление элемента. Сначала давайте покажем форму редактирования, которая является «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() { }}
Вышеуказанная функция просто устанавливает некоторые Тодокомпонент Атрибуты – то есть набор Это .show true, что отображает форму. Установите значение this.value на заголовок элемента, который должен быть обновлен и установлен This.id до удостоверения личности предмета. Все эти атрибуты могут затем доступны в шаблоне, и мы можем использовать их соответственно.
Теперь нажмите кнопку редактирования для первого элемента, и вы сможете увидеть форму редактирования в верхней части страницы:
Теперь пришло время написать функцию обновления, которая фактически выполняет операции обновления – это U U-разрядный 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() { }}
Эта функция получает заголовок, то есть значение обновленного входного текстового поля в качестве аргумента. Затем карта через Mockdata И поместите чек, чтобы найти предмет, который необходимо обновить на основе его идентификатора. После найден, замените свойство титула с редактированным одно и установите Это .show до false, чтобы скрыть форму редактирования.
С этой частью, когда вы нажимаете кнопку Обновить, после ввода обновленного заголовка вы должны увидеть обновленный заголовок, как это:
Заключительная часть заключается в том, чтобы отметить задачу, как сделано, какая функция ниже.
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() { }}
Это делает в значительной степени то же самое: карта через Mockdata И найдите элемент, который будет установлен как сделано на основе идентификатора, и установите его выполненное свойство на TRUE.
Наконец, добавьте некоторые CSS в файле ToDo.comPonent.css ниже.
.done { text-decoration: line-through;}Вышеуказанные CSS добавляют линейку на любой элемент, который имеет класс «Готово», в данных задачах, которые завершены.
После этого нажмите пару полных кнопок, и вы должны увидеть что-то подобное:
Вы можете увидеть разницу между этим примером и предыдущим, использующим ванильный JavaScript. Угловой позволяет нам писать подход, который легко понять, поддерживать и масштабировать. Это выгодно в крупных приложениях. Ванильный JavaScript делает работу, но действительно усложняется, как только приложение растет.
Чтобы получить все код, написанный в этом примере, идите вперед и клонировать репозиторий ниже.
https://github.com/zafar-saleem/ngTodo
Оригинал: “https://www.freecodecamp.org/news/crud-operations-in-angular-536e1c03a715/”