并排运行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。

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

欲了解更多信息，请参阅Angular Developer Guide - Upgrading from AngularJS

也DEMO on PLNKR

见，Angular 2+ can't find Angular 1.X to bootstrap

---

我不想跑了transpiler另一台服务器。

试试这个QuickStart example on Plunker无需安装任何东西。

该译码器可以运行在客户端。这是可能的，但不建议。

<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 v2 TypeScript QuickStart

---

转换角度打字稿例子为ES6和ES5的JavaScript。

你可以用Angular做什么TypeScript，你也可以用JavaScript做。从一种语言到另一种语言的翻译主要是改变组织代码和访问Angular API的方式。

欲了解更多信息，请参阅Angular Developer Cookbook - TypeScript to JavaScript