Angular und AngularJS Frameworks nebeneinander ausführen

Ich habe Ressourcen gefunden, die beschreiben, wie Angular (2) -Komponenten in AngularJS integriert werden können, aber alle haben das AngularJS-Projekt wie ein Angular-Projekt aufgebaut, das einen Transpiler aus TypeScript erfordert, der ES6 erfordert und Importanweisungen erfordert. Ich möchte einfach angularkomponenten in meiner AngularJS-Anwendung verwenden, ohne den bestehenden Workflow zu stören. Ist das möglich und wenn ja, wie implementiere ich es? Ich dachte, dass dies der Zweck des Upgrade-Moduls ist, aber alle Tutorials, die ich gesehen habe, erfordern Import-statementen in der AngularJS-Anwendung, die einen Transpiler erfordert. Wenn die Angular-Anwendung im Voraus übertragen werden muss, ist das in Ordnung, aber die AngularJS-Anwendung kann nicht übertragen werden, da sie auf einem Django-Server ausgeführt wird, und ich möchte keinen anderen Server mit einem Transpiler ausführen.

Um es klar zu sagen, meine aktuelle AngularJS-Anwendung wird von Django bedient. Ich möchte einige eckige Komponenten einbeziehen. Diese werden während der Entwicklung nicht berührt, sodass sie im Voraus ohne Auswirkungen auf den Arbeitsablauf transpiliert werden können. Gibt es eine Möglichkeit, diese Komponenten in die AngularJS App hinzuzufügen, ohne einen Angreifer zur AngularJS App hinzuzufügen?

   

    Erhöhen Sie inkrementell eine AngularJS-Anwendung auf Angular.

    Einer der Schlüssel für ein erfolgreiches Upgrade besteht darin, es inkrementell auszuführen, indem die beiden Frameworks nebeneinander in derselben Anwendung ausgeführt werden und AngularJS-Komponenten einzeln nach Angular portiert werden. Dies macht es möglich, auch große und komplexe Anwendungen zu aktualisieren, ohne andere Geschäftsbereiche zu stören, da die Arbeit kollaborativ durchgeführt und über einen Zeitraum verteilt werden kann. Das upgrade Modul in Angular wurde entwickelt, um eine stufenlose Aktualisierung nahtlos durchzuführen.

    Weitere Informationen finden Sie unter Angular 2 Guide – Upgrade von AngularJS auf Angular

    Die DEMO auf PLNKR

    Siehe auch,

    • Migrieren von AngularJS zu Angular 4,5 (mit DEMO)

    Ich möchte keinen anderen Server mit einem Transpiler laufen lassen.

    Der transpiler kann clientseitig ausgeführt werden. Es ist möglich, aber nicht empfehlenswert.

         

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

    Weitere Informationen finden Sie unter Angular 2 TypeScript QuickStart


    Konvertieren von Angular TypeScript-Beispielen in ES6- und ES5-JavaScript.

    Alles was Sie mit Angular in TypeScript tun können, können Sie auch in JavaScript tun. Die Übersetzung von einer Sprache in die andere hängt hauptsächlich davon ab, wie Sie Ihren Code organisieren und auf Angular APIs zugreifen.

    Weitere Informationen finden Sie im Angular 2 Developer Cookbook – TypeScript to JavaScript