如何结合Angular(5.2)路由与AngularJS(1.3.19)的angular-ui-router？

嘿，我完全懂你现在的难处——抱着一堆AngularJS 1.3.19的遗留代码，没法用ng-upgrade，还要让新Angular路由和老的ui-router和平共处，同时还要复用老的服务和控制器，确实挺棘手的。我整理了几个实践过的解决方案，你可以一步步试试：

核心思路是给两个路由系统划分明确的路径职责，同时拦截彼此的路由干扰。

1. 给路由设置专属前缀 #

先约定好路径规则：

• AngularJS ui-router 负责 /legacy/** 下的所有遗留页面
• Angular 路由负责 /new/** 下的所有新页面

修改AngularJS ui-router配置 #

重点是修改$urlRouterProvider的规则，让它只处理非/new开头的路径，避免触发otherwise()覆盖Angular的路由：

angular.module('legacyApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    // 配置遗留路由
    $stateProvider
      .state('legacy.dashboard', {
        url: '/legacy/dashboard',
        templateUrl: 'legacy-dashboard.html',
        controller: 'LegacyDashboardCtrl'
      })
      // 其他遗留路由...

    // 自定义路由规则，替代默认的otherwise
    $urlRouterProvider.rule(function($injector, $location) {
      const currentPath = $location.path();
      // 如果是Angular负责的路径，直接跳过AngularJS路由处理
      if (currentPath.startsWith('/new')) {
        return false;
      }
      // 原来的otherwise逻辑只处理非/new的路径
      if (currentPath === '' || currentPath === '/') {
        return '/legacy/dashboard';
      }
      // 其他未知路径跳转到遗留首页
      return '/legacy/dashboard';
    });
  });

修改Angular路由配置 #

让Angular路由只处理/new前缀的路径，其他路径可以跳转回遗留系统或者新系统首页：

const routes: Routes = [
  { path: 'new/dashboard', component: NewDashboardComponent },
  { path: 'new/profile', component: NewProfileComponent },
  // 其他新路由...
  { path: '**', redirectTo: '/new/dashboard' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

页面容器按需渲染 #

在index.html里，根据当前路径前缀渲染对应的根容器：

<!-- AngularJS遗留系统容器 -->
<div ng-app="legacyApp" ng-if="!isNewRoute()">
  <div ui-view></div>
</div>

<!-- Angular新系统根组件 -->
<app-root ng-if="isNewRoute()"></app-root>

这里的isNewRoute()可以写在AngularJS的根控制器里，用来判断路径：

angular.module('legacyApp')
  .controller('RootLegacyCtrl', function($scope, $location) {
    $scope.isNewRoute = function() {
      return $location.path().startsWith('/new');
    };
  });

2. 拦截路由变化事件，避免互相干扰 #

在AngularJS里监听$locationChangeStart事件，当路径是Angular负责的前缀时，阻止AngularJS处理：

angular.module('legacyApp')
  .run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeStart', function(event, newUrl) {
      const newPath = new URL(newUrl).pathname;
      if (newPath.startsWith('/new')) {
        event.preventDefault(); // 阻止AngularJS路由接管
        // 手动更新浏览器历史，让Angular路由检测到变化
        window.history.pushState({}, '', newUrl);
        // 通知Angular路由刷新（可选，如果Angular没自动检测到）
        if (window.angularRouterInstance) {
          window.angularRouterInstance.navigateByUrl(newPath);
        }
      }
    });
  });

在Angular的根组件里，把Router实例临时挂到全局（仅用于这种特殊场景）：

import { Router } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private router: Router) {
    // 暴露Router实例到全局，供AngularJS调用
    (window as any).angularRouterInstance = router;
  }
}

你提到要通过scope()和injector()复用老代码，这里有具体的实现方式：

1. 获取AngularJS的Injector实例 #

先在Angular里创建一个桥接服务，用来获取AngularJS的注入器：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LegacyBridgeService {
  private ng1Injector: any;

  constructor() {
    // 获取AngularJS应用的注入器（假设ng-app容器已经存在）
    const ng1RootElement = document.querySelector('[ng-app]');
    this.ng1Injector = angular.element(ng1RootElement).injector();
  }

  // 获取AngularJS服务
  getLegacyService(serviceName: string) {
    return this.ng1Injector.get(serviceName);
  }

  // 创建并获取AngularJS控制器的scope
  createLegacyController(ctrlName: string, customScope?: any) {
    // 可以传入自定义scope，或者创建新的子scope
    const ng1Scope = customScope || this.ng1Injector.get('$rootScope').$new();
    // 实例化控制器
    this.ng1Injector.get('$controller')(ctrlName, { $scope: ng1Scope });
    return ng1Scope;
  }
}

2. 在Angular组件中复用控制器与服务 #

比如在Angular组件里复用一个老的用户控制器：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { LegacyBridgeService } from './legacy-bridge.service';

@Component({
  selector: 'app-legacy-user-wrapper',
  template: `
    <div>用户名称：{{ legacyScope.user.name }}</div>
    <button (click)="legacyScope.updateUser()">更新用户</button>
  `
})
export class LegacyUserWrapperComponent implements OnInit, OnDestroy {
  legacyScope: any;

  constructor(private legacyBridge: LegacyBridgeService) {}

  ngOnInit() {
    // 创建并获取AngularJS控制器的scope
    this.legacyScope = this.legacyBridge.createLegacyController('LegacyUserCtrl');
    
    // 监听scope变化，同步到Angular组件（可选）
    this.legacyScope.$watch('user', (newUser) => {
      console.log('用户信息更新：', newUser);
    }, true);
  }

  ngOnDestroy() {
    // 销毁AngularJS的scope，避免内存泄漏
    this.legacyScope.$destroy();
  }
}

如果要复用服务，直接调用getLegacyService即可：

// 在组件或服务里
const legacyAuthService = this.legacyBridge.getLegacyService('AuthService');
const currentUser = legacyAuthService.getCurrentUser();

• 内存泄漏防范：每次创建的AngularJS scope，一定要在Angular组件销毁时调用$destroy()，避免内存堆积。
• 路径同步问题：如果遇到Angular路由跳转后AngularJS没感知到（或者反过来），可以通过自定义事件（比如window.dispatchEvent）来同步状态，比全局变量更优雅。
• 兼容性测试：AngularJS 1.3.19版本比较老，要测试复用服务/控制器时的兼容性，比如某些老的依赖注入写法是否正常。

内容的提问来源于stack exchange，提问作者Pistolpete .