AngularとAngularJSフレームワークを並べて実行する

Question

Angular（2）コンポーネントをAngularJSに統合する方法を説明しているリソースが見つかりましたが、これらはAngularプロジェクトのようにAngularJSプロジェクトを設定し、 ES6が必要であり、インポートステートメントが必要です。 AngularJSアプリケーションでAngularコンポーネントを使用するだけで、既存のワークフローを中断する必要はありません。これは可能なのですか？もしそうなら、どうしたら実装できますか？私はこれがアップグレードモジュールの目的だと思っていましたが、私が見たチュートリアルでは、AngularJSアプリケーションにインポートステートメントが必要です。 Angularアプリケーションを事前に蒸散させる必要がある場合、それは問題ありませんが、AngularJSアプリケーションはDjangoサーバ上で実行されているため、蒸散できません。また、別のサーバをtranspilerで実行したくありません。

明らかに、私の現在のAngularJSアプリケーションはdjangoによって提供されています。 Angularコンポーネントをいくつか含める必要があります。これらは開発中には触られないので、ワークフローに影響を与えることなく、事前に蒸散させることができます。これらのコンポーネントをAngularJSアプリに追加する方法はありますか？

Answer 1

AngularJSアプリケーションをAngularに段階的にアップグレードします。

正常なアップグレードの鍵の1つは、同じアプリケーションに2つのフレームワークを並べて並べて実行し、AngularJSコンポーネントを1つずつAngularに移植することです。これにより、他のビジネスを混乱させることなく大規模かつ複雑なアプリケーションをアップグレードすることが可能になります。 Angularのupgradeモジュールは、段階的なアップグレードをシームレスに行うように設計されています。詳細については

は、Angular 2+ can't find Angular 1.X to bootstrap

---

は私がtranspilerで別のサーバーを実行したくない、Angular Developer Guide - Upgrading from AngularJS

もDEMO on PLNKR

参照してくださいを参照してください。

試してみてください。何もインストールせずにこの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で行うことができるものは、タイプスクリプトで行うことができますが、JavaScriptでも行うことができます。ある言語から別の言語への翻訳は、主にコードを整理し、Angular APIにアクセスする方法を変更することです。詳細については

、単に明確にするためAngular Developer Cookbook - TypeScript to JavaScript