Ejecución de marcos Angular y AngularJS uno al lado del otro

He encontrado recursos que describen cómo integrar componentes Angular (2) en AngularJS, pero todos ellos han implicado configurar el proyecto AngularJS como un proyecto angular, que requiere un transpiler de TypeScript, que requiere ES6, que requiere instrucciones de importación. Simplemente quiero usar componentes angulares en mi aplicación AngularJS sin interrumpir mi flujo de trabajo existente. ¿Es esto posible? De ser así, ¿cómo lo implemento? Pensé que este era el propósito del módulo de actualización, pero todos los tutoriales que he visto requieren instrucciones de importación en la aplicación AngularJS, que requiere un transpiler. Si la aplicación Angular necesita ser transpuesta antes de tiempo, está bien, pero la aplicación AngularJS no puede ser transpuesta porque se está ejecutando en un servidor django, y no quiero ejecutar otro servidor con un transpiler.

Para que quede claro, mi aplicación AngularJS actual está siendo servida por django. Quiero incluir algunos componentes angulares. No se tocarán durante el desarrollo, por lo que se pueden transcribir con anticipación sin afectar el flujo de trabajo. ¿Hay alguna manera de agregar estos componentes a la aplicación AngularJS sin agregar un transpiler a la aplicación AngularJS?

Actualiza incrementalmente una aplicación AngularJS a Angular.

Una de las claves para una actualización exitosa es hacerlo de forma incremental, ejecutando los dos marcos uno al lado del otro en la misma aplicación y trasladando los componentes de AngularJS a Angular uno por uno. Esto hace posible actualizar incluso aplicaciones grandes y complejas sin interrumpir otros negocios, ya que el trabajo se puede hacer en colaboración y difundir durante un período de tiempo. El módulo de upgrade en Angular se ha diseñado para que la actualización incremental sea perfecta.

Para obtener más información, consulte Guía angular 2 – Actualización de AngularJS a Angular

La DEMO en PLNKR

Ver también,

  • Migración de AngularJS a Angular 4,5 (con DEMO)

No quiero ejecutar otro servidor con un transpiler.

El transpiler se puede ejecutar en el lado del cliente. Es posible pero no 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 obtener más información, consulte Angular 2 TypeScript QuickStart


Convierta ejemplos angulares de TypeScript en JavaScript ES6 y ES5.

Cualquier cosa que pueda hacer con Angular en TypeScript , también puede hacerlo en JavaScript. Traducir de un idioma a otro es principalmente una cuestión de cambiar la forma de organizar el código y acceder a las API angulares.

Para obtener más información, consulte Angular 2 Developer Cookbook – TypeScript to JavaScript