Angular 13 CRUD: Tutorial Stack Berarti – Codewithaden

Di artikel ini, kami akan membuat sampel Angular aplikasi langkah demi langkah dari awal dan melakukan Crud operasi. Itu API Backend akan terpapar menggunakan Node.js, dan Cepat kerangka kerja dan Mongodb akan digunakan untuk penyimpanan data yang persisten. Akhirnya, kami akan menggunakan CLI Angular untuk menghasilkan proyek boilerplate.

Fitur dan peningkatan sudut

Pada bulan Oktober, Angular dirilis tahun ini dengan beberapa fitur baru seperti CLI Prompts, Virtual Scroll, Drag and Drop Angular Budgets, dan banyak lagi. Dari rilis ini, Angular mendukung simpul 10 dan secara bersamaan mempertahankan dukungan simpul 8 dengan TypeScript 3.1 dan RXJS 6.3 . Selain itu, ekstensi baru dari @angular/skema ditelepon meminta telah diperkenalkan dengan CLI yang akan mendorong pengembang saat menjalankan perintah umum seperti NG New My-App. Berikut ini adalah daftar fitur dan peningkatan sudut baru.

  1. Kompiler NG baru
  2. CLI meminta
  3. Dobootstrap Angular
  4. Kinerja aplikasi meningkat
  5. ScrollingModule dan DragDropModule
  6. Ivy Renderer
  7. TypeScript 3.1
  8. RXJS 6.3

Alur kerja Angular

Kami akan membuat dua proyek terpisah. Satu untuk Angular , dan satu untuk Node.js, ekspres, dan Mongodb . Itu berarti satu untuk ujung depan dan satu untuk backend. Pertama, kami akan membuat API backend, yang akan mengkonsumsinya API.

Crud sudut

Angular crud berarti aplikasi yang terdiri dari membuat, membaca, memperbarui, dan menghapus fungsi data. Ini adalah panduan komprehensif tentang membangun aplikasi web CRUD (Buat, Baca, Perbarui, Hapus) menggunakan Kerangka Angular Baru. Angular baru saja dirilis, dan dilengkapi dengan beberapa fitur dan peningkatan baru.

Pertama, kami akan menginstal Angular menggunakan sudut CLI, dan kemudian kami akan terus mengembangkan frontend dan backend.

Langkah 1: Pasang dependensi sudut dan lainnya.

Jika Anda memiliki versi @Angular/CLI yang lebih lama, Anda dapat menjalankan perintah berikut untuk menginstal versi terbaru.

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli 

Jika Anda mengalami masalah apa pun, silakan periksa saya Cara memperbarui sudut cli ke versi 7 . Ini akan membantu Anda memperbarui CLI Angular , dan Anda akan membuat proyek Seven Angular baru.

Oke, sekarang, jika Anda mengetikkan perintah berikut, Anda dapat melihat bahwa kami telah memperbarui CLI Angular.

Angular

Sekarang, Anda akan membuat proyek sudut baru menggunakan perintah berikut.

ng new angular7crud
cd angular7crud 

MEAN

Setelah masuk ke dalam folder proyek, buka proyek di Kode Studio Visual menggunakan perintah berikut. Jika Anda tidak menggunakannya, maka mulailah menggunakannya. Itu adalah editor terbaik untuk Javascript perkembangan.

code . 

Pada saat instalasi, kami telah mengaktifkan perutean untuk aplikasi kami. Itu baru di Angular Karena itu akan meminta kami saat memasang boilerplate sudut. Anda dapat memeriksa file yang dipanggil app-routing.module.ts file di dalam SRC >> aplikasi direktori.

Selanjutnya, instal Bootstrap 4 CSS Kerangka menggunakan perintah berikut.

npm install bootstrap --save 

Sekarang, tambahkan di dalam Angular.json mengajukan.

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

Jadi, sekarang kita dapat menggunakan kelas Bootstrap 4 dalam proyek kami.

Mulai server pengembangan sudut menggunakan perintah berikut.

ng serve -o 

Angular

Deskripsi Proyek

Kami akan membuat proyek di mana pengguna dapat memasukkannya Pengguna Nama, Nama Bisnis, dan Nomor GST dari formulir dan kirimkan. Jika nilainya salah, mereka akan divalidasi di frontend, dan formulir tidak akan mengirimkan. Di sisi lain, jika semua nilai tampak sempurna, kami akan mengirimkan formulir API Backend , menyimpan nilai -nilai di dalam Mongodb database.

Jadi sekarang, kami akan membuat beberapa komponen sudut untuk melakukan pekerjaan itu.

Langkah 2: Hasilkan komponen sudut

Ketik perintah berikut untuk menghasilkan Komponen sudut . Kami akan melakukan operasi membuat, membaca, memperbarui. Jadi kami akan membuat tiga komponen.

ng g c gst-add --spec=false
ng g c gst-get --spec=false
ng g c gst-edit --spec=false 

Angular

Ketiga komponen secara otomatis terdaftar di dalam app.module.ts mengajukan. Kita perlu mengonfigurasi perutean komponen sudut di dalam app-routing.module.ts mengajukan.

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GstAddComponent } from './gst-add/gst-add.component';
import { GstEditComponent } from './gst-edit/gst-edit.component';
import { GstGetComponent } from './gst-get/gst-get.component';

const routes: Routes = [
  {
    path: 'business/create',
    component: GstAddComponent
  },
  {
    path: 'business/edit/:id',
    component: GstEditComponent
  },
  {
    path: 'business',
    component: GstGetComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }
 

Sekarang, Anda dapat melihat di dalam app.component.html mengajukan itu Arahan ada di sana. Petunjuk ini membantu kami membuat berbagai komponen berdasarkan rute URI.

Langkah 3: Buat navigasi sudut

Tulis kode berikut di dalam app.component.html mengajukan.



Simpan file dan buka browser dan klik dua tautan. Anda bisa melihat itu Kita dapat melihat berbagai komponen berdasarkan navigasi.

Langkah 4: Pasang indikator kemajuan perutean sudut.

Ketik perintah berikut untuk menginstal NG2-Slim-Loading-Bar Perpustakaan.

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

Jadi, jika Anda memasang paket pihak ketiga sekarang, itu tidak kompatibel dengan Angular . Untuk menjembatani kesenjangan antara Angular dan paket pihak ketiga, kita perlu menginstal perpustakaan berikut. Hanya itu saja.

npm install rxjs-compat --save 

Sekarang, impor SlimLoadingBarmodule di dalam app.module.ts mengajukan.

// app.module.ts

import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';

imports: [
    ...
    SlimLoadingBarModule
], 

Langkah selanjutnya adalah memasukkan gaya dengan perpustakaan di dalam SRC >> styles.css mengajukan.

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

Langkah 5: Menambahkan acara router.

Routermodule Angular memberi kita modul acara berikut.

  1. NavigationStart
  2. Navigasi
  3. NavigationError
  4. NavigationCancel
  5. Router
  6. Peristiwa

Sekarang, tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';
import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
import { NavigationCancel,
        Event,
        NavigationEnd,
        NavigationError,
        NavigationStart,
        Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular7crud';
  constructor(private _loadingBar: SlimLoadingBarService, private _router: Router) {
    this._router.events.subscribe((event: Event) => {
      this.navigationInterceptor(event);
    });
  }
  private navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this._loadingBar.start();
    }
    if (event instanceof NavigationEnd) {
      this._loadingBar.complete();
    }
    if (event instanceof NavigationCancel) {
      this._loadingBar.stop();
    }
    if (event instanceof NavigationError) {
      this._loadingBar.stop();
    }
  }
}
 

Melakukan hal itu mencegat acara perutean dan menambahkan komponen batang pemuatan ke setiap rute sehingga kita dapat melihat indikasi perutean setiap kali kita mengubah rute.

Perubahan akhir untuk menampilkan indikator perutean adalah menambahkan NG2-Slim-Loading-Bar arahan di dalam app.component.html file di bagian atas halaman.





Simpan file dan buka terminal untuk melihat apakah ada kesalahan dan jika tidak, buka browser dan ubah rute, dan Anda dapat melihat bahwa sekarang kita dapat melihat indikator perutean.

Langkah 6: Tambahkan Formulir Bootstrap

Di dalam gst-add.component.html file, tambahkan yang berikut ini Bootstrap 4 membentuk.

Angular

Langkah 7: Tambahkan validasi bentuk sudut

Kami akan menggunakan ReactiveFormsmodule . Jadi jika Anda baru Validasi bentuk sudut , silakan lihat artikel ini Validasi bentuk sudut di blog ini.

Sekarang, impor ReactiveFormsmodule di dalam app.module.ts mengajukan.

// app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

imports: [
    ...
    ReactiveFormsModule
], 

Sekarang, kita perlu menulis kode untuk app.component.ts mengajukan. Ingat, ini bukan bentuk yang digerakkan template. Jadi kami akan mengubah kode di dalam app.component.ts mengajukan.

Pertama, kami mengimpor Formgroup, Formbuilder, validator modul dari @Angular/Forms

Juga, buat konstruktor dan instantiate Formbuilder

Jadi tulis kode berikut di dalam gst-add.component.ts mengajukan.

// gst-add.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';

@Component({
  selector: 'app-gst-add',
  templateUrl: './gst-add.component.html',
  styleUrls: ['./gst-add.component.css']
})
export class GstAddComponent implements OnInit {

  angForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.angForm = this.fb.group({
      person_name: ['', Validators.required ],
      business_name: ['', Validators.required ],
      business_gst_number: ['', Validators.required ]
    });
  }

  ngOnInit() {
  }

}
 

Kami telah menggunakan Form Builder untuk menangani semua validasi. Jadi dalam konstruktor itu, kami membuat formulir dengan aturan validasi. Dalam contoh kami, ada tiga bidang. Jika teks input kosong, itu akan memberikan kesalahan, dan kita perlu menampilkannya.

Sekarang, tulis kode berikut di dalam gst-add.component.html mengajukan.

Person Name is required.
Person Business is required.
Business GST Number is required.

Simpan file dan buka browser, dan Anda dapat melihat apakah Anda tidak memasukkan nilai apa pun di dalam kotak input, Anda akan melihat kesalahannya.

Angular

Langkah 8: Konfigurasikan httpclientModule

Impor HttpClientModule di dalam app.module.ts mengajukan.

// app.module.ts

import { HttpClientModule } from '@angular/common/http';

imports: [
   ...
    HttpClientModule
 ], 

Langkah 9: Buat model.

Di dalam SRC >> Aplikasi folder, buat satu file yang dipanggil Business.ts dan tambahkan kode berikut.

// Business.ts

export default class Business {
  person_name: String;
  business_name: String;
  business_gst_number: Number;
}
 

Langkah 10: Buat file layanan sudut.

Ketik perintah berikut untuk menghasilkan file layanan.

ng g service business --spec=false 

Jadi, yang utama Anda bisnis .service.ts File terlihat seperti ini.

// business.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BusinessService {

  constructor() { }
}
 

Sekarang, impor Business.service.ts file ke app.module.ts mengajukan.

// app.module.ts

import { BusinessService } from './business.service';

providers: [ BusinessService ], 

Langkah 11: Kirimkan data ke server node

Kita perlu menulis kode yang akan mengirim Http POS permintaan dengan data ke Node.js server dan simpan data ke Mongodb database.

Tulis kode berikut di dalam Business.service.ts mengajukan.

// business.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BusinessService {

  uri = 'http://localhost:4000/business';

  constructor(private http: HttpClient) { }

  addBusiness(person_name, business_name, business_gst_number) {
    const obj = {
      person_name: person_name,
      business_name: business_name,
      business_gst_number: business_gst_number
    };
    console.log(obj);
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }
}
 

Kami telah mendefinisikan URL API backend kami, tetapi kami belum membuat backend apa pun, tetapi kami akan melakukannya dalam beberapa langkah.

Kita perlu menambahkan acara klik ke tombol Tambah Bisnis. Jadi tambahkan kode berikut di dalam gst-add.component.html mengajukan.

Jadi ketika tidak ada kesalahan, kami dapat mengirimkan formulir, dan itu akan memanggil komponen addbusiness fungsi. Dari sana, kami akan menghubungi layanan sudut, dan layanan akan mengirim Http Posting permintaan ke Node.js server.

Sekarang, tambahkan addbusiness fungsi di dalam gst-add.component.ts mengajukan. Jadi tulis kode berikut di dalam GST-Add.component.ts mengajukan.

// gst-add.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
import { BusinessService } from '../business.service';

@Component({
  selector: 'app-gst-add',
  templateUrl: './gst-add.component.html',
  styleUrls: ['./gst-add.component.css']
})
export class GstAddComponent implements OnInit {

  angForm: FormGroup;
  constructor(private fb: FormBuilder, private bs: BusinessService) {
    this.createForm();
  }

  createForm() {
    this.angForm = this.fb.group({
      person_name: ['', Validators.required ],
      business_name: ['', Validators.required ],
      business_gst_number: ['', Validators.required ]
    });
  }

  addBusiness(person_name, busines_name, business_gst_number) {
    this.bs.addBusiness(person_name, busines_name, business_gst_number);
  }

  ngOnInit() {
  }

}
 

Di sini, kami telah mendefinisikan fungsi dan juga mengimpor Business.service.ts mengajukan. Selanjutnya, instantiate objek di dalam konstruktor dan panggil fungsi Businsess.service.ts mengajukan.

Kami telah mengkodekan addbusiness fungsi di dalam Business.service.ts mengajukan. Sekarang, kita perlu mengkonfigurasi API backend.

Langkah 12: Buat API Backend Node.js

Di dalam folder akar sudut, buat satu folder yang disebut API dan masuk ke dalam folder itu. Ingat, ini akan menjadi proyek yang sepenuhnya terpisah dari Angular. Jadi begitu node_modules berbeda dari Angular

Buka terminal di dalam API folder dan ketik perintah berikut.

npm init -y 

Instal modul khusus node berikut.

npm install --save express body-parser cors mongoose 

Saya tidak memulai ulang server node setiap kali; Saya mengubah file. Jadi saya menginstal server nodemon. Apa itu terjadi adalah ketika saya memodifikasi server.js file, itu me -restart server node.js secara otomatis.

npm install nodemon --save-dev 

Sekarang, di dalam API folder, buat satu file yang disebut server.js mengajukan.

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose');

    const app = express();
    let port = process.env.PORT || 4000;

    const server = app.listen(function(){
        console.log('Listening on port ' + port);
    }); 

Hal berikutnya adalah menghubungkan database MongoDB dengan aplikasi Node.js kami.

Jika Anda belum menginstal database MongoDB, instal dan mulai server MongoDB.

Ketik perintah berikut untuk memulai Mongodb server.

mongod 

Jadi, sekarang, saya telah terhubung ke database.

Buat satu file yang dipanggil Db.js dalam API Folder Proyek Root. Kemudian, tulis kode berikut di dalam Db.js mengajukan.

// DB.js

module.exports = {
    DB: 'mongodb://localhost:27017/ng7crud'
 }; 

Impor ini Db.js file di dalam kami server.js file dan gunakan Perpustakaan Mongoose untuk mengatur koneksi basis data dengan Mongodb . Kami juga dapat menggunakan Mongoose untuk menyimpan data dalam database menggunakan Mongoose ORM.

Tulis kode berikut di dalam server.js file untuk menghubungkan kami Mongodb aplikasi ke Node.js server.

// server.js

const express = require('express'),
    path = require('path'),
    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('Database is connected') },
      err => { console.log('Can not connect to the database'+ err)}
    );

    const app = express();
    app.use(bodyParser.json());
    app.use(cors());
    const port = process.env.PORT || 4000;

    const server = app.listen(port, function(){
     console.log('Listening on port ' + port);
    }); 

Simpan file dan buka terminal dan mulai server node.

nodemon server 

Jadi, sekarang, Anda memiliki tiga server yang berjalan.

  1. Server Pengembangan Angular
  2. Server nodemon
  3. Server MongoDB

Ingat, ketiga server berjalan dengan baik tanpa kesalahan; Kalau tidak, aplikasi kami tidak akan berfungsi.

Langkah 13: Buat model dan rute untuk aplikasi kami.

Kita perlu membuat dua folder di dalam API akar map ditelepon rute dan model

Dalam model ‘ folder, buat satu model yang disebut Business.js

// Business.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Define collection and schema for Business
let Business = new Schema({
  person_name: {
    type: String
  },
  business_name: {
    type: String
  },
  business_gst_number: {
    type: Number
  }
},{
    collection: 'business'
});

module.exports = mongoose.model('Business', Business); 

Jadi, kami telah mendefinisikan skema kami untuk pengumpulan bisnis. Kami memiliki tiga bidang yang dipanggil Person_name, Business_Name, Business_GST_NUMBER.

Dalam rute folder, buat satu file yang disebut Business.Route.js.

Tulis kode crud di dalam Business.Route.js mengajukan.

// business.route.js

const express = require('express');
const app = express();
const businessRoutes = express.Router();

// Require Business model in our routes module
let Business = require('../models/Business');

// Defined store route
businessRoutes.route('/add').post(function (req, res) {
  let business = new Business(req.body);
  business.save()
    .then(business => {
      res.status(200).json({'business': 'business in added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

// Defined get data(index or listing) route
businessRoutes.route('/').get(function (req, res) {
    Business.find(function (err, businesses){
    if(err){
      console.log(err);
    }
    else {
      res.json(businesses);
    }
  });
});

// Defined edit route
businessRoutes.route('/edit/:id').get(function (req, res) {
  let id = req.params.id;
  Business.findById(id, function (err, business){
      res.json(business);
  });
});

//  Defined update route
businessRoutes.route('/update/:id').post(function (req, res) {
    Business.findById(req.params.id, function(err, next, business) {
    if (!business)
      return next(new Error('Could not load Document'));
    else {
        business.person_name = req.body.person_name;
        business.business_name = req.body.business_name;
        business.business_gst_number = req.body.business_gst_number;

        business.save().then(business => {
          res.json('Update complete');
      })
      .catch(err => {
            res.status(400).send("unable to update the database");
      });
    }
  });
});

// Defined delete | remove | destroy route
businessRoutes.route('/delete/:id').get(function (req, res) {
    Business.findByIdAndRemove({_id: req.params.id}, function(err, business){
        if(err) res.json(err);
        else res.json('Successfully removed');
    });
});

module.exports = businessRoutes; 

Kami telah menggunakan model Mongoose untuk menyimpan, memperbarui, dan menghapus database. Luwak adalah Orm digunakan di Mongodb database. Kami memiliki semua operasi CRUD yang diatur pada file rute; kita perlu mengimpornya di dalam server.js mengajukan.

Jadi, final kami server.js File terlihat seperti ini.

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./DB');

const businessRoute = require('./routes/business.route');
mongoose.Promise = global.Promise;
mongoose.connect(config.DB, { useNewUrlParser: true }).then(
  () => {console.log('Database is connected') },
  err => { console.log('Can not connect to the database'+ err)}
);

const app = express();
app.use(bodyParser.json());
app.use(cors());
app.use('/business', businessRoute);
const port = process.env.PORT || 4000;

const server = app.listen(port, function(){
  console.log('Listening on port ' + port);
}); 

Langkah 14: Uji fungsi data toko

Jika semua server sedang berjalan dan berjalan, Anda dapat pergi ke browser, mengisi data formulir, dan menambahkan bisnis. Anda dapat melihat sesuatu seperti ini di layar Anda jika Anda berhasil.

MEAN

Sekarang, kami dapat memeriksa database menggunakan perintah berikut.

Pertama, buka shell mongo pada tab ke -4 karena ketiga tab lainnya ditempati saat ini.

mongo 

MongoDB

Di sini, kita dapat melihat bahwa nilainya disimpan dalam database MongoDB. Ya s!! Kita punya berhasil

Sekarang, operasi yang tersisa dibaca, diperbarui, dan hapus.

Langkah 15: Tampilkan data di frontend

Dalam gst-get.component.html file, tulis kode berikut.

Person Name Business Name GST Number Actions
{{ business.person_name }} {{ business.business_name }} {{ business.business_gst_number }} Edit Delete

Sekarang, di dalam bisnis .service.ts file, kita perlu menulis fungsi mengambil data bisnis dari Mongodb database dan menampilkannya di Aplikasi Angular

// business.service.ts

getBusinesses() {
    return this
           .http
           .get(`${this.uri}`);
  } 

Kita perlu memasukkan ini Business.service.ts file dan Business.ts file di dalam gst-get .component.ts mengajukan.

Tulis kode berikut di dalam gst-get.component.ts mengajukan.

// gst-get.component.ts

import { Component, OnInit } from '@angular/core';
import Business from '../Business';
import { BusinessService } from '../business.service';

@Component({
  selector: 'app-gst-get',
  templateUrl: './gst-get.component.html',
  styleUrls: ['./gst-get.component.css']
})
export class GstGetComponent implements OnInit {

  businesses: Business[];

  constructor(private bs: BusinessService) { }

  ngOnInit() {
    this.bs
      .getBusinesses()
      .subscribe((data: Business[]) => {
        this.businesses = data;
    });
  }
}
 

Simpan file, buka browser, dan beralih ke URL ini: http: // localhost: 4200/bisnis. Anda dapat melihat daftar bisnis.

Langkah 16: Edit dan Perbarui Data

Oke, pertama, kita perlu mengambil data dari database MongoDB menggunakan _id bijaksana dan menampilkan data itu di GST-edit .component.html mengajukan.

Jadi pertama -tama, tulis kode berikut di dalam gst-edit.component.ts mengajukan.

// gst-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
import { BusinessService } from '../business.service';

@Component({
  selector: 'app-gst-edit',
  templateUrl: './gst-edit.component.html',
  styleUrls: ['./gst-edit.component.css']
})
export class GstEditComponent implements OnInit {

  business: any = {};
  angForm: FormGroup;

  constructor(private route: ActivatedRoute,
    private router: Router,
    private bs: BusinessService,
    private fb: FormBuilder) {
      this.createForm();
 }

  createForm() {
    this.angForm = this.fb.group({
        person_name: ['', Validators.required ],
        business_name: ['', Validators.required ],
        business_gst_number: ['', Validators.required ]
      });
    }


  ngOnInit() {
    this.route.params.subscribe(params => {
        this.bs.editBusiness(params['id']).subscribe(res => {
          this.business = res;
      });
    });
  }
}
 

Di sini, saat GST-Edit Component.ts render, itu akan memanggil Ngoninit metode dan kirim permintaan http ke server simpul dan mengambil data dari _Indo untuk ditampilkan di dalam gst-edit.component.html mengajukan.

Sekarang, di dalam Business.service.ts file, kita perlu mengkode EditBusiness Fungsi untuk mengirim permintaan HTTP.

// business.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BusinessService {

  uri = 'http://localhost:4000/business';

  constructor(private http: HttpClient) { }

  addBusiness(person_name, business_name, business_gst_number) {
    const obj = {
      person_name: person_name,
      business_name: business_name,
      business_gst_number: business_gst_number
    };
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }

  getBusinesses() {
    return this
           .http
           .get(`${this.uri}`);
  }

  editBusiness(id) {
    return this
            .http
            .get(`${this.uri}/edit/${id}`);
    }
}
 

Akhirnya, kita perlu menulis formulir di dalam gst-edit.component.html mengajukan.

Person Name is required.
Person Business is required.
Business GST Number is required.

Simpan file, buka halaman daftar, klik tombol Edit, dan lihat formulir yang dihuni dari database.

Anda juga dapat melihat peringatan seperti berikut. Abaikan tutorial demo ini.

Forms.js: 1193

Sepertinya Anda menggunakan NGModel pada bidang yang sama dengan FormControlName.

Dukungan untuk menggunakan properti input NGModel dan acara NGModelChange dengan

Arahan bentuk reaktif telah ditinggalkan dalam V6 sudut dan dihilangkan

dalam sudut V7.
Sekarang, perbarui data. Di dalam Business.service.ts File, kita perlu menulis fungsi yang memperbarui data.
// business.service.ts

updateBusiness(person_name, business_name, business_gst_number, id) {

    const obj = {
        person_name: person_name,
        business_name: business_name,
        business_gst_number: business_gst_number
      };
    this
      .http
      .post(`${this.uri}/update/${id}`, obj)
      .subscribe(res => console.log('Done'));
  } 

Oke, sekarang tulis updateBusiness () fungsi di dalam gst-edit.component.ts mengajukan.

// gst-edit.component.ts

updateBusiness(person_name, business_name, business_gst_number) {
   this.route.params.subscribe(params => {
      this.bs.updateBusiness(person_name, business_name, business_gst_number, params['id']);
      this.router.navigate(['business']);
}); 

Simpan file, dan Anda akan dapat memperbarui data.

Langkah 17: Hapus data.

Jadi, jika Anda tidak menemukan kesalahan pada konsol, Anda dapat berhasil memperbarui data.

Saya sudah menulis edit dan Perbarui Layanan untuk melakukan panggilan API. Jadi sampai sekarang, Buat, baca, perbarui lengkap dari ini Contoh CRUD Angular . Sekarang, lihatlah Menghapus

Kita perlu menentukan acara klik pada tombol hapus di dalam gst-get.component.html mengajukan.


          {{ business.person_name }}
          {{ business.business_name }}
          {{ business.business_gst_number }}
          Edit
          Delete
 

Sekarang, tulis Fungsi DeleteBusiness di dalam gst-get .component.ts mengajukan.

// gst-get.component.ts

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

Akhirnya, buat deleteBusiness () fungsi di dalam Business.service.ts mengajukan.

// business.service.ts

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

Akhirnya, saya menyelesaikan fungsionalitas hapus.

Jadi, dalam tutorial ini, kami telah menyelesaikan Fungsionalitas CRUD dalam sudut.

Kode GitHub

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *