20

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

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

4

1 回答 1

20

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

成功升级的关键之一是渐进式地进行，通过在同一个应用程序中并排运行两个框架，并将 AngularJS 组件一个一个移植到 Angular。这使得在不中断其他业务的情况下升级甚至是大型和复杂的应用程序成为可能，因为工作可以协作完成并分散在一段时间内。Angular 中的upgrade模块旨在使增量升级无缝。

有关更多信息，请参阅Angular 2 指南 - 从 AngularJS 升级到 Angular

PLNKR 上的DEMO

也可以看看，

我不想用转译器运行另一台服务器。

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

<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>

systemjs.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 快速入门

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

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

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

于 2017-04-20T17:07:28.957 回答