Учебный пример Angular 5 CRUD с нуля

Angular 5 Учебный пример CRUD с нуля является ведущей темой сегодня. NodeJS в настоящее время является платформой из-за ее функций, а Express — это веб-фреймворк, построенный на основе Node.js . Angular CRUD Tutorial — прекрасный пример Как использовать Angular и Node.js вместе. Мы будем использовать MongoDB в качестве базы данных. Это что-то вроде приложения стека MEAN. Мы рассмотрим подробное руководство по MEAN Stack в будущем. Прямо сейчас мы создадим только приложение CRUD .

Если вы хотите узнать больше об Angular 7, ознакомьтесь с этим курсом Angular 7 — Полное руководство.

Если вы хотите изучить Пример Angular 6 , перейдите по ссылке ниже.

Учебник по Angular 6 В примере с использованием Angular CLI

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

  1. Angular Router Учебный пример

  2. Учебный пример проверки угловой формы

Angular 5 CRUD Учебник

Во-первых, нам нужно установить Frontend Framework. Итак, начнем с установки Angular Framework. Затем мы настроим маршрутизацию, а затем мы настроим конечную точку API для запроса сервера, а затем запрашиваем базу данных в соответствии с запросом и отображаем информацию в соответствии с ним.

Шаг 1. Установите Angular через интерфейс командной строки.

Прежде чем что-либо делать, вам необходимо настроить среду разработки.
Установите Node.js® и npm , если их еще нет на вашем компьютере.

Затем установите Angular CLI глобально.
 npm install -g @ angular/cli 

Шаг 2. Создайте новый проект.

Введите следующую команду. Он создаст структуру папок, а также установит оставшиеся зависимости.

 ng new ng5crud 

Шаг 3: Создайте три компонента приложения.

Создайте в папке src >> app один каталог с именем

Перейдите в корень папки и в консоли и нажмите следующую команду.

 ng gc indexng gc createng gc edit 

Мы создали три компонента. Каждый компонент выполнит свою работу. Здесь мы устанавливаем принцип единой ответственности для каждого компонента.

Он создает отдельную папку внутри каталога src >> app . Нам нужно переместить все эти три папки в папку components .

Также нам нужно изменить app.module.ts файл, чтобы записать правильный путь к импортированным компонентам. По умолчанию это каталог приложений..

Шаг 4. Маршрутизация и навигация.

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

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

Конфигурация

Когда мы создали компоненты, их путь по умолчанию другой, и теперь мы перешли к компонентам, так что теперь его путь другой. Итак, сначала нам нужно изменить этот путь в файле app.module.ts .

Хорошо, теперь нам нужно настроить маршруты. Итак, внутри каталога app создайте один файл с именем routerConfig.ts file.

Напишите в нем следующий код.

//routerConfig.tsimport {Routes} из '@ angular/router'; импортировать {CreateComponent} из './components/create/create.component';import {EditComponent} из' ./components/edit /edit.component';import {IndexComponent} из './components/index/index.component';export const appRoutes: Routes = [{path:' create ', component: CreateComponent}, {path:' edit/: id  ', component: EditComponent}, {path:' index ', component: IndexComponent}]; 

Мы определили один массив, и внутри этого массива мы зарегистрировали различные маршруты с их компонентами. Наконец, мы экспортировали его.

Теперь импортируйте этот объект в app.module.ts и зарегистрируйте модуль.

 //app.module.tsimport {appRoutes} из './routerConfig';imports: [BrowserModule, RouterModule.forRoot (appRoutes)], 

Шаг 5: Определите Выход маршрутизатора.

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

 

Добро пожаловать в {{title}} !!

Также нам нужно изменить атрибут title .

//app.component.tsimport {Component} from '@ angular/core';  @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']] ]export class AppComponent {title =' Добро пожаловать в мир криптовалюты  ';} 

Шаг 6. Добавьте Bootstrap CSS.

Загрузите bootstrap из исходных документов и вставьте CSS и JS папки внутри папки src >> assets .

В файл src >> index.html добавьте файл начальной загрузки css .

  

Также измените внешний вид app.component.html из-за классов начальной загрузки.

  

Шаг 7. Создайте форму в файле создания компонента.

Во-первых, наш create.component.ts файл выглядит так.

 import {Component, OnInit} from '@ angular/core'; @ Component ({selector: 'app-create', templateUrl: './create.component.html  ', styleUrls: [' ./create.component.css'pting})export class CreateComponent реализует OnInit {title = 'Add Coin'; constructor () {} ngOnInit () {}} 

Затем нам нужно создать дизайн формы create.component.html .

 
{{название} }

Теперь перейдите к этому. http://localhost: 4200/создать. Выглядит это так.

Шаг 8. Настройте HttpClientModule.

Перейдите к файлу app.module.ts . Включите в него HttpClientModule .

 import {HttpClientModule} из '@ angular/common/http'; импорт: [BrowserModule, RouterModule.forRoot (appRoutes),  HttpClientModule], 

Шаг 9. Создайте службы для отправки HTTP-запросов.

Введите следующую команду в своем терминале.

 ng g service coin 

Он создаст следующие классы.

  1. coin.service. ts
  2. coin.service.spec.ts

Теперь импортируйте файл службы в файл app.module.ts .

 import {CoinService} из './coin.service';providers: [CoinService] 

Шаг 10: Настройте серверную часть Node.js MongoDB.

Следующим шагом будет создание узла .. js и Express backend для хранения данных. Создайте в корне проекта один файл с именем

Теперь нам нужно установить express framework и другие зависимости. через NPM , так что давайте сделаем это сначала.

 npm install --save express body-parser cors mongoose nodemon 

Switch во вновь созданный файл server.js и введите в него следующий код.

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

Далее нам нужно создать MongoDB база данных и подключите ее к нашему экспресс-приложению.

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

Создайте одну папку config в корне проекта. В этом случае создайте один файл с именем

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

Импортируйте этот файл в наш файл server.js и используйте mongoose , чтобы установить соединение с базой данных с помощью MongoDB . Вам нужно скопировать весь файл server.js; Я собираюсь показать, что ничего не останется и приведет к ошибке.

//server.jsconst express = require ('express'), path = require ('path'), bodyParser =  require ('body-parser'), cors = require ('cors'), mongoose = require ('mongoose'), config = require ('./config/DB');  mongoose.Promise = global.Promise;  mongoose.connect (config.DB) .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 ('Прослушивание порта' + порт);}); 

Шаг 11: Создайте экспресс-маршруты для наше приложение.

Теперь нам нужно создать две папки в корне с именами expressRoutes и models.

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

 var mongoose = require ('mongoose'); var  Schema = mongoose.Schema;//Определить коллекцию и схему для Itemsvar Coin = new Schema ({name: {type: String}, price: {type: Number}}, {collection: 'Coins'}); module.exports =  mongoose.model ('Coin', Coin); 

В папке expressRouter создайте один файл с именем coinRoutes.js.

//coinRoutes.jsvar express = require ('express'); var app = express (); var coinRoutes = express.Router ();//Требовать модель Item в нашем  routes modulevar Coin = require ('../models/Coin');//Определенное хранилище routecoinRoutes.route ('/add'). post (function (req, res) {var coin = new Coin (req.body);  coin.save () .then (item => {res.status (200) .json ({'coin': 'Монета успешно добавлена'});}) .catch (err => {res.status (400).  send ("невозможно сохранить в базу данных");});});//Определено получение данных (индекс или листинг) routecoinRoutes.route ('/'). get (function (req, res) {Coin.find (function  (err, Coins) {if (err) {console.log (err);} else {res.json (Coins);}});});//Определенное редактирование routecoinRoutes.route ('/edit/: id'  ) .get (function (req, res) {var id = req.params.id; Coin.findById (id, function (err, coin) {res.json (coin);});});//Определенное обновление  routecoinRoutes.route ('/update/: id'). post (function (req, res) {Coin.findById (req.params.id, function (err, coin) {if (! coin) return next (n  ew Error («Не удалось загрузить документ»));  иначе {coin.name = req.body.name;  coin.price = req.body.price;  coin.save (). then (coin => {res.json ('Обновление завершено');}) .catch (err => {res.status (400) .send ("невозможно обновить базу данных");}  );  }});});//Определенное удаление |  удалить |  уничтожить routecoinRoutes.route ('/delete/: id'). get (function (req, res) {Coin.findByIdAndRemove ({_ id: req.params.id}, function (err, coin) {if (err) res.  json (err); else res.json ('Успешно удалено');});}); module.exports = coinRoutes; 

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

//server.jscoinRoutes =  require ('./expressRoutes/coinRoutes'); app.use ('/Coins', coinRoutes); 

Шаг 12: Вставьте значение в MongoDB.

Со стороны внешнего интерфейса нам нужно настроить HttpClientModule и запустить HTTP-вызов Post к серверу NodeJS.

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

Нам нужно включить ReactiveFormsModule в файл app.module.ts .

 импортировать {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из '@ angular/core'; импортировать {RouterModule} из '@ angular/router'; импортировать {HttpClientModule  } из '@ angular/common/http'; импортировать {ReactiveFormsModule} из '@ angular/forms'; импортировать {AppComponent} из './app.component'; импортировать {IndexComponent} из './components/index/index.  component '; импортировать {CreateComponent} из' ./components/create/create.component'; импортировать {EditComponent} из './components/edit/edit.component';import {appRoutes} из' ./routerConfig';import {  CoinService} из './coin.service'; @ NgModule ({объявления: [AppComponent, IndexComponent, CreateComponent, EditComponent], импорт: [BrowserModule, RouterModule.forRoot (appRoutes), HttpClientModule, ReactiveFormsModule], провайдеры:  bootstrap: [AppComponent]}) экспортный класс AppModule {} 

Затем мы проверяем формы. Итак, сначала напишите форму HTML в create.component.html.

 
{{title}}
Требуется имя.
Требуется цена.

Также нам нужно написать логику проверки в файл create.component.ts .

//create.component.tsimport {Component, OnInit} from '@ angular/core'; import {CoinService}  от '../../coin. service '; импортировать {FormGroup, FormBuilder, Validators} из' @ angular/forms '; @ Component ({selector:' app-create ', templateUrl:' ./create.component.html ', styleUrls: [' ./create  .component.css ']}) класс экспорта CreateComponent реализует OnInit {title =' Add Coin ';  angForm: FormGroup;  конструктор (частный сервис монет: CoinService, частный фб: FormBuilder) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({имя: ['', Validators.required], price: ['', Validators.required]});  } addCoin (имя, цена) {this.coinservice.addCoin (имя, цена);  } ngOnInit () {}} 

Напишите файл coin.service.ts для вставки данных в базу данных.

 import {Injectable} from '@ angular/core'  ; импортировать {HttpClient} из '@ angular/common/http'; импортировать {FormGroup, FormBuilder, Validators} из '@ angular/forms'; @ Injectable () экспортировать класс CoinService {конструктор (частный http: HttpClient) {} addCoin (  имя, цена) {const uri = 'http://localhost: 4000/Coins/add';  const obj = {имя: имя, цена: цена};  this.http.post (uri, obj) .subscribe (res => console.log ('Готово'));  }} 

Запустите сервер node.js , набрав: node server . Если вся конфигурация базы данных верна, вы можете видеть, что данные вставляются в базу данных.

Шаг 13: отобразите данные во внешнем интерфейсе.

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

 
Название монеты Цена монеты Действия
{{coin.name}} {{coin.price}} Изменить Удалить

Кроме того, вам необходимо обновить файл index.component.ts и вызвать сервисные функции для выполнения HTTP-запроса на получение.

 import {CoinService} from './../../coin.service';import {Component, OnInit} from' @ angular/core '  ; импортировать {HttpClient} из '@ angular/common/http'; импортировать {Observable} из 'rxjs/Observabl  e '; @ Component ({selector:' app-index ', templateUrl:' ./index.component.html ', styleUrls: [' ./index.component.css ']] })export class IndexComponent реализует OnInit {монеты:  любой;  конструктор (частный http: HttpClient, частный сервис: CoinService) {} ngOnInit () {this.getCoins ();  } getCoins () {this.service. getCoins (). subscribe (res => {this.coins = res;});  }} 

Напишите файл coin.service.ts для выполнения HTTP-запроса на получение.

 import {Injectable} from '  @ angular/core '; импортировать {FormGroup, FormBuilder, Validators} из' @ angular/forms '; импортировать {HttpClient} из' @ angular/common/http '; импортировать {Observable} из' rxjs/Observable '; импортировать' rxjs /add/operator/map '; @ Injectable () экспорт класса CoinService {результат: любой;  конструктор (частный http: HttpClient) {} addCoin (имя, цена) {const uri = 'http://localhost: 4000/Coins/add';  const obj = {имя: имя, цена: цена};  это .http .post (uri, obj) .subscribe (res => console.log ('Done'));  } getCoins () {const uri = 'http://localhost: 4000/Coins';  вернуть этот .http .get (uri) .map (res => {return res;});  } editCoin (id) {const uri = 'http://localhost: 4000/Coins/edit/' + id;  вернуть этот .http .get (uri) .map (res => {return res;});  }} 

Теперь перейдите к http://localhost: 4200/index

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

Шаг 14: отредактируйте и удалите монеты.

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

 
{{title}}
Имя является обязательным.
Требуется цена.

Хорошо, следующим шагом является код edit.component.ts .

//edit.component.tsimport {Component, OnInit} from '@ angular/core'; import {ActivatedRoute, Router} из  '@ angular/router'; импортировать {CoinService} из './../../coin.service'; импортировать {FormGroup, FormBuilder, Validators} из '@ angular/forms'; @ Component ({selector: 'app  -edit ', templateUrl:' ./edit.component.html ', styleUrls: [' ./edit.component.css'ght})export class EditComponent реализует OnInit {coin: any; angForm: FormGroup; title = 'Edit Coin  '; конструктор (частный маршрут: ActivatedRoute, частный маршрутизатор: Маршрутизатор, частный сервис: CoinService, частный fb: FormBuilder) {this.createForm ();} createForm () {this.angForm = this.fb.group ({name: [  '', Validators.required], price: ['', Validators.required]});} updateCoin (имя, цена) {this.route.params.subscribe (params => {this.service.updateCoin (name,  цена, параметры ['id']);  this.router.navigate (['индекс']);  });} ngOnInit () {this.route.params.subscribe (params => {this.coin = this.service.editCoin (params ['id']). subscribe (res => {this.coin = res;  });});  }} 

Теперь также напишите код в файл coin.service.ts .

 import {Injectable} from '  @ angular/core '; импортировать {FormGroup, FormBuilder, Validators} из' @ angular/forms '; импортировать {HttpClient} из' @ angular/common/http '; импортировать {Observable} из' rxjs/Observable '; импортировать' rxjs /add/operator/map '; @ Injectable () экспорт класса CoinService {результат: любой;  конструктор (частный http: HttpClient) {} addCoin (имя, цена) {const uri = 'http://localhost: 4000/Coins/add';  const obj = {имя: имя, цена: цена};  это .http .post (uri, obj) .subscribe (res => console.log ('Done'));  } getCoins () {const uri = 'http://localhost: 4000/Coins';  вернуть этот .http .get (uri) .map (res => {return res;});  } editCoin (id) {const uri = 'http://localhost: 4000/Coins/edit/' + id;  вернуть этот .http .get (uri) .map (res => {return res;});  } updateCoin (имя, цена, идентификатор) {const uri = 'http://localhost: 4000/Coins/update/' + id;  const obj = {имя: имя, цена: цена};  это .http .post (uri, obj) .subscribe (res => console.log ('Done'));  }} 

Я уже написал edit и update service для вызова API. Итак, на данный момент Создание, чтение, обновление завершено. Теперь взгляните на Удалить .

Теперь я кодирую весь файл index.component.html ..

 
Название монеты Цена монеты Действия
{{coin.name}} {{coin .price}} Изменить

Также напишите файл функции deleteCoin () edit.component.ts .

 deleteCoin (id) {  this.service.deleteCoin (id) .subscribe (res => {console.log ('Deleted');});} 

Наконец, весь coin.service.ts файл выглядит следующим образом.

 import {Injectable} from '@ angular/core'; import {FormGroup, FormBuilder, Validators} from '@ angular/forms'; import {HttpClient}  from '@ angular/common/http'; import {Observable} из 'rxjs/Observable'; import 'rxjs/add/operator/map'; @ Injectable () экспорт класса Co  inService {результат: любой;  конструктор (частный http: HttpClient) {} addCoin (имя, цена) {const uri = 'http://localhost: 4000/Coins/add';  const obj = {имя: имя, цена: цена};  это .http .post (uri, obj) .subscribe (res => console.log ('Done'));  } getCoins () {const uri = 'http://localhost: 4000/Coins';  вернуть этот .http .get (uri) .map (res => {return res;});  } editCoin (id) {const uri = 'http://localhost: 4000/Coins/edit/' + id;  вернуть этот .http .get (uri) .map (res => {return res;});  } updateCoin (имя, цена, идентификатор) {const uri = 'http://localhost: 4000/Coins/update/' + id;  const obj = {имя: имя, цена: цена};  это .http .post (uri, obj) .subscribe (res => console.log ('Done'));  } deleteCoin (id) {const uri = 'http://localhost: 4000/Coins/delete/' + id;  вернуть этот .http .get (uri) .map (res => {return res;});  }} 

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

Fork Me On Github

Наконец , Пример руководства по Angular 5 CRUD с нуля окончен.

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