angularjs - 同时运行 Angular 和 AngularJS 框架

Question

我找到了描述如何将 Angular (2) 组件集成到 AngularJS 中的资源，但所有这些都涉及像 Angular 项目一样设置 AngularJS 项目，需要来自 TypeScript 的转译器，需要 ES6，需要导入语句。我只想在我的 AngularJS 应用程序中使用 Angular 组件，而不会中断我现有的工作流程。这可能吗？如果可以，我该如何实现？我以为这就是升级模块的目的，但我看到的所有教程都需要 AngularJS 应用程序中的 import 语句，这需要一个转译器。如果 Angular 应用程序需要提前转译，那没问题，但是 AngularJS 应用程序无法转译，因为它运行在 django 服务器上，我不想运行另一个带有转译器的服务器。

需要说明的是，我当前的 AngularJS 应用程序由 django 提供服务。我想包含一些 Angular 组件。这些在开发过程中不会被触及，因此可以在不影响工作流程的情况下提前转译它们。有没有办法在不向 AngularJS 应用程序添加转译器的情况下将这些组件添加到 AngularJS 应用程序中？

Answer 1

将 AngularJS 应用程序增量升级到 Angular。

One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The upgrade module in Angular has been designed to make incremental upgrading seamless.

有关详细信息，请参阅 Angular 2 Guide - Upgrading from AngularJS to Angular

DEMO on PLNKR

另见，

• Migrating AngularJS to Angular 4,5 (with DEMO)

---

I don't want to run another server with a transpiler.

转译器可以在客户端运行。这是可能的，但不推荐。

<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
  System.import('main.js').catch(function(err){ console.error(err); });
</script>

系统js.config.js

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      // Copy of compiler options in standard tsconfig.json
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": ["es2015", "dom"],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      // paths serve as alias
      'npm:': 'https://unpkg.com/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs@5.0.1',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts',
        meta: {
          './*.ts': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });

})(this);

有关详细信息，请参阅 Angular 2 TypeScript QuickStart

---

将 Angular TypeScript 示例转换为 ES6 和 ES5 JavaScript。

任何您可以在 TypeScript 中使用 Angular 完成的事情，您也可以在 JavaScript 中完成。从一种语言翻译成另一种语言主要是改变组织代码和访问 Angular API 的方式。

有关详细信息，请参阅 Angular 2 Developer Cookbook - TypeScript to JavaScript