答案：Java后端框架和Angular前端框架可集成，提供構(gòu)建現(xiàn)代Web應(yīng)用程序的強(qiáng)大組合。步驟：創(chuàng)建Java后端項(xiàng)目，選擇Spring Web和Spring Data JPA依賴項(xiàng)。定義模型和存儲(chǔ)庫(kù)接口。創(chuàng)建REST控制器，提供端點(diǎn)。創(chuàng)建Angular項(xiàng)目。添加Spring Boot Java依賴項(xiàng)。配置CORS。在Angular組件中集成Angular。

Java后端框架與Angular前端框架的集成

Java后端框架和Angular前端框架是構(gòu)建現(xiàn)代Web應(yīng)用程序的強(qiáng)大組合。本文將介紹如何將Java框架與Angular框架集成，包括Spring Boot與Angular的實(shí)戰(zhàn)案例。

步驟：

1. 創(chuàng)建Java后端項(xiàng)目

使用Spring Initializr創(chuàng)建一個(gè)Spring Boot項(xiàng)目，選擇以下依賴項(xiàng)：

• Spring Web
• Spring Data JPA

2. 定義模型和存儲(chǔ)庫(kù)

在模型包中創(chuàng)建Product實(shí)體，并定義一個(gè)ProductRepository存儲(chǔ)庫(kù)接口。

3. 創(chuàng)建REST控制器

在控制器包中創(chuàng)建ProductController，提供REST端點(diǎn)來(lái)與Product實(shí)體交互。

4. 創(chuàng)建Angular項(xiàng)目

在項(xiàng)目文件夾中運(yùn)行如下命令創(chuàng)建Angular項(xiàng)目：

ng new [project-name]

5. 添加Spring Boot Java依賴

在Angular項(xiàng)目的package.json文件中，添加Spring Boot Java依賴項(xiàng)：

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

6. 配置CORS

在Spring Boot應(yīng)用程序中，在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服務(wù)提供的端點(diǎn)。以下示例顯示了如何從ProductController獲取產(chǎn)品列表：

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;
    });
  }
}

實(shí)戰(zhàn)案例：Spring Boot與Angular

本實(shí)戰(zhàn)案例創(chuàng)建一個(gè)簡(jiǎn)單的產(chǎn)品管理應(yīng)用程序。

• 后端：Spring Boot用于創(chuàng)建一個(gè)RESTful API來(lái)管理產(chǎn)品。
• 前端：Angular用于創(chuàng)建用戶界面，允許用戶查看和創(chuàng)建產(chǎn)品。

運(yùn)行應(yīng)用程序：

1. 在Java項(xiàng)目中，運(yùn)行mvn spring-boot:run。
2. 在Angular項(xiàng)目中，運(yùn)行ng serve。

該應(yīng)用程序?qū)⒃谝雅渲玫亩丝冢J(rèn)為8080）上運(yùn)行。您可以訪問(wèn)以下URL查看產(chǎn)品列表：http://localhost:4200/products。

以上是Java框架與前端Angular框架的結(jié)合的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！