Executando estruturas Angular e AngularJS lado a lado

Eu encontrei resources que descrevem como integrar componentes Angular (2) no AngularJS, mas todos eles envolveram a configuração do projeto AngularJS como um projeto Angular, exigindo um transpiler do TypeScript, exigindo o ES6, exigindo instruções de importação. Eu quero simplesmente usar componentes Angulares no meu aplicativo AngularJS sem interromper meu stream de trabalho existente. Isso é possível e, em caso afirmativo, como faço para implementá-lo? Eu pensei que esse era o propósito do módulo de upgrade, mas todos os tutoriais que vi requerem instruções de importação no aplicativo AngularJS, que requer um transpiler. Se o aplicativo Angular precisar ser transferido com antecedência, tudo bem, mas o aplicativo AngularJS não pode ser transferido porque está sendo executado em um servidor django e não quero executar outro servidor com um transpilador.

Para ser claro, meu aplicativo AngularJS atual está sendo servido pelo django. Eu quero include alguns componentes angulares. Eles não serão tocados durante o desenvolvimento, para que possam ser transferidos com antecedência, sem afetar o stream de trabalho. Existe uma maneira de adicionar esses componentes ao aplicativo AngularJS sem adicionar um transpilador ao aplicativo AngularJS?

   

    Incrementalmente, atualize um aplicativo AngularJS para o Angular.

    Uma das chaves para uma atualização bem-sucedida é fazê-lo de forma incremental, executando as duas estruturas lado a lado no mesmo aplicativo e portando os componentes do AngularJS para o Angular, um por um. Isso possibilita a atualização até mesmo de aplicativos grandes e complexos, sem interromper outros negócios, porque o trabalho pode ser feito de forma colaborativa e distribuído por um período de tempo. O módulo de upgrade no Angular foi projetado para tornar a atualização incremental perfeita.

    Para obter mais informações, consulte o Guia Angular 2 – Atualizando de AngularJS para Angular

    O DEMO no PLNKR

    Veja também,

    • Migrando AngularJS para Angular 4,5 (com DEMO)

    Eu não quero executar outro servidor com um transpilador.

    O transpiler pode ser executado no lado do cliente. É possível, mas não recomendado.

         

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

    Para mais informações, consulte Angular 2 TypeScript QuickStart.


    Converta exemplos de TypeScript angular em ES6 e ES5 JavaScript.

    Qualquer coisa que você pode fazer com o Angular no TypeScript , você também pode fazer em JavaScript. Traduzir de um idioma para outro é principalmente uma questão de alterar a maneira como você organiza seu código e acessa APIs angulares.

    Para obter mais informações, consulte o livro de receitas do desenvolvedor Angular 2 – TypeScript para JavaScript