Пример Angular 8 CRUD | Учебник по Angular 8 для начинающих

Angular 8 CRUD — это базовая операция для изучения Angular с нуля. Мы узнаем, как создать небольшое веб-приложение, которое вставляет, считывает данные, обновляет и удаляет данные из базы данных. Вы узнаете, как создать веб-приложение MEAN Stack. В этом учебном примере Angular 8 вы познакомитесь с новым фреймворком, создав приложение crud.

Новые возможности Angular 8

Вы вкратце ознакомитесь с новыми функциями в моем сообщении о новых возможностях Angular 8.

Я разработал это учебное пособие по Angular 8 CRUD специально для новичков, и оно поможет вам начать работу с последней версией Angular, которой сейчас 8.

Рабочий процесс примера Angular crud

Мы создадим два отдельных проекта. Один предназначен для Angular Frontend , а другой — для Node.js и Express . Это означает, что один для внешнего интерфейса и один для серверного интерфейса.

Мы создадим backend API, который занимается хранением, изменением и удалением значений формы и внешнего интерфейса будет использовать этот API; например, он показывает данные из серверной части.

В этом примере я использую следующие технические стеки с их версиями.

  1. Узел v11.3.0
  2. NPM v6.9.0
  3. AngularCLI v8.0.1
  4. Версия оболочки MongoDB
  5. Версия MongoDB v3.6.3
  6. Mac OS

В этом блоге у меня есть ранее написанные руководства по Angular 7 CRUD и Angular 6 CRUD. Теперь сообщество Angular выпустило следующую версию — Angular 8.

Если вы не знаете, как обновить Angular CLI до версии 8, то ознакомьтесь с моим руководством по обновлению Angular CLI 8. В этом руководстве по MEAN Stack мы увидим Angular Routing, Angular Forms, а на задней стороне мы используем Node.js и Express.js для обработки данных и для хранения данных, мы будем использовать MongoDB.

Пример Angular 8 CRUD

Если вы ищете руководство о том, как создать приложение crud в Angular 8 и приложение среднего стека, продолжайте эта почта. Этот пост представляет собой подробное руководство, в котором вы узнаете, как отправлять сетевые запросы на сервер узла, как обрабатывать ответ, как отображать данные во внешнем интерфейсе и т. Д. Сообщение длинное, но оставайтесь со мной, это будет чертовски весело.

Мы будем использовать Node. js в качестве платформы и Express.js, который представляет собой веб-фреймворк, созданный на основе Node.js, и MongoDB в качестве базы данных NoSQL.

Но вы узнаете больше о таких понятиях, как структура проекта, модули , внедрение зависимостей, сервис, компоненты, маршрутизация, HTTP-запросы и многое другое. Это похоже на то, что вы выучите почти половину фреймворка, выполняя этот проект.

В этом руководстве мы будем использовать Angular 8. Поэтому, если вы не уверены, какую версию Angular CLI вы используете, введите следующую команду, которая сообщит нам версию Angular CLI.

 ng --version 

Описание примера проекта Angular 8

Мы создадим демонстрационный проект, в котором пользователь сможет сохранить свои ProductName, Product Description и ProductPrice из формы Angular и отправить на сервер node.js.

Если значения неверны, тогда он будет проверен на веб-интерфейсе, и форма не будет отправлена.

Мы не будем проверять значения полей на бэкэнде, потому что это сделает это руководство более длинным. Если вы хотите создать проверку на бэкэнде, ознакомьтесь с моим руководством по проверке экспресс-формы.

Если все значения идеальны, тогда он отправит значения формы в Node.js backend API , и он будет хранить значения в базе данных MongoDB .

Наше руководство по Angular 8 CRUD будет очень длинным, поэтому, пожалуйста, Потерпите меня в этом долгом путешествии.

Шаг 1. Создайте проект Angular 8

Давайте создадим проект Angular 8, используя следующая команда.

При установке нового проекта Angular , просмотрите параметры, которые они предоставляют при создании нового проекта. В этом проекте нам нужен модуль маршрутизации, поэтому мы позволим Angular CLI создать модуль маршрутизации для нас.

Я использую Visual Studio Code в качестве редактора программирования для разработки приложения Angular.

Теперь войдите в папку и откройте проект внутри VSCode.

 cd angular8tutorialcode. 

Во время установки мы включили маршрутизацию для нашего углового приложения. Вы можете проверить файл с именем app-routing.module.ts в каталоге src >> app .

Затем установите Bootstrap 4 CSS Framework , используя следующую команду. Это необязательный шаг, и вы также можете выбрать свой CSS Framework.

 npm install bootstrap --save 

Теперь добавьте его внутри angular.json файл.

 "styles": ["src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css"  ], 

Он будет включать файл начальной загрузки CSS, и мы сможем использовать классы начальной загрузки внутри любого файла.

Запустите сервер разработки Angular, используя следующую команду.

 ng serve -o 

Сервер запускается с http://localhost: 4200/. Вы можете увидеть результат в браузере. Это начальный домашний экран Angular.

Шаг 2: Создание компонентов Angular

Выполните следующую команду, чтобы сгенерировать угловые компоненты .. Мы будем выполнять операции по созданию, чтению, обновлению. Итак, мы создадим три компонента.

 ng gc product-add --skipTests = trueng gc product-get --skipTests = trueng gc product-edit --skipTests = true 
Опция «spec» устарела в Angular 8: используйте вместо нее «skipTests».
Для этой демонстрации нам не нужен файл тестов. Поэтому мы не будем его создавать.
Все три компонента автоматически регистрируются внутри файла app.module.ts . Теперь нам нужно настроить маршрутизацию компонентов angular внутри файла app-routing.module.ts .

Теперь , вы можете увидеть файл app-routing.module.ts внутри файла src >> app folder . Он создан потому, что пока мы устанавливали приложение angular, мы разрешили angular cli сгенерировать для нас файл маршрутизации.

Все три компонента автоматически регистрируются внутри модуля app.module .ts . Теперь нам нужно импортировать и настроить маршрутизацию компонентов angular внутри файла app-routing.module.ts .

Напишите следующий код внутри файл app-routing.module.ts .

//app-routing.module.tsimport {NgModule} из '@ angular/core'; import {Routes, RouterModule  } из '@ angular/router'; импортировать {ProductAddComponent} из './product-add/product-add.component';import {ProductEditComponent} из' ./product-edit/product-edit.component';import {ProductGetComponent  } из './product-get/product-get.component';const routes: Routes = [{path:' product/create ', component: ProductAddComponent}, {path:' edit/: id ', component: ProductEditComponent}  , {путь: 'продукты', компонент: ProductGetComponent}]; @ NgModule ({импорт: [RouterModule.forRoot (routes)], экспорт: [RouterModule]}) класс экспорта AppRoutingModule {} 

Теперь вы можете увидеть внутри файла app.component.html , что директива есть. Эта директива помогает нам отображать различные компоненты на основе URI маршрута.

Шаг 3. Создание маршрутизации Angular 8

Напишите следующий код внутри файла app.component.html .

  

Сохраните файл, перейдите в браузер и щелкните две ссылки. Вы можете видеть, что мы можем видеть различные компоненты на основе навигации.

Шаг 4. Настройте индикатор выполнения маршрутизации Angular.

Введите следующую команду, чтобы установить ng2-slim-loading-bar library.

 npm install ng2-slim-loading-bar --save 

Итак, если вы установите сторонние пакеты прямо сейчас, тогда он несовместима с Angular 8 . Если мы хотим преодолеть разрыв между Angular 8 и сторонними пакетами, нам необходимо установить следующую библиотеку. Вот и все.

 npm install rxjs-compat --save 

Теперь импортируйте SlimLoadingBarModule внутри файл app.module.ts .

//app.module.tsimport {SlimLoadingBarModule} из 'ng2-slim-loading-bar'; импорт: [... SlimLoadingBarModule]  , 

Следующим шагом является включение стиля, поставляемого с библиотекой, в файл src >> styles.css .

  @import "../node_modules/ng2-slim-loading-bar/style.css"; 

Шаг 5. Добавьте события маршрутизатора Angular.

Angular RouterModule предоставляет нам следующие модули событий.

  1. NavigationStart
  2. NavigationEnd
  3. NavigationError
  4. NavigationCancel
  5. Router
  6. Event

Теперь напишите следующий код внутри файл app.component.ts .

//app.component.tsimport {Component} from '@ angular/core'; import {SlimLoadingBarService} from '  ng2-slim-loading-bar '; импорт  {NavigationCancel, Event, NavigationEnd, NavigationError, NavigationStart, Router} из '@ angular/router'; @ Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['. /app.component.css'pting})export class AppComponent {title = 'angular8tutorial';  конструктор (частная панель загрузки: SlimLoadingBarService, частный маршрутизатор: Маршрутизатор) {this.router.events.subscribe ((событие: событие) => {this.navigationInterceptor (событие);});  } private navigationInterceptor (событие: событие): void {if (event instanceof NavigationStart) {this.loadingBar. Начало();  } если (событие instanceof NavigationEnd) {this.loadingBar.complete ();  } если (событие instanceof NavigationCancel) {this.loadingBar.stop ();  } если (событие instanceof NavigationError) {this.loadingBar.stop ();  }}} 

В приведенном выше коде мы сказали приложению Angular 8, что при переходе от одного компонента к другому мы хотим отображать индикатор выполнения маршрутизатора.

Когда пользователь щелкает другой маршрут, начинает отображаться угловой индикатор прогресса, а после завершения навигации он перестает отображаться. Таким образом, это своего рода лучший пользовательский интерфейс для пользователя.

Что он делает в коде, так это то, что он перехватывает событие маршрутизации и добавляет компонент полосы загрузки в маршрут загрузки, чтобы мы могли видеть индикацию маршрутизации каждый раз, когда мы меняем маршруты.

Последнее изменение заключается в отображении индикатора маршрутизации: нам нужно вставить ng2-slim-loading-bar внутри файла app.component.html вверху страницы.

     

Sa запустите файл и перейдите в терминал, чтобы увидеть, есть ли ошибка, и если ошибки нет, перейдите в браузер и измените маршруты, и вы увидите, что теперь мы можем видеть индикатор маршрутизации при изменении различных угловых маршрутов .

Шаг 6. Добавьте bootstrap 4 в HTML-форму

Внутри product-add .component.html , добавьте следующую форму bootstrap 4 . У нас есть три поля HTML для этой демонстрации.

  

Шаг 7. Создайте проверку формы Angular 8

Для проверки формы у нас есть два варианта. Модуль шаблонных и реактивных форм. Мы будем использовать подход ReactiveFormsModule . Теперь, если вы новичок в Проверка угловой формы , то, пожалуйста, ознакомьтесь с моей статьей Пример проверки угловой формы в этом блоге.

Теперь импортируйте ReactiveFormsModule внутри файла app.module.ts . По умолчанию он поставляется с проектом Angular.

//app.module.tsimport {ReactiveFormsModule} из '@ angular/forms'; импорт: [... ReactiveFormsModule], 

Теперь нам нужно написать код для файла app.component.ts . Помните, что это не форма, управляемая шаблоном. Поэтому нам нужно добавить код в файл app.component.ts .

Сначала мы импортируем FormGroup, FormBuilder, Validators модули из @ angular/forms .

Кроме того, создайте конструктор и создайте экземпляр FormBuilder .

Итак, напишите следующий код внутри файла product-add.component.ts .

//product-add.component.tsimport {  Component, OnInit} из '@ angular/core'; импортировать {FormGroup, FormBuilder, Validators} из '@ angular/forms'; @ Component ({selector: 'app-product-add', templateUrl: './product-add  .component.html ', styleUrls: [' ./product-add.component.css'pting})export class ProductAddComponent реализует OnInit {angForm: FormGroup;  конструктор (частный fb: FormBuilder) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({ProductName: ['', Validators.required], ProductDescription: ['', Validators.required], ProductPrice: ['', Validators.required]})  ;  } ngOnInit () {}} 

Мы использовали конструктор форм для обработки всей проверки. Итак, в этом конструкторе мы создаем форму со всеми правилами проверки для определенных полей. В нашем примере есть три поля.

Если введенный текст пуст, то будет выдана ошибка, и нам нужно отобразить эту ошибку.

Теперь напишите следующий код внутри product-add.component.html .

  
Укажите название продукта.
Требуется описание продукта.
Требуется цена продукта.

Сохраните файл и перейдите в браузер, и вы увидите, не поместили ли вы внутри какое-либо значение поле ввода, то вы увидите ошибки.

Шаг 8. Добавьте и настройте HttpClientModule

Большинство интерфейсных приложений взаимодействуют с серверными службами через Протокол HTTP. Современные браузеры поддерживают два разных API для выполнения HTTP-запросов: интерфейс XMLHttpRequest и API fetch .

HttpClient в @ angular/common/http предлагает упрощенный клиентский HTTP API для приложений Angular, основанный на XMLHttpRequest интерфейс, предоставляемый браузерами.

Дополнительные преимущества HttpClient включают возможности тестирования, типизированные объекты запросов и ответов, перехват запросов и ответов, Observables и плавная обработка ошибок.

Импортируйте HttpClientModule внутри файла app.module.ts .

//app.module.tsimport {HttpClientModule} из '@ angular/common/http'; импорт: [... HttpCli  entModule], 

Шаг 9. Создайте файл модели машинописного текста.

Внутри приложения src >> , создайте один файл с именем Product.ts и добавьте следующий код.

//Product.tsexport класс по умолчанию Product {ProductName: string;  Описание продукта: строка;  ProductPrice: number;} 

Шаг 10: Создайте файл службы Angular.

Введите следующую команду для создания файла службы.

Основное использование служебного файла состоит в том, что мы добавляем весь наш код AJAX внутрь этого файла. Итак, он отправляет запрос ajax на внутренний сервер и получает данные с внутреннего сервера.

 ng g service products --skipTests = true 

Итак, ваш необходимый файл products.service.ts выглядит следующим образом.

//products.service.tsimport {Injectable} from '@ angular/core'; @ Injectable (  {providedIn: 'root'}) класс экспорта ProductsService {constructor () {}} 

Теперь импортируйте файл products.service.ts в файл app.module.ts .

//app.module.tsimport {ProductsService} из './products.service';providers: [ProductsService], 

Шаг 11: Отправьте значения формы на сервер узла

Теперь нам нужно написать код, который будет отправлять HTTP POST-запрос с данными к серверу Node.js и сохранение данных в базе данных MongoDB .

Напишите следующий код внутри products.service.ts f ile.

//products.service. tsimport {Injectable} из '@ angular/core'; импорт {HttpClient} из '@ angular/common/http'; @ Injectable ({providedIn: 'root'}) экспортный класс ProductsService {uri = 'http://localhost:  4000/товары ';  конструктор (частный http: HttpClient) {} addProduct (ProductName, ProductDescription, ProductPrice) {const obj = {ProductName, ProductDescription, ProductPrice};  console.log (объект);  this.http.post (`$ {this.uri}/add`, obj) .subscribe (res => console.log ('Done'));  }} 

Мы определили URL-адрес нашего серверного API, но мы еще не создали никакого внутреннего интерфейса, но сделаем это в следующих двух шагах.

Теперь , нам нужно добавить событие щелчка к кнопке «Добавить продукт». Поэтому добавьте следующий код в файл product-add.component.html .

 

Итак, когда ошибок нет, мы можем отправить форму, и она вызовет функцию компонента addPropduct . Оттуда мы вызовем службу angular, и служба отправит запрос HTTP Post на сервер Node.js .

Теперь добавьте функцию addProduct в файл product-add.component.ts . Поэтому напишите следующий код внутри файла product-add.component.ts .

//product-add.component.tsimport {Component, OnInit} from '  @ angular/core '; импортировать {FormGroup, FormBuilder, Validators} из' @ angular/forms '; импортировать {ProductsService} из' ../products.service '; @ Component ({selector:' app-product-add ',  templateUrl: './product-add.component.html', styleUrls: ['./product-add.component.css'ght})export class ProductAddComponent реализует OnInit {angForm: FormGroup;  конструктор (частный fb: FormBuilder, частный ps: ProductsService) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({ProductName: ['', Validators.required], ProductDescription: ['', Validators.required], ProductPrice: ['', Validators.required]})  ;  } addProduct (ProductName, ProductDescription, ProductPrice) {this.ps.addProduct (ProductName, ProductDescription, ProductPrice);  } ngOnInit () {}} 

Сначала в приведенном выше коде я импортировал файл products.service.ts . Затем мы определили метод addProduct .

Этот метод вызывается, когда пользователь нажимает кнопку create product , и поток переходит сюда. Мы получаем данные ProductName, ProductDescription и ProductPrice внутри функции addProduct ..

Внутри этой функции мы вызываем функцию addProduct файла products.service.ts и передаем вместе с ней три параметра.

Итак, из файла products.service.ts вызовет API и сохранит продукты на сервере. Теперь нам нужно настроить серверный API.

До сих пор мы достигли половины этого примера Angular 8 CRUD.

В следующей половине мы будем поговорим о Node, Express, MongoDB, API и т. д., потому что это руководство представляет собой пример полного стека Angular 8 CRUD.

Шаг 12: Создайте серверный API в Node

Внутри корневой папки angular создайте одну папку с именем API и войдите в эту папку. Помните, что это будет полностью отдельный проект от проекта внешнего интерфейса Angular.

Таким образом, его папки node_modules отличаются от проекта Angular .

Откройте терминал внутри папки API и введите следующую команду. Он сгенерирует файл package.json с помощью NPM. Мы не хотим указывать каждую опцию по отдельности; поэтому мы набираем следующую команду.

 npm init -y 

Установите следующие модули для конкретных узлов.

 npm  install express body-parser cors mongoose --save 

Я не хочу каждый раз перезапускать сервер узла; Меняю файл. Итак, я устанавливаю сервер nodemon . Что он делает, так это то, что когда я изменяю файл server.js , он автоматически перезапускает сервер node.js .

 npm install nodemon --save-dev 

Мы также устанавливаем модуль body-parser для анализа данных из входящего запроса Http.

Мы установили модуль CORS, потому что наши приложения angular и node работают на разных портах.

Браузер не допускает атаки CROSS REQUEST ORIGIN ; вот почему нам необходимо установить модуль CORS, чтобы получить правильный запрос на внутреннем сервере.

Мы установили модуль Mongoose, потому что он предоставляет ORM для базы данных MongoDB.

Теперь внутри папки API создайте один файл с именем server.js . Добавьте в этот файл следующий код.

//server.jsconst express = require ('express'), path = require ('path'), bodyParser = require ('body-parser')  , cors = require ('cors'), mongoose = require ('mongoose');  константное приложение = экспресс ();  let port = process.env.PORT ||  4000;  const server = app.listen (function () {console.log ('Прослушивание порта' + порт);}); 

Следующим шагом является подключение базы данных MongoDB к нашему экспресс-приложению node. .

Если вы не установили базу данных MongoDB, установите ее, а затем запустите сервер MongoDB, используя следующую команду.

 mongod 

Итак, теперь я подключился к базе данных.

Создайте один файл с именем DB.. js внутри корневой папки проекта api . Напишите следующий код внутри файла DB.js .

//DB.jsmodule.exports = {DB: 'mongodb://localhost: 27017/ng8crud  '}; 

Импортируйте этот файл DB.js в наш файл server.js и используйте Библиотека Mongoose для установки подключения к базе данных с MongoDB . Мы также можем использовать Mongoose для сохранения данных в базе данных с помощью Mongoose ORM.

Напишите следующий код внутри файла server.js для подключения нашего MongoDB на сервер Node.js .

//server.jsconst express = require ('express'), path  = require ('путь'), bodyParser = require ('body-parser'), cors = require ('cors'), mongoose = require ('mongoose'), config = require ('./DB');  mongoose.Promise = global.Promise;  mongoose.connect (config.DB, {useNewUrlParser: true}). then (() => {console.log ('База данных подключена')}, err => {console.log ('Невозможно подключиться к базе данных'  + err)});  константное приложение = экспресс ();  app.use (bodyParser.json ());  app.use (cors ());  const port = process.env.PORT ||  4000;  const server = app.listen (порт, функция () {console.log ('Прослушивание порта' + порт);}); 

Сохраните указанный выше server.js файл, перейдите в терминал и запустите сервер узла с помощью следующей команды. Помните, мы используем nodemon.

 nodemon server 

Итак, прямо сейчас у вас работает три сервера.

  1. Сервер разработки Angular для внешнего интерфейса.
  2. Сервер Nodemon для внутреннего интерфейса.
  3. Сервер MongoDB для базы данных.

Помните, что все три сервера работают нормально, без ошибок; в противном случае наше приложение не будет работать и произойдет сбой.

Шаг 13: Создайте файлы маршрута и модели.

Теперь нам нужно создать две папки внутри api root папки с именем routes И модели .

В папке models ‘ создайте одну модель под названием Product.js (‘mongoose’); const Schema = mongoose.Schema;//Определение коллекции и схемы для Productlet Product = новая схема ({ProductName: {type: String}, ProductDescription: {type: String}, ProductPrice: {type: Number}}, {collection: ‘Product’}); module.exports = mongoose.model (‘ Product ‘, Product);

Итак, мы определили нашу схему для коллекции Product. У нас есть три поля: ProductName, ProductDescription, ProductPrice.

В папке routes создайте один файл с именем product.route.js.

Напишите код CRUD внутри product.route. js .

//product.route.jsconst express = require ('express'); const app = express (); const productRoutes = express.Router ();// Требовать модель продукта в нашем модуле маршрутовlet Product = require ('../models/Product');//Определенный маршрут магазинаproductRoutes.route ('/add'). Post (function (req, res) {let product = new Product (  req.body); product.save () .then (product => {res.status (200) .json ({'Product': 'Продукт был успешно добавлен'});}) .catch (err => {  res.status (400) .send ("невозможно сохранить в базу данных");});});//Определено получение данных (индекс или листинг) routeproductRoutes.route ('/'). get (function (req, res  ) {Product.find (function (err, products) {if (err) {console.log (err);} else {res.json (products);}});});//Заданное редактирование routeproductRoutes.route (  '/edit/:id').get(function (req, res) {let id = req.params.id; Product.findById (id, function (err, product) {res.json (product);});  });//Определенный маршрут обновления productRoutes.route ('/update/: id'). Post (function (req,  res) {Product.findById (req.params.id, function (err, product) {if (! product) res.status (404) .send («Запись не найдена»);  иначе {product.ProductName = req.body.ProductName;  product.ProductDescription = req.body.ProductDescription;  product.ProductPrice = req.body.ProductPrice;  product.save (). then (product => {res.json ('Обновление завершено');}) .catch (err => {res.status (400) .send ("невозможно обновить базу данных");}  );  }});});//Определенное удаление |  удалить |  уничтожить routeproductRoutes.route ('/delete/: id'). get (function (req, res) {Product.findByIdAndRemove ({_ id: req.params.id}, function (err, product) {if (err) res.  json (err); else res.json ('Успешно удалено');});}); module.exports = productRoutes; 

Здесь мы использовали модель мангуста для сохранения, обновления, удалить данные из базы данных. Mongoose — это ORM , используемый в базе данных MongoDB . Он будет обрабатывать всю задачу CRUD на бэкэнде. Теперь у нас есть все функции операций CRUD, настроенные для файла маршрута. И последнее: нам нужно импортировать внутри файла server.js .

Помните, что файл server.js является отправной точкой нашего приложения внутреннего узла. Таким образом, каждый модуль должен быть включен в файл server.js .

Итак, наш последний файл server.js выглядит вот так.

//server.jsconst express = require ('express'), path = require ('path'), bodyParser = require ('body-parser'), cors = require (  'cors'), mongoose = require ('mongoose'), config = require ('./DB');  const productRoute = require ('./routes/product.route');  mongoose.Promise = global.Promise;  mongoose.connect (config.DB, {useNewUrlParser: true}). then (() => {console. log ('База данных подключена')}, err => {console.log ('Невозможно подключиться к базе данных' + err)});  константное приложение = экспресс ();  app.use (bodyParser.json ());  app.use (cors ());  app.use ('/products', productRoute);  const port = process.env.PORT ||  4000;  const server = app.listen (порт, функция () {console.log ('Прослушивание порта' + порт);}); 

Теперь перейдите в терминал и запустите сервер узла, если вы еще не начали.

# Шаг 14: Сохранение данных в базе данных MongoDB

Если все ваши серверы запущены и работают, вы можете перейти в браузер, заполнить данные формы и добавить Продукт. В случае успеха вы можете увидеть что-то подобное на своем экране.

Иногда, если вы запускаете блокировщик рекламы в браузере, он не работает. Поэтому отключите блокировщик рекламы и попробуйте этот пример еще раз.

Теперь мы можем проверить базу данных с помощью следующих команд.

Сначала откройте оболочку mongo на 4-й вкладке, потому что все остальные три вкладки в данный момент заняты.

 mongo 

Здесь мы видим, что значения хранятся в базе данных MongoDB. Да !! У нас это получилось.

Теперь оставшиеся операции — это чтение, обновление и удаление.

# Шаг 15: Показать данные в Angular Frontend

Мы можем перебирать данные серверной части и отображать данные в табличном формате с помощью директивы Angular ngfor.

Внутри product-get .component.html напишите следующий код.

  

Удалить

Название продукта Описание продукта Цена продукта Действия
{{product.ProductName}} {{product.ProductDescription}} { {product.ProductPrice}} Изменить

Сейчас внутри файла products .service.ts , нам необходимо d, чтобы написать функцию, которая извлекает данные о продукте из базы данных MongoDB и отображает их в приложении Angular .

//products.service.tsgetProducts () {вернуть этот .http .get (`$ {this.uri}`);  } 

В приведенной выше функции getProducts () мы отправили HTTP-запрос GET на узел.. js и получить данные из базы данных.

Теперь нам нужно включить файл products.service.ts и Product.ts внутри файла product-get .component.ts .

Напишите следующий код внутри файл product-get.component.ts .

//product-get.component.tsimport {Component, OnInit} from '@ angular/core'; import Product  from '../Product';import {ProductsService} from' ../products.service '; @ Component ({selector:' app-product-get ', templateUrl:' ./product-get.component.html ',  styleUrls: ['./product-get.component.css'pting})export class ProductGetComponent реализует OnInit {products: Product [];  конструктор (частный ps: ProductsService) {} ngOnInit () {this.ps .getProducts () .subscribe ((data: Product []) => {this.products = data;});  }} 

Сохраните файл, перейдите в браузер и переключитесь на этот URL: http://localhost: 4200/products. Вы можете увидеть список продуктов.

# Шаг 16: Изменить и обновить поля

Хорошо, сначала нам нужно получить данные из MongoDB базу данных, используя _id , и отобразите эти данные в файле product-edit .component.html .

Для этого при загрузке product-edit.component.html мы отправляем запрос AJAX на сервер узла и выбираем конкретную строку, используя _id и отобразите данные в соответствующих полях внутри HTML-формы.

Итак, сначала напишите следующий код внутри product-edit .component.ts файл.

//product-edit.component.tsimport {Component, OnInit} from '@ angular/core  '; импортировать {FormGroup, FormBuilder, Validators} из' @ angular/forms '; импортировать {ActivatedRoute, Router} из' @ angular/router '; импортировать {ProductsService  } из '../products.service'; @ Component ({selector: 'app-product-edit', templateUrl: './product-edit.component.html', styleUrls: ['./product-edit.component  .css ']}) класс экспорта ProductEditComponent реализует OnInit {angForm: FormGroup;  product: any = {};  конструктор (частный маршрут: ActivatedRoute, частный маршрутизатор: Router, частный ps: ProductsService, частный fb: FormBuilder) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({ProductName: ['', Validators.required], ProductDescription: ['', Validators.required], ProductPrice: ['', Validators.required]})  ;  } ngOnInit () {this.route.params.subscribe (params => {this.ps.editProduct (params ['id']). subscribe (res => {this.product = res;});});  }} 

Здесь, когда компонент product-edit. ts render, он вызовет метод ngOnInit , отправит HTTP-запрос на сервер узла и получит данные из _id для отображения внутри файл компонента редактирования продукта .html .

Теперь внутри products.service.ts , нам нужно закодировать функцию editProduct для отправки HTTP-запроса.

//products.service.tsimport {Injectable} from '@  angular/core '; импорт {HttpClient} из' @ angular/common/http '; @ Injectable ({providedIn:' root '}) экспортный класс ProductsService {uri =' http://localhost: 4000/products ';  конструктор (частный http: HttpClient) {} addProduct (ProductName, ProductDescription, ProductPrice) {console.log (ProductName, ProductDescription, ProductPrice);  const obj = {ProductName, ProductDescription, ProductPrice};  this.http.post (`$ {this.uri}/add`, obj) .subscribe (res => console.log ('Done'));  } getProducts () {вернуть этот .http .get (`$ {this.uri}`);  } editProduct (id) {вернуть этот .http .get (`$ {this.uri}/edit/$ {id}`);  }} 

Теперь, наконец, нам нужно написать форму внутри файла product-edit.component.html .

   
Необходимо указать название продукта.
Требуется описание продукта.
Требуется цена продукта.

Сохраните файл и перейдите в страницу со списком и нажмите кнопку редактирования, и вы увидите заполненные поля формы из базы данных.

Вы также можете увидеть предупреждение, подобное приведенному ниже. Игнорируйте это демонстрационное руководство.

forms.js: 1193
Похоже, вы используете ngModel в том же поле формы, что и formControlName.
Поддержка использования ngModel свойство input и событие ngModelChange с
директивами реактивной формы устарели в Angular v6 и будут удалены
в Angular v7.
Теперь нам нужно обновить данные в базу данных.
Внутри файла products.service.ts нам нужно написать функцию, обновляющую форму данные полей. См. Следующий код.
//products.service.tsupdateProduct (ProductName, ProductDescription, ProductPrice, id) {const obj = {ProductName  , ProductDescription, ProductPrice};  this .http .post (`$ {this.uri}/update/$ {id}`, obj) .subscribe (res => console.log ('Done'));} 

Хорошо, теперь напишите функцию updateProduct () внутри файла product-edit.component.ts .

//product-  edit.component.tsupdateProduct (ProductName, ProductDescription, ProductPrice, id) {this.route.params.subscribe (params => {this.ps.updateProduct (ProductName, ProductDescription, ProductPrice, params.id); this.router.navigate (  ['продукты']); });  } 

В приведенной выше функции мы получаем значения формы из HTML-форм и отправляем запрос PUT на сервер узла с обновленными значениями, а в бэкэнде функция обновления вызовет и обновит значения в базе данных MongoDB.

Сохраните файл, и вы сможете обновить данные.

# Шаг 17: Удалите данные формы.

Итак, если вы не обнаружите ошибки в консоли, вы можете успешно обновить данные формы..

Я уже написал edit и update service для выполнения вызовов API. Итак, до сих пор мы выполнили задачу Create, Read, Update из этого Учебника Angular 8 с примером CRUD. Теперь взгляните на Удалить или удалить данные из базы данных.

Теперь нам нужно определить событие щелчка для кнопки удаления внутри product-get.component.html файл.

     {{product.ProductName}}   {{product.ProductDescription}}   {{product.ProductPrice}}     Изменить     Удалить    

Теперь напишите внутри функцию deleteProduct файл product-get .component.ts .

//product-get.component.tsdeleteProduct (id) {  this.ps.deleteProduct (идентификатор) .s  убрать (res => {this.products.splice (id, 1);  });} 

Вышеупомянутая функция отправит идентификатор на сервер для удаления строки из базы данных, а во внешнем интерфейсе мы используем функцию Javascript Splice для удаления данных из Angular приложение.

Теперь создайте функцию deleteProduct () внутри файла product.service.ts . Мы отправим идентификатор в этом запросе AJAx для удаления данных из серверной части.

//products.service.tsdeleteProduct (id) {return this .http .get (`$ {this.uri  }/delete/$ {id} `);  } 

Наконец, я завершил удаление данных или функциональность удаления данных.

Итак, в этом руководстве мы завершили функциональность CRUD в Angular 8. Я также поместил код в Github .

Если у вас есть какие-либо сомнения в этом Учебнике по Angular 8 с CRUD Пример, затем спросите в комментарии ниже. Если бы я был занят, то некоторые обязательно вам ответят.

КОД GITHUB

Рекомендуемые сообщения

Учебное пособие по загрузке файлов Angular 8

Пример Angular 8 HttpClient

Обновления и сводка Angular 8

Как обновить интерфейс командной строки Angular до Версия 8

Учебник по Angular 8 Forms

Учебник по Angular NgFor с примером

Пример Angular NgStyle

Учебник Angular Modal с примером

Пример Angular NgClass

Учебник Angular Drag and Drop

Оцените статью
nanomode.ru
Добавить комментарий