La combinaison du framework Java et du framework Angular front-end

Réponse : le framework backend Java et le framework frontend Angular peuvent être intégrés pour fournir une combinaison puissante pour créer des applications Web modernes. Étapes : Créez un projet backend Java, sélectionnez les dépendances Spring Web et Spring Data JPA. Définir les interfaces du modèle et du référentiel. Créez un contrôleur REST et fournissez des points de terminaison. Créez un projet angulaire. Ajoutez une dépendance Java Spring Boot. Configurez CORS. Intégrez Angular dans les composants angulaires.

Intégration de Java Backend Framework et Angular Frontend Framework

Java Backend Framework et Angular Frontend Framework sont une combinaison puissante pour créer des applications Web modernes. Cet article présentera comment intégrer le framework Java et le framework Angular, y compris des cas pratiques de Spring Boot et Angular.

Étapes :

1. Créez un projet backend Java

Créez un projet Spring Boot à l'aide de Spring Initializr, sélectionnez les dépendances suivantes :

• Spring Web
• Spring Data JPA

2. Modèles et référentiels

Créez l'entité Product dans le package de modèle et définissez une interface de référentiel ProductRepository.

3. Créez un contrôleur REST

Créez un ProductController dans le package du contrôleur et fournissez des points de terminaison REST pour interagir avec l'entité Product.

4. Créer un projet Angular

Exécutez la commande suivante dans le dossier du projet pour créer un projet Angular :

ng new [project-name]

5. Ajoutez une dépendance Java Spring Boot

Dans le fichier package.json du projet Angular. , ajoutez les dépendances Java de Spring Boot :

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

6. Configurez CORS

Dans l'application Spring Boot, configurez le partage de ressources cross-origine (CORS) dans la configuration de la sécurité Web :

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

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

}

7. Intégrez Angular

dans Angular. Components , utilisez le point de terminaison fourni par le service Java Spring Boot. L'exemple suivant montre comment obtenir la liste des produits à partir de 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;
    });
  }
}

Cas pratique : Spring Boot et Angular

Ce cas pratique crée une application simple de gestion de produits.

• Backend : Spring Boot est utilisé pour créer une API RESTful pour gérer les produits.
• Front End : Angular est utilisé pour créer l'interface utilisateur qui permet aux utilisateurs de visualiser et de créer des produits.

Exécutez l'application :

1. Dans le projet Java, exécutez mvn spring-boot:run. mvn spring-boot:run。
2. 在Angular项目中，运行ng serve
Dans le projet Angular, exécutez ng serve.

L'application s'exécutera sur le port configuré (8080 par défaut). Vous pouvez consulter la liste des produits en visitant l'URL suivante : http://localhost:4200/products. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!