並排運行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