Ejecutando marcos Angular y AngularJS lado a lado

ng-upgrade angular-hybrid

Question

He encontrado recursos que describen cómo integrar componentes Angular (2) en AngularJS, pero todos estos han implicado configurar el proyecto AngularJS como un proyecto Angular, que requiere un transpilador de TypeScript, que requiere ES6, que requiere declaraciones 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 declaraciones de importación en la aplicación AngularJS, que requiere un transpilador. Si la aplicación Angular necesita transpilarse con anticipación, está bien, pero la aplicación AngularJS no se puede transpilar porque se está ejecutando en un servidor django, y no quiero ejecutar otro servidor con un transpilador.

Para ser claros, mi aplicación AngularJS actual está siendo atendida por django. Quiero incluir algunos componentes angulares. Estos no se tocarán durante el desarrollo, por lo que se pueden recopilar con anticipación sin afectar el flujo de trabajo. ¿Hay alguna manera de agregar estos componentes a la aplicación AngularJS sin agregar un transpilador a la aplicación AngularJS?

Answer 1

Actualice gradualmente una aplicación AngularJS a Angular.

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

Para obtener más información, consulte la Guía de 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 del lado del cliente. Es posible pero no recomendado.

<script src="https://unpkg.com/[email protected]?main=browser"></script>
<script src="https://unpkg.com/[email protected]/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:[email protected]'',
      ''angular-in-memory-web-api'': ''npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'',
      ''ts'':                        ''npm:[email protected]/lib/plugin.js'',
      ''typescript'':                ''npm:[email protected]/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 Inicio rápido de Angular 2 TypeScript

Convierta ejemplos de TypeScript angular en JavaScript ES6 y ES5.

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

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