Учебное пособие по Angular 9: как создать пример CRUD на Angular 9

Angular 9 предоставляет основу для создания полнофункциональных клиентских веб-приложений со специализацией в привязке данных. Angular имеет компонентную архитектуру, вдохновленную веб-компонентами. Все в Angular — это небольшой компонент. Таким образом, angular становится все более и более модульным, что упрощает работу с крупными приложениями корпоративного уровня. С помощью Angular вы даже можете создавать собственные приложения, одностраничные приложения, используя его модуль маршрутизации.

Содержание
  1. Учебник по Angular 9
  2. Преимущества TypeScript
  3. Angular 9 Архитектура
  4. Angular 9 Directives
  5. Привязка данных Angular 9
  6. Angular 9 Dependency Injection
  7. Angular 9 Services
  8. Angular 9 Routing
  9. Angular 9 HttpClient
  10. Новые возможности Angular 9
  11. Ivy по умолчанию
  12. Поддержка ModuleWithProviders
  13. Изменения внедрения зависимостей в Core
  14. Обновления Service Worker
  15. Улучшения Angular i18n
  16. Обложка в Angular 9 CRUD Tutorial with Example
  17. Учебный процесс по Angular 9
  18. Пример Angular 9 CRUD
  19. Шаг 1. Настройка Angular CLI v9
  20. Шаг 2. Инициализация нового проекта Angular 9 CRUD
  21. Шаг 3. Установите Bootstrap 4 CSS Framework
  22. Шаг 4: Создание компонентов Angular
  23. Шаг 5: Создайте маршрутизацию Angular 9
  24. Шаг 6. Настройте индикатор выполнения угловой маршрутизации.
  25. Шаг 7. Добавьте события маршрутизатора Angular.
  26. Шаг 8: Добавьте HTML-форму Bootstrap 4
  27. Шаг 9. Создайте проверку формы Angular 9
  28. Шаг 10. Добавьте и настройте HttpClientModule
  29. Шаг 11. Создайте файл модели TypeScript.
  30. Шаг 12: Создайте служебный файл Angular 9
  31. Шаг 13: Отправьте значения формы на узел сервер
  32. Шаг 14. Создайте серверный API в Внутри корневой папки angular создайте папку с именем API и войдите в эту папку. Помните, что это будет совершенно отдельный проект от проекта внешнего интерфейса Angular. Таким образом, его папка node_modules отличается от проекта Angular. Откройте терминал в каталоге API и нажмите следующую команду. Он сгенерирует файл package.json с помощью NPM. Я не хочу указывать каждую опцию по отдельности; поэтому мы вводим следующую команду с флагом -y. npm init -y Установите следующие модули для конкретных узлов. npm install express body-parser cors mongoose --save Если вы не хотите перезапускать сервер узлов каждый раз, вы можете установить сервер nodemon . Что он делает, так это то, что когда я изменяю файл server.js, он автоматически перезапускает сервер node.js. npm install nodemon --save-dev Мы также устанавливаем модуль парсера тела для анализа данных из входящего запроса Http. Мы установили модуль CORS, потому что наши приложения angular и node работают на разных портах. Браузер не допускает атаки CROSS REQUEST ORIGIN; вот почему нам нужно установить модуль CORS, чтобы получать правильный запрос на внутреннем сервере. Мы установили модуль Mongoose, потому что он предоставляет ORM для базы данных MongoDB.. Теперь внутри папки API создайте файл с именем server.js file. Добавьте в этот файл следующий код. //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 (порт, функция () {console.log ('Прослушивание порта' + порт);}); Следующим шагом является подключение базы данных MongoDB к нашему узлу express. Если вы ранее не устанавливали базу данных MongoDB на машине, установите ее и затем запустите сервер MongoDB, используя следующую команду. mongod Итак, теперь я подключился к базе данных. Создайте файл с именем DB.js внутри API. Папка проекта. Напишите следующий код внутри файла DB.js. //DB.jsmodule.exports = {DB: ' mongodb://localhost: 27017/ng9crud '}; Импортировать файл 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, {useUnifiedTopology: true, useNewUrlParser: true}). Then (() => {console.log ('База данных подключена')}, err => {console. log ('Не удается подключиться к базе данных' + err)}); const app = express (); app.use (bodyParser.json ()); app.use (cors ()); const port = process.env. ПОРТ || 4000; const server = app.listen (порт, функция () {console.log ('Прослушивание порта' + порт);}); Сохраните указанный выше сервер . js и запустите сервер nodemon. nodemon server Итак, прямо сейчас у вас есть три сервера, работающих на наших компьютерах. Angular Development Server. Сервер Nodemon. Сервер MongoDB. Помните, все три сервера работают нормально, без ошибок; в противном случае наше приложение не будет работать. Шаг 15: Создайте файлы маршрута и модели. Следующий шаг, мы необходимо создать две папки внутри API папки с названиями routes и models. В папке с моделями создайте одну модель под названием //Member.jsconst mongoose = require ('mongoose'); const Schema = mongoose.Schema;//Определение коллекции и схемы для Memberlet Member = new Schema ({MemberName: {type: String}, MemberBio: {type: String} , MemberAge: {type: Number}}, {collection: 'Member'}); module.exports = mongoose.model ('Member', Member); Итак, мы определили нашу схему для коллекции Member. У нас есть три поля: MemberName, MemberBio, MemberAge. В папке routes создайте один файл с именем member.route.js. Напишите код CRUD внутри файла member.route.js. //member.route.jsconst express = require ('express'); const app = express (); const memberRoutes = express.Router ();//Требовать модель Member в нашем модуле маршрутовlet Member = require ('. ./models/Member');//Определенный маршрут магазинаmemberRoutes.route ('/add'). post (function (req, res) {let member = new Member (req.body); member.save () .then ( member => {res.status (200) .json ({'Member': 'Участник был успешно добавлен'});}) .catch (err => {res.status (400) .send ("невозможно сохранить в базу данных ");});});//Определено получение данных (индекс или листинг) routememberRoutes.route ('/'). get (function (req, res) {Member.find (function (err, members) { if (err) {console.log (err);} else {res.json (members);}});});//Определено отредактируйте routememberRoutes.route ('/edit/: id'). get (function (req, res) {let id = req.params.id; Member.findById (id, function (err, member) {res.json (member);});});//Определенный маршрут обновленияmemberRoutes.route ('/update/: id'). Post (function (req, res ) {Member.findById (req.params.id, function (err, member) {if (! Member) res.status (404) .send («Запись не найдена»); else {member.MemberName = req.body. MemberName; member.MemberBio = req.body.MemberBio; member.MemberAge = req.body.MemberAge; member.save (). Then (member => {res.json ('Обновление завершено');}) .catch (err => {res.status (400) .send ("невозможно обновить базу данных");});}});});//Определенное удаление | удалить | уничтожить routememberRoutes.route ('/delete/: id'). get (function (req, res) {Member.findByIdAndRemove ({_id: req.params.id}, function (err, member) {if (err) res. json (err); else res.json ('Успешно удалено');});}); module.exports = memberRoutes; Здесь мы использовали модель мангуста для сохранения, обновления, удалить данные из базы данных. Mongoose — это ORM, используемый в базе данных MongoDB. Он будет обрабатывать все задачи CRUD на бэкэнде. Теперь у нас есть все функции операций CRUD, настроенные для файла маршрута. Последнее, что нам нужно импортировать на сервер . 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'); memberRoute = require ('./routes/member.route'); mongoose.Promise = global.Promise; mongoose. connect (config.DB, {useUnifiedTopology: true, useNewUrlParser: true}). then (() => {console.log ('База данных подключена')}, err => {console.log ('Не удается подключиться к database '+ err)}); const app = express (); app.use (bodyParser.json ()); app.use (cors ()); app.use ('/members ', memberRoute); const port = process.env.PORT || 4000; const server = app.listen (порт, функция () {console.log ('Прослушивание порта' + порт);}); Теперь перейдите в терминал и запустите узел сервер, если вы еще не запустили его. nodemon server [nodemon] 2.0.2 [nodemon] для перезапуска в любое время введите `rs` [nodemon], наблюдая за каталогами: *. * [nodemon] наблюдает за расширениями: js, mjs, json [nodemon] запускает `node server.js` Прослушивание порта 4000 База данных подключена Шаг 16: Сохраните данные в базе данных MongoDB Если все ваши серверы запущены и работают, вы можете перейти в браузер, заполнить данные формы и добавить участника. В случае успеха вы можете увидеть что-то подобное на своем экране. Иногда, если вы запускаете блокировщик рекламы в браузере, он не работает. Поэтому отключите блокировщик рекламы и попробуйте еще раз этот пример. Шаг 17: данные отображения Angular 9 Мы можем перебирать данные серверной части и отображать данные в табличном формате, используя Угловая директива ngfor. Внутри файла member-get.component.html напишите следующий код. Имя участника Биография участника Участник Возраст Действия { {member.MemberName}} {{member.MemberBio}} {{member.MemberAge}} Изменить Удалить Теперь внутри элемента . service.ts, нам нужно написать функцию, которая извлекает данные членов из базы данных MongoDB и отображает их в приложении Angular . //member.service.tsgetMembers () {вернуть этот .http .get (`$ {this.uri}`); } В приведенной выше функции getMembers () мы отправили HTTP-запрос GET на сервер Node.js и получили данные из базы данных. Теперь нам нужно включить файл member.service.ts и файл Member.ts в member-get .component.ts. Напишите следующий код внутри member-get.component.ts //member-get.component.tsimport {Component, OnInit} from '@ angular/core'; import member from '../Member';import {MemberService} from '../member.service'; @ Component ({selector: 'app-member-get', templateUrl: './member-get.component.html', styleUrls: ['./member-get.component. css ']}) класс экспорта MemberGetComponent реализует OnInit {members: Member []; конструктор (закрытый ms: MemberService) {} ngOnInit () {this.ms .getMembers () .subscribe ((data: Member []) => {this.members = data;}); }} Сохраните файл, перейдите в браузер и переключитесь на этот URL: http://localhost: 4200/members. Вы можете увидеть список участников. Шаг 18: Angular 9 Редактирование и обновление данных Теперь нам нужно получить данные из базы данных MongoDB, используя _id мудро и отобразить эти данные в файле member-edit .component.html. Для этого, когда member-edit.component.html загружается, мы отправляем запрос AJAX на сервер узла и извлекаем конкретную строку, используя _id и данные для соответствующих поля внутри HTML-формы. Итак, сначала добавьте следующий код в member-edit .component.ts file. //member-edit.component.tsimport {Component, OnInit} from '@ angular/core'; import {FormGroup, FormBuilder, Validators} из '@ angular/forms'; импортировать {ActivatedRoute, Router} из '@ angular/router'; импортировать {MemberService} из '../member.service';@Comp onent ({selector: 'app-member-edit', templateUrl: './member-edit.component.html', styleUrls: ['./member-edit.component.css')})export class MemberEditComponent реализует OnInit { angForm: FormGroup; участник: any = {}; конструктор (частный маршрут: ActivatedRoute, частный маршрутизатор: маршрутизатор, частный ms: MemberService, частный fb: FormBuilder) {this.createForm (); } createForm () {this.angForm = this.fb.group ({MemberName: ['', Validators.required], MemberBio: ['', Validators. обязательно], MemberAge: ['', Validators.required]}); } ngOnInit (): void {this.route.params.subscribe (params => {this.ms.editMember (params [`id`]). subscribe (res => {this.member = res;});}) ; }} Здесь при рендеринге member-edit component.ts он вызовет функцию ngOnInit () и отправить HTTP-запрос на сервер узла и получить данные из _id для отображения внутри компонента редактирования элементов .html. Теперь внутри файла member.service.ts нам нужно закодировать editMember () функция для отправки HTTP-запроса. //member.service.tseditMember (id) {вернуть этот .http .get (`$ {this.uri}/edit/$ {id}`) ; } Теперь нам нужно добавить код формы в файл member-edit.component.html. Имя участника Требуется имя участника. Биография участника Требуется биография участника. Возраст участника Требуется возраст участника. Обновить член Сохранить файл, перейдите на страницу списка и нажмите кнопку редактирования, и вы увидите компонент редактирования элемента с заполненными полями формы из базы данных, относящимися к этой строке. Теперь давайте обновим данные в База данных относительно их _id. Внутри файла member.service.ts нам нужно написать функцию, которая обновляет данные полей формы. См. Следующий код. //member.service.tsupdateMember (MemberName, MemberBio, MemberAge, id) {const obj = {MemberName, MemberBio, MemberAge}; this .http .post (`$ {this.uri}/update/$ {id}`, obj) .subscribe (res => console.log ('Done')); } Хорошо, теперь напишите функцию updateMember () внутри файла member-edit.component.ts. //edit-member.component.tsupdateMember (MemberName, MemberBio, MemberAge) {this.route.params.subscribe (params => {this.ms.updateMember (MemberName, MemberBio, MemberAge, params.id) ); this.router.navigate (['members']);}); } В приведенном выше методе мы получаем значения формы из HTML-формы и отправляем запрос PUT на внутренний сервер с обновленными значениями, а на стороне сервера функция обновления захватывает значения и обновите значения в базе данных MongoDB. Сохраните файл, и вы сможете обновить данные в базе данных. Шаг 19 : Angular 9 Удалить данные формы. Я уже написал функции службы edit и для обновления, чтобы Вызовы API. Итак, до сих пор мы выполнили задачу создания, чтения, обновления этого сообщения Angular 9 Tutorial CRUD. Теперь посмотрим, как Удалить или удалить данные из базы данных. Теперь нам нужно определить событие щелчка для кнопки удаления внутри файла member-get.component.html. См. Следующий код. {{member.MemberName}} {{member.MemberBio}} {{member.MemberAge}} Изменить Удалить Теперь напишите функцию deleteMember () внутри member-get .component. ts. {this. members.splice (index, 1);});} Вышеупомянутый метод отправит идентификатор на сервер для удаления определенной строки на основе этого идентификатора из базы данных. На интерфейсе мы используем функцию Javascript Splice для удаления данных из приложения Angular с помощью индекса массива. Теперь создайте внутри функцию deleteMember () файл member.service.ts. Мы отправим идентификатор в этом запросе AJAX для удаления данных с внутреннего сервера. //member.service.tsdeleteMember (id) {return this .http .get (`$ {this. uri}/delete/$ {id} `); } Наконец, мы завершили функциональность удаления. Итак, в этом обширном руководстве мы завершили функциональность CRUD в Angular 9. Я также разместил этот код на Github. Пожалуйста, ознакомьтесь с этим кодом. Если у вас есть какие-либо сомнения или вопросы в Angular 9 CRUD примере, задайте их в комментариях ниже. Если бы я был занят, то некоторые обязательно ответят на ваш вопрос. УГЛОВОЙ КОД 9
  33. Шаг 15: Создайте файлы маршрута и модели.
  34. Шаг 16: Сохраните данные в базе данных MongoDB
  35. Шаг 17: данные отображения Angular 9
  36. Шаг 18: Angular 9 Редактирование и обновление данных
  37. Шаг 19 : Angular 9 Удалить данные формы.

Учебник по Angular 9

Angular исходный код написан на TypeScript. Если вы новичок в TypeScript, ознакомьтесь с руководством по использованию TypeScript в этом блоге. TypeScript — это надмножество Javascript.

Преимущества TypeScript

  1. TypeScript использует классы ES2015 или ES6.
  2. TypeScript использует модули. Таким образом, мы можем импортировать или экспортировать любой модуль.
  3. TypeScript имеет строгую типизацию; это означает, что если вы определяете тип для конкретной переменной, вы не можете назначать различные типы этой переменной. Это строго типизированный язык, а не слабо связанный язык.
  4. TypeScript имеет сигнатуры функций.
  5. Мы можем писать код Javascript в файле TypeScript. Таким образом, нет необходимости использовать строго типизированный код. Но в больших веб-приложениях строгая типизация полезна и экономит много времени.

Angular 9 Архитектура

Каркас Angular построен на компонентах. Приложение angular выполняет загрузку первого родительского компонента, во многом подобно дереву HTML DOM, которое начинается с элемента HTML и затем разветвляется оттуда.

Angular работает на модели дерева компонентов. После того, как Angular загружает первый компонент с помощью вызова начальной загрузки, он затем просматривает HTML-представление компонента и проверяет, есть ли в нем какие-либо вложенные компоненты. Если это так, то Angular находит совпадения и запускает для них соответствующий код компонента. Этот процесс повторяется для каждого компонента вниз по дереву.

Компонент в Angular используется для рендеринга части HTML и обеспечения функциональности этой части. Он делает это через класс Component, в котором вы можете определить логику приложения для компонента.

Angular 9 Directives

Angular directives предоставляют функциональные возможности, которые могут передавать DOM.

В Angular есть два типа директив.

  1. Структурные
  2. Атрибут

Структурные директивы изменяют макет, изменяя элементы HTML в DOM.

Директивы атрибутов изменяют поведение или внешний вид существующего элемента DOM.

Вы может применять директивы к существующим элементам DOM.

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

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

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

Привязка данных Angular 9

Angular — это гораздо больше, чем просто движок для рендеринга шаблонов разметки через компоненты. Одна из сильных сторон Angular — простота привязки данных к представлениям и работы с данными в этих представлениях.

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

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

Директивы предоставляют клиентскому приложению мощности для добавления логики в ваши представления, аналогично тому, как вы это делаете на стороне сервера.

Синтаксис шаблона в Angular довольно хорош и позволяет добиться многого, когда дело доходит до работы с данными в представлениях.

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

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

Angular 9 Dependency Injection

Внедрение зависимостей или DI — это концепция инверсии управления, или IoC для краткости, где вы создаете свой код таким способ, которым вы предоставляете модули с другими модулями, которые необходимы для выполнения некоторой работы, вместо того, чтобы модули выходили и получали другие модули сами по себе.

DI (Dependency Injection) позволяет вам писать разделенный код, который проще юнит-тестировать и работать с ним. В среде Angular это позволит вам писать эти модульные компоненты и даже службы в ваших приложениях и сообщать Angular, что вы хотите использовать и где вы хотите их использовать.

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

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

Вы также можете использовать DI с помощью таких вещей, как метаданные компонентов, свойства, директивы и поставщики.

Вы даже можете выполнить некоторую инъекцию зависимостей на этапе начальной загрузки Angular app, настраивая график зависимостей при запуске приложения и доставляя его через все аспекты вашего приложения. Одна из возможностей DI — это возможность заменять зависимость на любом этапе кода приложения.

Angular 9 Services

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

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

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

Итак, если вы не помещаете бизнес-логику в свои компоненты и директивы, то куда вы ее помещаете? Ответ — услуги.

Вы можете написать класс JavaScript, который занимается поиском записи из API или внешнего источника данных и возвратом ее как объекта. Это была бы услуга. Затем, используя DI Angular, вы можете указать, что ваш компонент Angular будет использовать вашу службу, а из логики компонента вы можете запросить запись базы данных из вашей службы и сделать ее доступной для вашего шаблона представления.

Эти сервисы, которые вы пишете, также могут использовать DI, поэтому вы можете создавать конструкторы и указывать типы параметров с помощью некоторого TypeScript, а Angular предоставит вашему экземпляру сервиса соответствующие зависимости.

В написанных вами сервисах нет ничего, что могло бы выполнять какие-либо услуги типа Angular. Это просто старый логический код JavaScript. А с мощью DI им предоставляется другой код для работы, без необходимости знать, что этот код является кодом, специфичным для Angular.

Таким образом, когда вы используете сервисы написания в коде вашего приложения, вы получаете преимущество написания логики JavaScript, которая никоим образом не связана с фреймворком Angular. Это одно из отличных преимуществ Angular.

Angular 9 Routing

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

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

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

Angular 9 HttpClient

Angular framework взаимодействует с внутренними серверами через REST API, используя интерфейс XMLHttpRequest или fetch () API.

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

Angular HttpClient доступен в пакете @ angular/common/http и имеет упрощенный интерфейс API и надежные функции, такие как типизированный запрос, легкость тестирования, объекты ответа, запрос, перехватчики ответа, реактивные API с RxJS Observables и оптимизированная обработка ошибок.

Итак, это основная компонентная архитектура Angular. Давайте поговорим о последних функциях Angular 9.

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

Ivy по умолчанию

Теперь, с выпуском Angular 9, средство визуализации Ivy является компилятором Angular по умолчанию, поэтому вам не нужно писать ничего нового в вашем tsconfig , чтобы пользоваться Ivy.

Если вы использовали Angular 8 в своих старых проектах, вы бы помнили, что средство визуализации Ivy уже было вам доступно, но для его использования необходимо зарегистрироваться. Например, вам нужно было перейти в файл tsconfig.json и добавить к нему строку ниже.

 "angularCompilerOptions": {"enableIvy": true}  

Поддержка ModuleWithProviders

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

Следующий код является старым объявлением.

 @NgModule ({...}) класс экспорта MyModule {static forRoot (config: SomeConfig): ModuleWithProviders {return {ngModule: SomeModule, providers: [{provide: SomeConfig, useValue: config}]};  }} 

Теперь они должны выглядеть так, как показано ниже.

 @NgModule ({...}) класс экспорта MyModule {static forRoot (config: SomeConfig)  : ModuleWithProviders  {return {ngModule: SomeModule, провайдеры: [{предоставить: SomeConfig, useValue: config}]};  }} 

Если вы не знаете, как перенести свой старый проект angular на Angular 9, ознакомьтесь с руководством по обновлению проекта Angular 9.

Изменения внедрения зависимостей в Core

Для внедрения зависимостей новая версия Angular также имеет небольшие улучшения.. Это не такое значительное изменение, но была добавлена ​​некоторая поддержка для раздела значений providedIn инъекций зависимостей.

См. Следующий код.

 @Injectable ({providedIn: 'platform'}) class MyService {...} 

Обновления Service Worker

В этой последней версии Angular для сервис-воркеров устаревшая опция версионных файлов в конфигурации группы сервис-воркеров удалена. Теперь это выглядит так.

 "assetGroups": [{"name": "test", "resources": {"files": ["/**/*.txt"]  }}] 

Улучшения Angular i18n

Angular — это инфраструктура JavaScript MVC, которая давно поддерживает интернационализацию. С помощью Angular CLI вы можете генерировать стандартные коды, которые помогут создавать файлы переводчика, чтобы ваше приложение angular могло быть опубликовано на нескольких языках. Этот процесс был дополнительно переработан командой Angular из Ivy, чтобы упростить добавление встраивания во время компиляции.

Обложка в Angular 9 CRUD Tutorial with Example

  1. Как установить Angular CLI 9,
  2. Как создать проект Angular 9 с помощью Angular CLI,
  3. Как для создания компонентов Angular, маршрутизации и навигации между ними.
  4. Как создавать и внедрять сервисы Angular.
  5. Как отправлять HTTP-запросы GET, POST на серверы, используя HttpClient.
  6. Как настроить веб-сервер node.js.
  7. Как установить и настроить экспресс-веб-фреймворк.
  8. Как создать экспресс-маршруты и модели.

Учебный процесс по Angular 9

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

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

Для этого руководства я использую следующие технические стеки. Я описал это с актуальной последней версией. Ваш может отличаться в зависимости от будущего.

  1. Узел v13.3.0
  2. NPM v6.13.7
  3. AngularCLI v9.0.3
  4. версия оболочки MongoDB v3.6.3
  5. версия MongoDB
  6. Mac OS Catalina

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

Итак, в этом руководстве MEAN Stack мы увидим Angular Routing, Angular Forms, а на задней стороне мы используем Node.js и Express.js для управления данными и хранения данные на стороне сервера. Мы будем использовать MongoDB в качестве СУБД.

Пример Angular 9 CRUD

В В этом грубом примере Angular 9 мы создадим приложение Angular Намасте Трамп , реализующее операцию CRUD.

В этот день, 24 февраля 2020 г., Дональд Трамп прибывает в Индию. Итак, мы создадим простое приложение crud, которое создает, редактирует, обновляет и удаляет члена семьи Трампа.

Это приложение будет использовать REST API, который хранит и извлекает необходимые данные из узла, экспресс веб-API , сохраните сетевые данные с помощью запроса POST, внесите изменения в регистр и удалите данные.

Итак, мы узнаем, как использовать модуль HTTPClient для доступа к REST API, используя угловую форму, используя маршрутизацию и навигацию, и создать простой календарь. Также вы узнаете, как отправлять запросы GET и обрабатывать HTTP-ответы с серверов REST API в вашем приложении Angular 9, используя HttpClient для получения и использования данных JSON.

Начнем руководство по Angular 9 по созданию приложения crud.

Шаг 1. Настройка Angular CLI v9

Если вы еще не установили Angular CLI в прошлом, затем следуйте приведенной ниже команде.

//Для Mac и Linux sudo npm install -g @ angular/cli//Для Windows Откройте CMD в режиме администратора и нажмите следующую команду. Npm  install -g @ angular/cli 

Теперь выполните следующую команду, чтобы проверить версию Angular CLI.

 ng version 

На следующем шаге мы инициализируем новый проект angular9crud.

Шаг 2. Инициализация нового проекта Angular 9 CRUD

Введите следующую команду, чтобы создать новый проект Angular 9.

 ng новый angular9crud 

Интерфейс командной строки задаст вам два вопроса, например Если Хотите добавить маршрутизацию Angular? Введите y для ответа «Да» и второй вопрос: какой формат таблицы стилей вы хотите использовать? Выберите CSS . Вы можете выбрать любого в зависимости от ваших требований.

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

Вы можете проверить файл с именем app-routing.module.ts внутри src >> app .

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

 ng serve --open 
 ➜ angular9crud git: (master) ng serve --open0% compilingCompiling @ angular/core: es2015 as esm2015Compiling @ angular/common:  es2015 как esm2015 Компиляция @ angular/platform-browser: es2015 как esm2015 Компиляция @ angular/platform-browser-dynamic: es2015 как esm2015 Компиляция @ angular/router: es2015 как esm2015chunk {main} main.js, main.js.map (main) 60,6 КБ  [начальный] [обработанный] фрагмент {polyfills} polyfills.js, polyfills.js.map (polyfills) 140 КБ [начальный] [визуализированный] фрагмент {время выполнения} runtime.js, runtime.js.map (время выполнения) 6,15 КБ [запись  ] [обработанный] фрагмент {стили} styles.js, styles.js.map (стили) 9,72 КБ [начальный] [обработанный] фрагмент {поставщик} vendor.js, vendor.js.map (поставщик) 2,97 МБ [начальный] [  визуализировано] Дата: 2020-02-24T04: 43: 10.082Z - Хэш: 7aef88a18f3aab2ca218 - Время: 22469 мс ** Angular Live Development Server прослушивает localhost: 4200, откройте браузер на http://localhost: 4200/**:  Скомпилировано успешно. Дата: 2020-02-24T04: 43: 11.341Z - Хеш: 7aef88a18f3aab  2ca2185 неизмененных фрагментов Время: 857 мс: успешно скомпилировано. 

Использование параметра «–open» автоматически откроет это приложение Angular 9 в браузере по умолчанию.

URL-адрес по умолчанию — :

Вы должны оставить сервер разработки запущенным и запустить новый интерфейс командной строки для выполнения команд CLI следующих шагов.

Шаг 3. Установите Bootstrap 4 CSS Framework

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

 ➜ angular9crud git: (master) ✗ npm install bootstrap --save> fsevents@1.2.11 install/Users/krunal/Desktop/code/ angular/angular9crud/node_modules/watchpack/node_modules/fsevents> node-gyp rebuild SOLINK_MODULE (target) Release/.node CXX (target) Release/obj.target/fse/fsevents.o SOLINK_MODULE (target) Release/fse.node> fsevents  @ 1.2.11 install/Users/krunal/Desktop/code/angular/angular9crud/node_modules/webpack-dev-server/node_modules/fsevents> node-gyp rebuild SOLINK_MODULE (target) Release/.node CXX (target) Release/obj.  target/fse/fsevents.o SOLINK_MODULE (target) Release/fse.nodenpm WARN bootstrap@4.4.1 требует однорангового узла jquery@1.9.1 - 3, но ни один не установлен.  Вы должны сами установить одноранговые зависимости. Npm WARN bootstrap@4.4.1 требует однорангового узла popper.js@^1.16.0, но ни один не установлен.  Вы должны установить одноранговые зависимости самостоятельно. + Bootstrap@4.4.1 добавил 139 пакетов от 33 участников, обновил 1 пакет и проверил 15251 пакет в 24.033s33 пакетах, ищите финансирование, запустите `npm fund` для получения подробной информации обнаружено 0 уязвимостей 

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

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

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

Мы создадим три компонента Angular.

 ng gc member-add --skipTests = trueng gc member-get --skipTests = trueng gc member-edit -  skipTests = true 

См. вывод.

 ➜ angular9crud git: (master) ✗ ng gc member-add --skipTests = trueCREATE src/app/member-add /member-add.component.css (0 байт) CREATE src/app/member-add/member-add.component.html (25 байтов) CREATE src/app/member-add/member-add.component.ts (290  байтов) ОБНОВЛЕНИЕ src/app/app.module.ts (489 байт) ➜ angular9crud git: (master) ✗ ng gc member-get --skipTests = trueCREATE src/app/member-get/member-get.component.css (  0 байт) CREATE src/app/member-get/member-get.component.html (25 байтов) CREATE src/app/member-get/member-get.component.ts (290 bytes) UPDATE src/app/app.  module.ts (585 байт) ➜ angular9crud git: (мастер) ✗ ng gc member-edit --skipTests = trueCREATE src/app/member-e  dit/member-edit.component.css (0 байт) CREATE src/app/member-edit/member-edit.component.html (26 bytes) CREATE src/app/member-edit/member-edit.component.ts (  294 байта) UPDATE src/app/app.module.ts (685 байтов) ➜ angular9crud git: (master) ✗ 

Для этой демонстрации нам не понадобится файл тестов. Поэтому мы не будем его создавать.

Все три компонента автоматически регистрируются в файле app.module.ts . Эти компоненты будут автоматически зарегистрированы в app.module.ts. Затем откройте и отредактируйте src/app/app-routing.module.ts, затем добавьте эти импорты.

Шаг 5: Создайте маршрутизацию Angular 9

Импортируйте все вновь созданные компоненты angular в файл app-routing.module.ts.

//app-routing.module.tsimport {MemberAddComponent} из './ member-add/member-add.component '; импортировать {MemberEditComponent} из' ./member-edit/member-edit.component '; импортировать {MemberGetComponent} из' ./member-get/member-get.component '; 

Добавить эти массивы к существующей константе маршрутов, содержащей маршрут для добавленных выше компонентов.

//app-routing.module.tsconst routes: Routes = [{path  : 'member/create', component: MemberAddComponent}, {path: 'edit/: id', component: MemberEditComponent}, {path: 'members', component: MemberGetComponent}]; 

Итак наш последний файл app-routing.module.ts выглядит так, как показано ниже.

//app-routing.module.tsimport {NgModule} from '@ angular/ core '; import {Route  s, RouterModule} из '@ angular/router'; импортировать {MemberAddComponent} из './member-add/member-add.component'; импортировать {MemberEditComponent} из './member-edit/member-edit.component';  импортировать {MemberGetComponent} из './member-get/member-get. component '; const routes: Routes = [{путь:' member/create ', component: MemberAddComponent}, {path:' edit/: id ', component: MemberEditComponent}, {path:' members ', component: MemberGetComponent}]  ; @NgModule ({import: [RouterModule.forRoot (routes)], exports: [RouterModule]}) класс экспорта AppRoutingModule {} 

Откройте и отредактируйте « src/app/ app.component.html », и вы увидите существующую розетку маршрутизатора.

Затем измените эту HTML-страницу, чтобы она соответствовала странице CRUD.

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

  

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

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

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

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

Если вы установите библиотеку ng2-slim-loading-bar, то она несовместима с Angular 9 .

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

 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"; 

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

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

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

Теперь добавьте приведенный ниже код внутри Файл app.component.ts .

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

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

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

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

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

Последним шагом является отображение индикатора маршрутизации.

Итак, нам нужно вставить директиву ng2-slim-loading-bar в файл app.component.html вверху страницы.

     

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

Шаг 8: Добавьте HTML-форму Bootstrap 4

Добавьте следующий HTML-код внутрь файл add-member.component.html .

  

Сохраните файл и перейдите по адресу: http://localhost: 4200/member/create

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

Веб-приложения обычно выполняют одно из двух: либо отображение данных для пользователя, либо сбор данных от пользователя. То, как мы собираем данные через веб-приложения, заключается в использовании веб-форм и более конкретных элементов форм.

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

Поскольку формы являются стандартным компонентом веб-приложений, в Angular есть специальный раздел, помогающий при работе с формами.

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

Есть два традиционных подхода к построению форм в Angular.

  1. На основе шаблона: большая часть логики формы создается в разметке шаблона.
  2. На основе модели: где большая часть логика формы создается в классе компонента.

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

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

Следующим шагом является импорт ReactiveFormsModule внутри файла app.module.ts . Он поставляется с проектом Angular из коробки.

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

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

Сначала нам нужно импортировать FormGroup, FormBuilder, Модули валидаторов из @ angular/forms module .

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

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

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

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

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

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

  
Требуется имя участника.
Требуется биография участника.
Требуется возраст участника.

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

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

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

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

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

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

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

Шаг 11. Создайте файл модели TypeScript.

Внутри каталога src >> app создайте файл с именем Member.ts и добавьте следующий код.

//Класс по умолчанию Member.tsexport Member {MemberName: string;  MemberBio: строка;  MemberAge: number;} 

Шаг 12: Создайте служебный файл Angular 9

Полный доступ (POST, GET, PUT, DELETE) к REST API будет помещен в службу Angular 9. Ответ от REST API, отправленный Observable, который может подписываться и читать из компонентов.

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

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

Итак, он имеет дело с внутренним сервером и отправляет и извлекает данные с внутреннего сервера.

 ng g service member --skipTests = true 

Итак, ваш необходимый файл member.service.ts выглядит так.

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

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

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

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

Теперь мы отправим запрос POST HTTP с данными на сервер Node.js и сохранить данные в базе данных MongoDB .

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

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

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

Теперь добавьте функцию addMember в файл member-add.component.ts .

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

//member-add.component  .tsimport {Component, OnInit} из '@ angular/core'; импортировать {FormGroup, FormBuilder, Validators} из '@ angular/forms'; импортировать {Router} из '@ angular/router'; импортировать {MemberService} из '.  ./member.service '; @ Component ({селектор:' app-member-add ', templateUrl:' ./member-add.component.html ', styleUrls: [' ./member-add.component.css ']  }) класс экспорта MemberAddComponent реализует OnInit {angForm: FormGroup;  конструктор (частный fb: FormBuilder, частный ms: MemberService, частный маршрутизатор: Router) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({MemberName: ['', Validators.required], MemberBio: ['', Validators.required], MemberAge: ['', Validators.required]})  ;  } addMember (Имя участника, MemberBio, MemberAge) {this.ms.addMember (Имя участника, MemberBio, MemberAge);  this.router.navigate (['члены']);  } ngOnInit (): void {}} 

В приведенном выше коде я импортировал файл member.service.ts . Затем мы определили метод addMember .

Этот метод вызывается, когда пользователь нажимает кнопку create member , и поток перейдет сюда. Мы получаем данные MemberName, MemberBio и MemberAge внутри функции addMember .

Внутри этой функции мы вызываем службу member.service. ts файла addMember () и передать вместе с ней три параметра.

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

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

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

Теперь нам нужно добавить событие click в Add Кнопка участника. Поэтому добавьте следующий код в файл member-add.component.html .

 

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

Шаг 14. Создайте серверный API в

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

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

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

 npm init -y 

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

 npm install express body-parser cors mongoose --save 

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

 npm install nodemon --save-dev 

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

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

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

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

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

Добавьте в этот файл следующий код.

//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 (порт, функция () {console.log ('Прослушивание порта' + порт);}); 

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

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

 mongod  

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

Создайте файл с именем DB.js внутри API . Папка проекта.

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

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

Импортировать файл 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, {useUnifiedTopology: true, useNewUrlParser: true}). Then (() => {console.log ('База данных подключена')}, err => {console.  log ('Не удается подключиться к базе данных' + err)}); const app = express (); app.use (bodyParser.json ()); app.use (cors ()); const port = process.env.  ПОРТ ||  4000; const server = app.listen (порт, функция () {console.log ('Прослушивание порта' + порт);}); 

Сохраните указанный выше сервер . js и запустите сервер nodemon.

 nodemon server 

Итак, прямо сейчас у вас есть три сервера, работающих на наших компьютерах.

  1. Angular Development Server.
  2. Сервер Nodemon.
  3. Сервер MongoDB.

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

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

Следующий шаг, мы необходимо создать две папки внутри API папки с названиями routes и models .

В папке с моделями создайте одну модель под названием

 //Member.jsconst mongoose = require ('mongoose'); const Schema = mongoose.Schema;//Определение коллекции и схемы для Memberlet Member = new Schema ({MemberName: {type: String}, MemberBio: {type: String}  , MemberAge: {type: Number}}, {collection: 'Member'}); module.exports = mongoose.model ('Member', Member); 

Итак, мы определили нашу схему для коллекции Member. У нас есть три поля: MemberName, MemberBio, MemberAge.

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

Напишите код CRUD внутри файла member.route.js .

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

Здесь мы использовали модель мангуста для сохранения, обновления, удалить данные из базы данных. Mongoose — это ORM , используемый в базе данных MongoDB . Он будет обрабатывать все задачи CRUD на бэкэнде. Теперь у нас есть все функции операций CRUD, настроенные для файла маршрута. Последнее, что нам нужно импортировать на сервер . 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'); memberRoute = require ('./routes/member.route'); mongoose.Promise = global.Promise; mongoose.  connect (config.DB, {useUnifiedTopology: true, useNewUrlParser: true}). then (() => {console.log ('База данных подключена')}, err => {console.log ('Не удается подключиться к  database '+ err)}); const app = express (); app.use (bodyParser.json ()); app.use (cors ()); app.use ('/members ', memberRoute); const port =  process.env.PORT ||  4000; const server = app.listen (порт, функция () {console.log ('Прослушивание порта' + порт);}); 

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

 nodemon server [nodemon] 2.0.2 [nodemon] для перезапуска в любое время введите `rs` [nodemon], наблюдая за каталогами: *. *  [nodemon] наблюдает за расширениями: js, mjs, json [nodemon] запускает `node server.js` Прослушивание порта 4000 База данных подключена 

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

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

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

Шаг 17: данные отображения Angular 9

Мы можем перебирать данные серверной части и отображать данные в табличном формате, используя Угловая директива ngfor.

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

  
Имя участника Биография участника Участник Возраст Действия
{ {member.MemberName}} {{member.MemberBio}} {{member.MemberAge}} Изменить Удалить

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

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

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

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

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

//member-get.component.tsimport {Component, OnInit} from '@ angular/core'; import member from '../Member';import {MemberService}  from '../member.service'; @ Component ({selector: 'app-member-get', templateUrl: './member-get.component.html', styleUrls: ['./member-get.component.  css ']}) класс экспорта MemberGetComponent реализует OnInit {members: Member [];  конструктор (закрытый ms: MemberService) {} ngOnInit () {this.ms .getMembers () .subscribe ((data: Member []) => {this.members = data;});  }} 

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

Шаг 18: Angular 9 Редактирование и обновление данных

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

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

Итак, сначала добавьте следующий код в member-edit .component.ts file.

//member-edit.component.tsimport {Component, OnInit} from '@ angular/core'; import {FormGroup, FormBuilder, Validators} из  '@ angular/forms'; импортировать {ActivatedRoute, Router} из '@ angular/router'; импортировать {MemberService} из '../member.service';@Comp  onent ({selector: 'app-member-edit', templateUrl: './member-edit.component.html', styleUrls: ['./member-edit.component.css')})export class MemberEditComponent реализует OnInit {  angForm: FormGroup;  участник: any = {};  конструктор (частный маршрут: ActivatedRoute, частный маршрутизатор: маршрутизатор, частный ms: MemberService, частный fb: FormBuilder) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({MemberName: ['', Validators.required], MemberBio: ['', Validators. обязательно], MemberAge: ['', Validators.required]});  } ngOnInit (): void {this.route.params.subscribe (params => {this.ms.editMember (params [`id`]). subscribe (res => {this.member = res;});})  ;  }} 

Здесь при рендеринге member-edit component.ts он вызовет функцию ngOnInit () и отправить HTTP-запрос на сервер узла и получить данные из _id для отображения внутри компонента редактирования элементов .html .

Теперь внутри файла member.service.ts нам нужно закодировать editMember () функция для отправки HTTP-запроса.

//member.service.tseditMember (id) {вернуть этот .http .get (`$ {this.uri}/edit/$ {id}`)  ;  } 

Теперь нам нужно добавить код формы в файл member-edit.component.html .

  
Требуется имя участника.
Требуется биография участника.
Требуется возраст участника.

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

Теперь давайте обновим данные в База данных относительно их _id.

Внутри файла member.service.ts нам нужно написать функцию, которая обновляет данные полей формы. См. Следующий код.

//member.service.tsupdateMember (MemberName, MemberBio, MemberAge, id) {const obj = {MemberName, MemberBio, MemberAge};  this .http .post (`$ {this.uri}/update/$ {id}`, obj) .subscribe (res => console.log ('Done'));  } 

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

//edit-member.component.tsupdateMember (MemberName, MemberBio, MemberAge) {this.route.params.subscribe (params => {this.ms.updateMember (MemberName, MemberBio, MemberAge, params.id)  ); this.router.navigate (['members']);});  } 

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

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

Шаг 19 : Angular 9 Удалить данные формы.

Я уже написал функции службы edit и для обновления , чтобы Вызовы API.

Итак, до сих пор мы выполнили задачу создания, чтения, обновления этого сообщения Angular 9 Tutorial CRUD.

Теперь посмотрим, как Удалить или удалить данные из базы данных.

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

     {{member.MemberName}}   {{member.MemberBio}}   {{member.MemberAge}}    Изменить     Удалить    

Теперь напишите функцию deleteMember () внутри member-get .component. ts .

  {this.  members.splice (index, 1);});} 

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

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

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

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

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

Если у вас есть какие-либо сомнения или вопросы в Angular 9 CRUD примере, задайте их в комментариях ниже. Если бы я был занят, то некоторые обязательно ответят на ваш вопрос.

УГЛОВОЙ КОД 9

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