web-dev-qa-db-fra.com

Exécution Angular et AngularJS frameworks côte à côte

J'ai trouvé des ressources qui décrivent comment intégrer des composants Angular (2) dans AngularJS, mais tous ces éléments ont impliqué la mise en place du projet AngularJS comme un projet Angular , nécessitant un transpileur de TypeScript, nécessitant ES6, nécessitant des instructions d'importation. Je veux simplement utiliser Angular composants dans mon application AngularJS sans perturber mon flux de travail existant. Est-ce possible, et si oui, comment puis-je Je pensais que c'était le but du module de mise à niveau, mais tous les tutoriels que j'ai vus nécessitent des instructions d'importation dans l'application AngularJS, qui nécessite un transpilateur. Si l'application Angular Angular doit être transpilé à l'avance, c'est correct, mais l'application AngularJS ne peut pas être transpilée car elle s'exécute sur un serveur Django, et je ne veux pas exécuter un autre serveur avec un transpilateur.

Pour être clair, mon application AngularJS actuelle est servie par Django. Je veux inclure certains composants Angular. Ceux-ci ne seront pas touchés pendant le développement, ils peuvent donc être transposés à l'avance sans affecter le flux de travail. Existe-t-il un moyen d'ajouter ces composants dans l'application AngularJS sans ajouter de transpilateur à l'application AngularJS?

angularjsangularng-upgradeangular-hybrid
17
dz210

Mettez à niveau progressivement une application AngularJS vers Angular.

L'une des clés d'une mise à niveau réussie est de le faire de manière incrémentielle, en exécutant les deux frameworks côte à côte dans la même application et en portant les composants AngularJS sur Angular un par un. Cela permet de mettre à niveau même des applications grandes et complexes sans perturber les autres activités, car le travail peut être effectué en collaboration et étalé sur une période de temps. Le upgrade module in Angular a été conçu pour rendre la mise à niveau incrémentielle transparente.

Pour plus d'informations, consultez Guide Angular 2 - Mise à niveau d'AngularJS vers Angular

Le DEMO sur PLNKR

Voir également,

Je ne veux pas exécuter un autre serveur avec un transpilateur.

Le transpilateur peut être exécuté côté client. C'est possible mais non recommandé.

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

Pour plus d'informations, consultez Angular 2 TypeScript QuickStart

Convertir Angular Exemples TypeScript en ES6 et ES5 JavaScript.

Tout ce que vous pouvez faire avec Angular in TypeScript, vous pouvez également le faire en JavaScript. La traduction d'une langue à l'autre consiste principalement à changer la façon dont vous organisez votre code et à accéder aux API Angular.

Pour plus d'informations, consultez Angular 2 Developer Cookbook - TypeScript to JavaScript

16
georgeawg