能否在单个.js文件中同时编写AngularJS 1.6.x与Angular 2代码？

当然可以！不过要重点处理全局命名空间冲突——AngularJS默认暴露angular全局变量，而早期Angular 2的UMD构建包会使用ng作为全局标识，只要做好作用域隔离，就能让二者和平共处。下面是具体的实现方案，适合你探索共存思路：

核心思路 #

要让两个框架在单个文件里共存，关键要做到三点：

• 用作用域隔离（比如立即执行函数）避免变量污染
• 按正确顺序加载框架代码（先AngularJS，后Angular 2）
• 保持两个应用的逻辑独立，避免不必要的交叉调用

具体执行步骤 #

1. 封装AngularJS代码，隔离全局作用域 #

我们可以用立即执行函数（IIFE）把AngularJS的代码包裹起来，既保留它的功能，又避免全局变量冲突。如果需要全局访问AngularJS实例，也可以自定义别名：

// 用IIFE包裹AngularJS代码，隔离作用域
(function(angular) {
  // 这里写AngularJS 1.6.x的业务代码
  angular.module('myAngularJSApp', [])
    .controller('MyJSController', function($scope) {
      $scope.greeting = 'Hi from AngularJS 1.6!';
    });
})(window.angular); // 传入全局的angular变量，内部使用别名操作

2. 封装Angular 2代码，避免冲突 #

Angular 2本身基于模块化设计，编译后的UMD版本会使用ng作为全局标识，和AngularJS的angular不冲突，但用IIFE包裹会更安全。下面是单个文件里的Angular 2示例代码：

// 用IIFE包裹Angular 2代码，隔离作用域
(function() {
  // 从Angular 2的UMD全局对象中解构需要的API
  const { Component, NgModule, bootstrap } = ng.core;
  const { BrowserModule } = ng.platformBrowser;

  // 定义Angular 2组件
  @Component({
    selector: 'angular2-app',
    template: '<h2>{{greeting}}</h2>'
  })
  class Angular2Component {
    greeting = 'Hi from Angular 2!';
  }

  // 定义Angular 2模块
  @NgModule({
    imports: [BrowserModule],
    declarations: [Angular2Component],
    bootstrap: [Angular2Component]
  })
  class Angular2Module {}

  // 启动Angular 2应用
  bootstrap(Angular2Module);
})();

3. 在HTML中分别挂载两个应用 #

在同一个HTML页面里，给两个框架指定各自的挂载节点，就能同时渲染两个应用：

<!-- AngularJS应用挂载点 -->
<div ng-app="myAngularJSApp" ng-controller="MyJSController">
  <h1>{{greeting}}</h1>
</div>

<!-- Angular 2应用挂载点 -->
<angular2-app></angular2-app>

注意事项 #

• 加载顺序：在单个.js文件里，必须先写AngularJS的代码，再写Angular 2的代码，确保AngularJS的全局变量先初始化，避免被覆盖。
• 避免交叉调用：如果只是探索共存，尽量不要在AngularJS代码里直接调用Angular 2的API，反之亦然。如果需要双向通信，可以用官方的@angular/upgrade工具，但那是更复杂的迁移场景。
• 生产环境建议：如果是正式项目，更推荐用Webpack、Rollup等打包工具把两个框架的代码打包到一个文件里，工具会自动处理模块依赖和作用域隔离，比手动写IIFE更可靠。

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