如何将Angular和Vue项目合并在一起? [英] How to merge Angular and Vue projects together?
问题描述
我阅读了各种可用的资源，但仍然找不到解决方法.这里的问题是我想将两个不同的项目合并在一起.我的同事正在研究他在AngularJS中设计的一项功能.我使用VueJS开发了功能.管理层随后决定将两者合并.如图所示，从启动第一个项目的UI，将提供一个链接，从那里可以启动我在VueJS中设计的网页.
I read various resources available on this but still couldn't figure out a way. The issue here is that I want to merge two different projects together. My colleague was working on one feature which he designed in AngularJS. I developed my feature using VueJS. The management then decided that both of them should be merged together. As in, From the UI where the first project is launched, there would be a link provided from where my webpages designed in VueJS would launch.
我正在使用npm start在VueJS服务器上本地运行我的项目，也正在使用Express服务器.但是第一个项目仅运行node app.js，然后在本地运行.
I am running my project locally on VueJS server using npm start and also using express server as well. But first project only runs node app.js and it runs in local then.
下面是他的项目描述的屏幕截图:
Below is the screenshot of his project description:
这是我的项目详细信息:
And this is my project details:
我的index.html文件具有以下内容:
My index.html file has these contents:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Error Details and Description</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
第一个项目中包含的另一个index.html具有该链接的代码，我的应用程序将通过该链接启动.该链接包含可以重定向到我的代码的以下代码:
The other index.html contained in first project has code for that link through which my app would launch. The link contains this code which can redirect to my code:
<li><a><i class="fa fa-edit"></i>Administration<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="#!errorinput"><i class="fa fa-database"></i>Manage Error Descriptions</a></li>
相应的errorinput.js文件包含以下代码:
The corresponding errorinput.js file contains this code:
'use strict';
app.config(function ($routeProvider) {
$routeProvider
.when("/errorinput", {
templateUrl: "views/errorinput.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
}]);
有什么主意如何将它们合并在一起以获得所需的功能?
Any idea how to merge both of them together to get the required functionality?
编辑:因此，我确实找到了一种在一台服务器上运行两个项目的方法.我在我的VueJS项目中包括了AngularJS的所有依赖项. angular应用程序运行正常，但是现在，VueJS网页没有与angularJS一起出现.当我给出我的VueJS应用程序的相对路径时，它似乎是在后台运行.知道我现在该如何在这个自举的AngularJS应用中路由我的VueJS吗?有关此问题的更多详细信息，请参见此处:
EDIT: So I did found a way to run both projects on one server. I included all the dependencies of AngularJS inside my VueJS project. The angular app was running fine but now, the VueJS webpage doesn't comes up along with angularJS. It appears to coming in background when I give relative path of my VueJS app. Any idea how can I now route my VueJS in this bootstrapped AngularJS app? More details about this issue is mentioned here:
推荐答案
它们也彼此完全独立.没有 链接到需要启动我的应用程序的第一个项目应用程序.
And they are entirely independent from each other as well. There is no link in the first project app from where my app needs to be launched.
似乎您可以尝试炫酷的 Micro Frontend . MicroFrontend是一种新的应用程序范式，其中前端服务被组织为不同的应用程序，并通过事件总线在前端进行通信.
It seems like you can try out the cool Micro Frontend. MicroFrontend is a new application paradigm where frontend services are organised as different applications and communicate through an event bus all on the front end.
有多种实现此目的的方法，例如:
There are different methods of achieving this like:
- Rendering them in different iFrames and communicating through an
postMessageAPI - Rendering them at different URLs but using an event bus with common dependency management.
- Using single SPA Framework.
由于您说过这些应用程序不需要相互通信，因此SPA Framework对您而言将更加容易.它是该领域中非常成熟的框架，支持包括Vue和AngularJS在内的前端框架，但不仅限于这些选项.
Since you said that the applications need not communicate with each other, SPA Framework would be easier for you. It is very mature framework in this domain with support for front end frameworks including Vue and AngularJS but not limited to these options.
要做此工作的目的是有效地创建具有不同div的HTML:
What you would do to make this work is effectively create an HTML with different divs:
<div id="angular1"></div>
<div id="vue-app"></div>
这样它们就不会互相影响.
So that they do not involve changes with each other.
创建一个SPA文件作为应用程序的配置.
Create a single SPA file as config of your application.
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}`);
}
}
您可以找到有关此配置的更多详细信息在这里
You can find more details on this config Here
在安装了相应的SPA插件(在您的情况下为single-spa-vue和single-spa-angular)之后，我们必须告诉单spa挂接和卸载框架所需的生命周期挂钩.
After installing the corresponding SPA plugins (single-spa-vue and single-spa-angular in your case), we have to tell single-spa the life cycle hooks it needs to mount and unmount your framework.
对于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中找到示例应用程序此处. 此处是一步一步的单水疗中心的制造商提供的步骤指南.还要查看其示例.
You can find a sample application with Vue and Angular Here. Here is a step by step guide from makers of single-spa. Also check out their examples.
希望有帮助.
这篇关于如何将Angular和Vue项目合并在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
