Как объединить проекты Angular и Vue?

Я читал различные ресурсы, доступные по этому поводу, но до сих пор не мог найти способ. Проблема здесь в том, что я хочу объединить два разных проекта вместе. Мой коллега работал над одной особенностью, которую он разработал в AngularJS. Я разработал свою функцию с помощью VueJS. Затем руководство решило, что они оба должны быть объединены. Как и в, из пользовательского интерфейса, где запускается первый проект, будет создана ссылка, с которой будут запускаться мои веб-страницы, созданные в VueJS.

Я запускаю свой проект локально на сервере VueJS, используя npm start а также используя экспресс-сервер. Но сначала проект запускает только node app.js и он запускается локально.

Ниже приведен скриншот его описания проекта:

И это мои детали проекта:

Мой файл index.html имеет следующее содержимое:

<!-- index.html -->



 
 
 <title>Error Details and Description</title>

Другой index.html, содержащийся в первом проекте, имеет код для этой ссылки, через которую будет запущено мое приложение. Ссылка содержит этот код, который может перенаправляться на мой код:

<li><code>Administration</code><ul><code>&lt;li&gt;&lt;a href="#!errorinput" target="_blank"&gt;Manage Error Descriptions&lt;/a&gt;&lt;/li&gt;</code> <p> Соответствующий файл errorinput.js содержит этот код:</p> <pre class="prettyprint linenums">'use strict';

app.config(function ($routeProvider) {
 $routeProvider
 .when("/errorinput", {
 templateUrl: "views/errorinput.html"
 });
});


app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
 // Implement me!
}]);

Любая идея, как объединить их вместе, чтобы получить требуемую функциональность?

EDIT: Таким образом, я нашел способ запустить оба проекта на одном сервере. Я включил все зависимости AngularJS в мой проект VueJS. Угловое приложение работало нормально, но теперь веб-страница VueJS не появляется вместе с angularJS. Похоже, что он появляется в фоновом режиме, когда я отношусь к пути моего приложения VueJS. Любая идея, как я могу теперь маршрутизировать VueJS в этом загруженном приложении AngularJS? Более подробно об этой проблеме упоминается здесь:

подробнее

2 ответа

И они полностью независимы друг от друга. В первом приложении для проекта нет ссылки, в которой должно быть запущено мое приложение.

Похоже, вы можете попробовать крутой Micro Frontend. MicroFrontend - это новая парадигма приложений, в которой интерфейсные службы организованы как разные приложения и обмениваются данными по всей шине событий на передней панели.

Существуют различные способы достижения этого:

  1. Предоставление их в разных iFrames и передача через API postMessage
  2. Рендеринг их по разным URL-адресам, но с использованием шины событий с общим управлением зависимостями.
  3. Использование единой SPA Framework.

Поскольку вы сказали, что приложения не должны связываться друг с другом, SPA Framework будет проще для вас. Это очень зрелая структура в этой области с поддержкой интерфейсных интерфейсов, включая Vue и AngularJS, но не ограничиваясь этими вариантами.

Что бы вы сделали, чтобы сделать эту работу, эффективно создать HTML с разными div:

Чтобы они не вносили изменений друг в друга.

Создайте один файл SPA как конфигурацию вашего приложения.

import * as singleSpa from 'single-spa';

singleSpa.registerApplication('angular', () =>
 import ('../app1/angular1.app.js'), pathPrefix('/app1'));
singleSpa.registerApplication('vue', () =>
 import ('../app2/vue.app.js'), pathPrefix('/app2'));

singleSpa.start();

function pathPrefix(prefix) {
 return function(location) {
 return location.pathname.startsWith('${prefix}');
 }
}

Вы можете найти более подробную информацию об этой конфигурации здесь

После установки соответствующих SPA-плагинов (single-spa-vue и single-spa-angular в вашем случае), мы должны сказать, что один-спа-набор крючков жизненного цикла ему нужно монтировать и размонтировать вашу инфраструктуру.

В случае vue:

import Vue from 'vue/dist/vue.min.js';
import singleSpaVue from 'single-spa-vue';

const vueLifecycles = singleSpaVue({
 Vue,
 appOptions: {
 el: '#vue-app'
 template: '<p>Vue Works</p>'
 }
});

export const bootstrap = [
 vueLifecycles.bootstrap,
];

export const mount = [
 vueLifecycles.mount,
];

export const unmount = [
 vueLifecycles.unmount,
];

Вы можете найти пример приложения с Vue и Angular Here. Вот пошаговое руководство от создателей одного спа-салона. Также проверьте их примеры.

Надеюсь, это поможет.


Одним из решений было бы продолжать разделять две функции (действительно приложения) и перенаправлять пользовательский трафик с помощью балансировки нагрузки. Балансировщик нагрузки может обрабатывать и направлять трафик в соответствующее приложение на основе настроенных правил URL. Если вы используете AWS, вы можете настроить балансировщик нагрузки приложений (ALB) с помощью правил прослушивания и целевых групп.

Даже если вы не используете AWS, этот тип балансировки нагрузки можно легко настроить. Например, с обратным прокси-сервером на nginx.

Преимущество такого подхода заключается в том, что ни одно приложение не нуждается в обновлении вообще, и вам не нужно беспокоиться о каких-либо зависимостях, проблемах и т.д.

Пример:

applicationname.com/app1 -> forwards to Target Group for App 1
applicationname.com/app2 -> forwards to Target Group for App 2

В каждом приложении вы можете просто использовать регулярные ссылки href, которые могут указывать на другое приложение. пример в приложении 1: <a href="." target="_blank">Feature 1</a>

licensed under cc by-sa 3.0 with attribution.