Java框架與前端Angular框架的結合

答案：Java後端框架和Angular前端框架可集成，提供建立現代Web應用程式的強大組合。步驟：建立Java後端項目，選擇Spring Web和Spring Data JPA相依性。定義模型和儲存庫介面。建立REST控制器，提供端點。創建Angular專案。新增Spring Boot Java相依性。配置CORS。在Angular元件中整合Angular。

Java後端框架與Angular前端框架的整合

##Java後端框架與Angular前端架構是建構現代Web應用程式的強大組合。本文將介紹如何將Java框架與Angular框架集成，包括Spring Boot與Angular的實戰案例。

步驟：

1. 建立Java後端項目

使用Spring Initializr建立一個Spring Boot項目，選擇以下依賴項：

Spring Web
• Spring Data JPA

#2.定義模型與儲存庫

在模型包中建立Product實體，並定義一個ProductRepository儲存庫介面。

3. 建立REST控制器

在控制器套件中建立ProductController，提供REST端點來與Product實體互動。

4. 建立Angular專案

在專案資料夾中執行如下指令建立Angular專案：

ng new [project-name]

5. 新增Spring Boot Java依賴

在Angular專案的package.json檔案中，新增Spring Boot Java依賴項：

"dependencies": {
  ...
  "spring-boot": "^2.6.6",
  ...
}

6. 配置CORS

#在Spring Boot應用程式中，在Web安全性配置中配置跨域資源共享（CORS）：

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
            ...
    }

}

7. 整合Angular

在Angular元件中，使用Spring Boot Java服務提供的端點。以下範例顯示如何從ProductController取得產品清單：

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products: Product[];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<Product[]>('/api/products').subscribe(products => {
      this.products = products;
    });
  }
}

實戰案例：Spring Boot與Angular

本實戰案例建立一個簡單的產品管理應用程式。

• 後端：Spring Boot用來建立一個RESTful API來管理產品。
• 前端：Angular用於建立使用者介面，允許使用者查看和建立產品。

執行應用程式：

在Java專案中，執行
1. mvn spring-boot:run。
在Angular專案中，執行
2. ng serve。

該應用程式將在已配置的連接埠（預設為8080）上執行。您可以造訪以下URL查看產品清單：http://localhost:4200/products。

以上是Java框架與前端Angular框架的結合的詳細內容。更多資訊請關注PHP中文網其他相關文章！