Angular新手：如何从传统前端+Spring MVC项目逐步迁移单页？

Hey there! Let's break down a practical, step-by-step plan to migrate a single page from your legacy JS/HTML/CSS app to Angular—perfect for your situation where you're still getting up to speed with Angular and can't rewrite the entire large project at once.

1. First: Map Out the Target Page's Requirements #

Before writing any Angular code, take time to reverse-engineer exactly what the page does:

• List all REST API endpoints it calls (check existing XHR/fetch calls in the legacy JS) — since your backend is Spring MVC RESTful, these should integrate smoothly with Angular's HttpClient.
• Identify key UI components (forms, data tables, modals, navigation) and how they interact with each other.
• Note any dependencies on legacy libraries (jQuery, custom utility functions) or global state variables — you'll need to either replace these with Angular equivalents or temporarily bridge them.

2. Set Up a Minimal Angular Project #

Since you're new to Angular, start with a simple setup:

• Create a new Angular app using ng new angular-page-migration --routing=false (skip routing for now to keep things simple).
• Integrate this into your existing project's workflow:
  • If you use a bundler like Webpack, configure it to compile the Angular code and output bundles alongside your legacy assets.
  • For a simpler setup, run ng build --prod to generate production-ready bundles, then copy the main.js, polyfills.js, and styles.css from the dist folder into your project's static assets directory.

3. Recreate the Page in Angular #

Build out the page using Angular's core features, keeping things straightforward as you learn:

• Split the UI into small, reusable components (e.g., app-user-form, app-order-table) — this makes maintenance easier later.
• Use Angular's HttpClient to call your existing Spring APIs. Example code for a service:

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class DataService {
    constructor(private http: HttpClient) {}
  
    getOrders(): Observable<any[]> {
      return this.http.get<any[]>('/api/orders'); // Match your existing endpoint
    }
  }
  

• Manage state at the component level or with a simple service (no need for complex state management like NgRx yet for a single page).

4. Embed the Angular App into the Legacy Page #

Now, replace the legacy page's content with your Angular app:

• In the legacy HTML file, replace the existing page content with a placeholder div:

  <!-- Legacy page HTML -->
  <div id="angular-page-root"></div>
  

• Update your Angular AppComponent's selector to target this div (or keep the default app-root and rename the placeholder). Then adjust main.ts to bootstrap the app correctly:

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

• Load the Angular bundles in the legacy page's <head> or before the closing </body> tag:

  <script src="/assets/angular/polyfills.js"></script>
  <script src="/assets/angular/main.js"></script>
  

5. Bridge Legacy and Angular (If Necessary) #

If the page relies on legacy code, you can create temporary bridges:

• Access legacy global variables/functions from Angular using the window object:

  // In an Angular component
  const legacyUser = (window as any).currentUser;
  (window as any).legacyUtils.showNotification('Data loaded');
  

• Expose Angular functionality to legacy code by attaching component instances to window:

  // In your Angular component's ngOnInit
  (window as any).angularPage = this;
  
  // Then call it from legacy JS: window.angularPage.refreshData();
  

• For shared styles: Either copy legacy CSS into Angular's styles.css or add the legacy CSS files to the styles array in angular.json.

6. Test Rigorously #

• Test end-to-end: Verify all API calls work, form submissions handle correctly, and the UI matches the legacy page's behavior.
• Check for conflicts: Ensure legacy scripts don't interfere with Angular (e.g., no global variable name clashes).
• Use Angular's dev tools (like the Angular DevTools browser extension) to debug component state and API requests.

7. Iterate and Document #

• Once the page is working, replace any remaining legacy dependencies with Angular features (e.g., use Angular Reactive Forms instead of jQuery form plugins).
• Document your migration process — this will make migrating future pages much faster.

内容的提问来源于stack exchange，提问作者Ravindra Nalawade