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 を作成し、Product エンティティと対話するための REST エンドポイントを提供します。

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 を統合します。コンポーネント 、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 プロジェクトで、mvn spring-boot:run を実行します。

Angular プロジェクトで、ngserve を実行します。
1. mvn spring-boot:run。
2. 在Angular项目中，运行ng serve
アプリケーションは構成されたポート (デフォルトでは 8080) で実行されます。製品リストは、URL http://localhost:4200/products にアクセスして表示できます。

以上がJava フレームワークとフロントエンド Angular フレームワークの組み合わせの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。