Angular1.x + Rails5.0.1：如何为两个Angular应用配置不同路由

嘿，作为Angular 1.x新手，能想到拆分路由来隔离普通用户和管理员的功能，这个思路非常棒！结合你的Rails 5.0.1后端，我们可以通过Rails路由分流+Angular路由文件按需加载的方式来实现，具体步骤如下：

第一步：配置Rails后端的路由与控制器 #

首先让Rails根据访问路径区分请求，把/admin开头的请求导向管理员专属视图，普通请求导向用户视图：

1. 编辑Rails路由文件 #

打开config/routes.rb，添加以下路由规则：

Rails.application.routes.draw do
  # 普通用户路由：根路径和/client下的所有请求都指向Client控制器的index动作
  root 'client#index'
  get '/client/*path', to: 'client#index'

  # 管理员路由：/admin下的所有请求都指向Admin控制器的index动作
  get '/admin/*path', to: 'admin#index'
end

2. 创建对应的Rails控制器 #

分别创建普通用户和管理员的控制器，管理员控制器还可以加权限验证（比如Devise的authenticate_admin!）：

# app/controllers/client_controller.rb
class ClientController < ApplicationController
  def index
  end
end

# app/controllers/admin_controller.rb
class AdminController < ApplicationController
  # 可选：添加管理员权限验证，只有登录的管理员才能访问
  before_action :authenticate_admin!

  def index
  end
end

第二步：组织Angular文件结构 #

把普通用户和管理员的路由、控制器等资源分开存放，保持项目结构清晰：

app/assets/javascripts/
├── app.js                  # Angular主模块
├── client/
│   ├── index.routes.js     # 普通用户路由配置
│   └── controllers/        # 普通用户控制器
└── admin/
    ├── index.routes.js     # 管理员路由配置
    └── controllers/        # 管理员控制器

1. 编写Angular主模块 #

在app.js里定义共享的主模块，依赖ngRoute（别忘了在视图里加载angular-route.js）：

angular.module('myApp', ['ngRoute']);

2. 编写普通用户路由 #

在client/index.routes.js里配置普通用户的路由规则：

angular.module('myApp')
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: '/assets/client/views/home.html',
        controller: 'ClientHomeCtrl'
      })
      // 添加更多普通用户路由...
      .otherwise({ redirectTo: '/' });
  });

3. 编写管理员路由 #

在admin/index.routes.js里配置管理员的路由，注意路径前缀用/admin：

angular.module('myApp')
  .config(function($routeProvider) {
    $routeProvider
      .when('/admin', {
        templateUrl: '/assets/admin/views/dashboard.html',
        controller: 'AdminDashboardCtrl'
      })
      .when('/admin/users', {
        templateUrl: '/assets/admin/views/users.html',
        controller: 'AdminUsersCtrl'
      })
      // 添加更多管理员路由...
      .otherwise({ redirectTo: '/admin' });
  });

第三步：配置Rails视图，按需加载路由文件 #

创建两个独立的视图文件，分别加载对应角色的Angular资源：

1. 普通用户视图（app/views/client/index.html.erb） #

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <!-- 加载Angular核心库和路由模块 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
  
  <!-- 加载Angular主模块 -->
  <script src="/assets/app.js"></script>
  
  <!-- 加载普通用户的控制器和路由 -->
  <script src="/assets/client/controllers/home.js"></script>
  <script src="/assets/client/index.routes.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

2. 管理员视图（app/views/admin/index.html.erb） #

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <!-- 共享的Angular核心库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
  
  <!-- 加载Angular主模块 -->
  <script src="/assets/app.js"></script>
  
  <!-- 加载管理员的控制器和路由 -->
  <script src="/assets/admin/controllers/dashboard.js"></script>
  <script src="/assets/admin/controllers/users.js"></script>
  <script src="/assets/admin/index.routes.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

最后几点注意事项 #

• 资产管道配置：不要在application.js里requireclient/index.routes.js或admin/index.routes.js，让视图单独加载，避免冲突。
• 权限验证：管理员控制器里的before_action一定要加上，防止普通用户直接访问/admin路径。
• 路由冲突：确保管理员路由都以/admin开头，和普通用户路由完全区分开，避免跳转混乱。

这样配置后，普通用户访问根路径或/client下的页面时，会加载普通用户的路由；管理员访问/admin下的页面时，会加载管理员专属的路由，完美实现你的需求！

内容的提问来源于stack exchange，提问作者Talha Junaid