Hướng dẫn spring boot angular mongodb rest api tutorial - hướng dẫn khởi động mùa xuân góc mongodb phần còn lại api

Tạo dịch vụ dữ liệu

Dịch vụ này sẽ sử dụng Angular

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

services/tutorial.service.ts/tutorial.service.ts

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

Tạo các thành phần góc

Như bạn đã biết trước đây, có 3 thành phần tương ứng với 3 tuyến được xác định trong

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

• Thêm thành phần mục mới
• Danh sách các mục thành phần
• Thành phần chi tiết vật phẩm

Bạn có thể tiếp tục từng bước để thực hiện ứng dụng góc này trong bài đăng: angular 8 crud Ứng dụng với API Web
Angular 8 CRUD Application example with Web API

Các phiên bản mới hơn: - Ví dụ về angular 10 crud với API Web - Angular 11 CRUD Ví dụ với API Web - Angular 12 CRUD Ví dụ với API Web - Angular 13 CRUD Ví dụ với API Web - Angular 14 CRUD Ví dụ với API Web
– Angular 10 CRUD example with Web API
– Angular 11 CRUD example with Web API
– Angular 12 CRUD example with Web API
– Angular 13 CRUD example with Web API
– Angular 14 CRUD example with Web API

Chạy ứng dụng Angular

Bạn có thể chạy ứng dụng này với lệnh:

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

@NgModule[{
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
}]
export class AppModule { }

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

@NgModule[{
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
}]
export class AppModule { }

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

@NgModule[{
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
}]
export class AppModule { }

Đọc thêm

• Dữ liệu mùa xuân MongoDB
• MVC Web Spring
• Góc httpclient

- Angular 8 + Spring Boot: Xác thực JWT với ví dụ về bảo mật lò xo - Angular 8 + Spring Boot + PostgreSQL Ví dụ: Ứng dụng CRUD - Angular 8 + Spring Boot: Ví dụ về tải lên tệp
– Angular 8 + Spring Boot + PostgreSQL example: CRUD App
– Angular 8 + Spring Boot: File upload example

Sự kết luận

Bây giờ chúng tôi có một cái nhìn tổng quan về Angular 8 + Spring Boot + MongoDB ví dụ khi xây dựng một ứng dụng CRUD.

Chúng tôi cũng xem xét kiến ​​trúc máy khách-máy chủ cho API REST bằng cách sử dụng Spring Web MVC & Spring DataODB, cũng như cấu trúc dự án Angular 8 để xây dựng ứng dụng Front-end để thực hiện các yêu cầu HTTP và tiêu thụ phản hồi.

Hướng dẫn tiếp theo cho bạn biết thêm chi tiết về cách triển khai hệ thống:-Back-end-Front-end:
– Back-end
– Front-end:

• Sử dụng góc 8
• Sử dụng góc 10
• Sử dụng góc 11
• Sử dụng góc 12
• Sử dụng góc 13
• Sử dụng góc 14

Bạn sẽ muốn biết cách thực hiện phân trang: Angular 8 + Spring Boot: Ví dụ về phân trang
Angular 8 + Spring Boot: Pagination example

Hoặc chạy cả hai dự án ở một nơi: Cách tích hợp Angular với API Boot Boot REST
How to Integrate Angular with Spring Boot Rest API

Máy chủ không có: Angular 8 Firebase crud thời gian thực DB | Angularfiredatabase
Angular 8 Firebase CRUD Realtime DB | AngularFireDatabase

Chúc bạn học hỏi, hãy gặp lại bạn!

Mã nguồn

Bạn có thể tìm thấy mã nguồn Github cho hướng dẫn này tại: Spring Boot + Angular Ví dụ GitHub