如何在不重新设计全应用的前提下集成Angular 4与Ruby on Rails 3？

Hey there! I’ve been in similar situations where you want to modernize a legacy Rails app without throwing everything away, so let’s walk through how to integrate Angular 4 into your Rails 3 app step by step—no full rewrite required.

Don’t try to convert your entire app at once. Pick a self-contained feature (like a user profile page, a dashboard widget, or a form) to migrate first. This lets you test the integration without disrupting your existing user base, and you can expand to other modules as you get comfortable.

Your app doesn’t have an API right now, but you don’t need to build a full REST API overnight. Just add endpoints for the specific features you’re migrating:

• Create a namespaced API controller to avoid conflicts with your existing backend-rendered controllers:

  # Generate a controller for your target resource (e.g., users)
  rails generate controller api/v1/users show --skip-assets --skip-helper
  

• Update the controller to return JSON responses. Note: In production, replace the skip_before_action with proper authentication (like JWT or Devise Token Auth) instead of disabling CSRF protection:

  class Api::V1::UsersController < ApplicationController
    skip_before_action :verify_authenticity_token, only: [:show] # Temp for development
    before_action :authenticate_user! # Use your existing auth logic here
  
    def show
      @user = current_user
      respond_to do |format|
        format.json { render json: @user, only: [:id, :name, :email, :created_at] }
      end
    end
  end
  

• Add routes for your API in config/routes.rb:

  namespace :api do
    namespace :v1 do
      resources :users, only: [:show]
    end
  end
  

You can drop Angular components directly into your existing Rails templates without replacing the entire frontend:

• Set up an Angular 4 project (use Angular CLI) either inside your Rails app (e.g., a frontend/ directory) or as a separate repo. Compile it with ng build --prod to get static assets.
• Include the compiled Angular JS/CSS files in your Rails layout or specific view. For example, in app/views/layouts/application.html.erb:

  <% if content_for?(:angular_assets) %>
    <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.4/core.js' %> <!-- Angular polyfill -->
    <%= javascript_include_tag '/frontend/dist/main.js' %>
    <%= stylesheet_link_tag '/frontend/dist/styles.css' %>
  <% end %>
  

• In the Rails view where you want the Angular component, add a placeholder and pass any needed data via data-* attributes:

  <!-- app/views/users/profile.html.erb -->
  <% content_for :angular_assets do %>
    <!-- This tells the layout to load Angular assets for this page -->
  <% end %>
  
  <h1>Your Profile</h1>
  <!-- Existing Rails-rendered content here -->
  
  <!-- Angular component placeholder -->
  <div id="angular-profile" data-user-id="<%= current_user.id %>"></div>
  

• In your Angular app, bootstrap the component targeting the placeholder:

  // src/main.ts
  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  // Only bootstrap if the placeholder exists on the page
  const profileElement = document.getElementById('angular-profile');
  if (profileElement) {
    platformBrowserDynamic().bootstrapModule(AppModule);
  }
  

• Fetch the Rails API data in your Angular component using the data-* attribute:

  // src/app/profile/profile.component.ts
  import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html'
  })
  export class ProfileComponent implements OnInit {
    user: any;
  
    constructor(private http: HttpClient) { }
  
    ngOnInit() {
      const userId = document.getElementById('angular-profile').getAttribute('data-user-id');
      this.http.get(`/api/v1/users/${userId}`).subscribe(
        data => this.user = data,
        error => console.error('Failed to fetch user data:', error)
      );
    }
  }
  

Since your app’s styles are backend-rendered, keep consistency by:

• Importing your existing Rails styles (e.g., SCSS variables, mixins) into Angular’s global styles.scss to share design tokens.
• Letting Angular components inherit global styles initially, then gradually moving component-specific styles into Angular’s component stylesheets as needed.
• Testing the embedded component alongside existing Rails-rendered content to ensure no visual clashes.

You don’t need to rebuild auth from scratch—your Rails session will work with the API:

• Rails automatically includes session cookies in API requests from the same domain, so your authenticate_user! logic will still work for API endpoints.
• Avoid storing sensitive auth data in Angular; let Rails handle session management like it already does.

• Use Rails system tests (or Capybara) to verify that the embedded Angular component works alongside existing features.
• Test API endpoints with tools like Postman to ensure they return the correct data.
• Monitor performance after each migration to make sure the added Angular code doesn’t slow down your app.

This approach lets you modernize parts of your app while keeping the stable, well-tested Rails code you’ve built over five years. You can expand to more modules as you see fit!

内容的提问来源于stack exchange，提问作者Cesar Castillo