并排运行 Angular 和 AngularJS 框架 [英] Running Angular and AngularJS frameworks side by side

问题描述

我找到了描述如何将 Angular (2) 组件集成到 AngularJS 中的资源，但所有这些都涉及像 Angular 项目一样设置 AngularJS 项目，需要来自 TypeScript 的转译器，需要 ES6，需要导入语句.我想在我的 AngularJS 应用程序中简单地使用 Angular 组件，而不会中断我现有的工作流程.这可能吗，如果可以，我该如何实施?我以为这是升级模块的目的，但是我看到的所有教程都需要在AngularJS应用程序中使用import语句，这需要一个转译器.如果 Angular 应用需要提前转译，那没关系，但是 AngularJS 应用无法转译，因为它运行在 django 服务器上，我不想运行另一个带有转译器的服务器.

明确地说，我当前的 AngularJS 应用程序由 django 提供服务.我想包含一些 Angular 组件.这些在开发过程中不会被触及，因此它们可以在不影响工作流程的情况下提前转换.有没有办法将这些组件添加到 AngularJS 应用程序中，而无需向 AngularJS 应用程序添加转译器?

解决方案

将 AngularJS 应用程序逐步升级到 Angular.

<块引用>

成功升级的关键之一是逐步升级，通过在同一个应用程序中并排运行两个框架，并将 AngularJS 组件一一移植到 Angular.这使得在不中断其他业务的情况下升级甚至大型复杂的应用程序成为可能，因为工作可以协作完成并分布在一段时间内.Angular 中的 upgrade 模块旨在使增量升级无缝.

有关更多信息，请参阅 Angular 2 指南 - 从 AngularJS 升级到角度

PLNKR 上的演示

另见，

• 将 AngularJS 迁移到 Angular 4,5(使用演示)立>

<小时><块引用>

我不想用转译器运行另一台服务器.

转译器可以在客户端运行.可以但不推荐.

<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script><script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script><script src="systemjs.config.js"></script><脚本>System.import('main.js').catch(function(err){ console.error(err); });

systemjs.config.js

/***网络角度版本* (基于 angular.io 中的 systemjs.config.js)* Angular 样本的系统配置* 根据您的应用需求进行必要的调整.*/(功能(全局){系统配置({//仅演示！真正的代码不应该在浏览器中转换转译器:'ts'，打字稿选项:{//标准 tsconfig.json 中编译器选项的副本"目标": "es5","module": "commonjs","moduleResolution": "节点","sourceMap": 真,emitDecoratorMetadata":真，"experimentalDecorators": 真,"lib": ["es2015", "dom"],"noImplicitAny": 真,suppressImplicitAnyIndexErrors":真},元:{'打字稿':{"出口": "ts"}},路径:{//路径作为别名'npm:': 'https://unpkg.com/'},//map 告诉系统加载器去哪里找东西地图: {//我们的应用程序在 app 文件夹中'应用':'应用'，//角度包'@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-b​​rowser': 'npm:@angular/platform-b​​rowser/bundles/platform-b​​rowser.umd.js','@angular/platform-b​​rowser/animations': 'npm:@angular/platform-b​​rowser/bundles/platform-b​​rowser-animations.umd.js','@angular/platform-b​​rowser-dynamic': 'npm:@angular/platform-b​​rowser-dynamic/bundles/platform-b​​rowser-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',//其他库'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',},//包告诉系统加载器在没有文件名和/或没有扩展名时如何加载包:{应用程序: {main: './main.ts',默认扩展名:'ts'，元:{'./*.ts': {加载器:'systemjs-angular-loader.js'}}},rxjs:{默认扩展:'js'}}});})(这个);

有关详细信息，请参阅 Angular 2 TypeScript 快速入门<小时>

将 Angular TypeScript 示例转换为 ES6 和 ES5 JavaScript.

您可以在 TypeScript 中使用 Angular 执行的任何操作，也可以在 JavaScript 中执行.从一种语言转换为另一种语言主要是改变组织代码和访问 Angular API 的方式.

有关详细信息，请参阅 Angular 2 开发人员手册- 打字稿到 JavaScript

I have found resources that describe how to integrate Angular (2) components into AngularJS, but all of these have involved setting up the AngularJS project like an Angular project, requiring a transpiler from TypeScript, requiring ES6, requiring import statements. I want to simply use Angular components in my AngularJS application without disrupting my existing workflow. Is this possible, and if so how do I implement it? I thought that this was the purpose of the upgrade module, but all the tutorials I have seen require import statements in the AngularJS application, which requires a transpiler. If the Angular application needs to be transpiled ahead of time, that is ok, but the AngularJS application cannot be transpiled because it is running on a django server, and I don't want to run another server with a transpiler.

To be clear, my current AngularJS application is being served by django. I want to include some Angular components. These won't be touched during development, so they can be transpiled ahead of time without affecting workflow. Is there a way of adding these components into the AngularJS app without adding a transpiler to the AngularJS app?

解决方案

Incrementally upgrade an AngularJS application to Angular.

One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The upgrade module in Angular has been designed to make incremental upgrading seamless.

For more information, see Angular 2 Guide - Upgrading from AngularJS to Angular

The DEMO on PLNKR

See also,

• Migrating AngularJS to Angular 4,5 (with DEMO)

---

I don't want to run another server with a transpiler.

The transpiler can be run client-side. It is possible but not recommended.

<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/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: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);

For more information, see Angular 2 TypeScript QuickStart

---

Convert Angular TypeScript examples into ES6 and ES5 JavaScript.

Anything you can do with Angular in TypeScript, you can also do in JavaScript. Translating from one language to the other is mostly a matter of changing the way you organize your code and access Angular APIs.

For more information, see Angular 2 Developer Cookbook - TypeScript to JavaScript

这篇关于并排运行 Angular 和 AngularJS 框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！