All geek questions in one place

Running Angular and AngularJS frameworks side by side

I found resources that describe how to integrate Angular (2) components into AngularJS, but all of them are related to setting up an AngularJS project as an Angular project requiring a TypeScript transporter requiring ES6 requiring import declarations. I want to just use Angular components in my AngularJS application without breaking the existing workflow. Is it possible, and if so, how to implement it? I thought this was the goal of the updater, but all the tutorials I saw require import statements in an AngularJS application, which requires a transpiler. If the Angular application needs to be rewritten beforehand, this is fine, but the AngularJS application cannot be rewritten because it runs on the django server and I do not want to start another server with a transpiler.

To be clear, my current AngularJS application is served by django. I want to include some Angular components. They will not be affected during development, so they can be translated in advance without affecting the workflow. Is there a way to add these components to an AngularJS application without adding a transpiler to the AngularJS application?

+5
source share
1 answer

Incremental AngularJS application upgrade to Angular.

One of the keys to a successful upgrade is its gradual implementation by launching two frameworks side by side in one application and porting AngularJS components to Angular one by one. This allows you to upgrade even large and complex applications without disrupting the work of another business, because the work can be performed together and distributed over a certain period of time. The Angular upgrade module was designed to progressively upgrade without change.

For more information, see Angular Developer's Guide - Upgrading from AngularJS

DEMO on PLNKR

See also Angular 2+ can't find Angular 1.X for bootstrap

I do not want to start another server with a transpiler.

Try this QuickStart example in Plunker without installing anything.

The transpilator can be run on the 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);

See Angular v2 TypeScript QuickStart for more information.

Convert Angular TypeScript examples to ES6 and ES5 JavaScript.

Everything that you can do with Angular in TypeScript, you can also do in JavaScript. Translation from one language to another is mainly related to changing the way you organize your code and access the Angular API.

For more information, see Angular Cookbook for Developers - TypeScript for JavaScript

+8
source

Source: https://habr.com/ru/post/1266978/

More articles:


All Articles