如何将 Angular 和 Vue 项目合并在一起? [英] How to merge Angular and Vue projects together?
问题描述
我阅读了有关此的各种可用资源，但仍然找不到方法.这里的问题是我想将两个不同的项目合并在一起.我的同事正在研究他在 AngularJS 中设计的一项功能.我使用 VueJS 开发了我的功能.管理层随后决定将两者合并.就像在第一个项目启动的 UI 中一样，将提供一个链接，从那里我在 VueJS 中设计的网页将启动.
我使用 npm start 在 VueJS 服务器上本地运行我的项目，也使用 express 服务器.但是第一个项目只运行 node app.js 然后它在本地运行.
下面是他的项目描述截图:
这是我的项目详情:
我的 index.html 文件有以下内容:
<!DOCTYPE html><头><meta charset="utf-8"><title>错误详情和描述</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz"crossEuK6ys><身体><div id="应用程序"></div><script src="bundle.js"></script></html>第一个项目中包含的另一个 index.html 具有用于启动我的应用程序的链接的代码.该链接包含可以重定向到我的代码的代码:
<li><a><i class="fa fa-edit"></i>Administration<span class="fa fa-chevron-down"></跨度</a><ul class="nav child_menu"><li><a href="#!errorinput"><i class="fa fa-database"></i>管理错误描述</a></li>对应的errorinput.js文件中包含如下代码:
'use strict';app.config(function ($routeProvider) {$routeProvider.when("/错误输入", {templateUrl: "views/errorinput.html"});});app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {//实现我！}]);知道如何将它们合并在一起以获得所需的功能吗?
编辑:所以我确实找到了一种在一台服务器上运行两个项目的方法.我在我的 VueJS 项目中包含了 AngularJS 的所有依赖项.angular 应用程序运行良好，但现在，VueJS 网页没有与 angularJS 一起出现.当我提供 VueJS 应用程序的相对路径时，它似乎进入后台.知道我现在如何在这个引导的 AngularJS 应用程序中路由我的 VueJS 吗?此处提到了有关此问题的更多详细信息:
而且它们也是完全独立的.没有需要启动我的应用的第一个项目应用中的链接.
看来您可以试试很酷的微前端.MicroFrontend 是一种新的应用程序范式，其中前端服务被组织为不同的应用程序，并通过前端的事件总线进行通信.
有不同的方法可以实现这一点，例如:
既然您说应用程序不需要相互通信，那么 SPA 框架对您来说会更容易.它是该领域非常成熟的框架，支持前端框架，包括 Vue 和 AngularJS，但不限于这些选项.
要使这项工作有效，您需要做的是有效地创建具有不同 div 的 HTML:
<div id="vue-app"></div>
这样它们就不会涉及到彼此的变化.
创建单个 SPA 文件作为应用程序的配置.
import * as singleSpa from 'single-spa';singleSpa.registerApplication('angular', () =>导入 ('../app1/angular1.app.js'), pathPrefix('/app1'));singleSpa.registerApplication('vue', () =>导入 ('../app2/vue.app.js'), pathPrefix('/app2'));singleSpa.start();函数路径前缀(前缀){返回函数(位置){返回 location.pathname.startsWith(`${prefix}`);}}您可以找到有关此配置的更多详细信息 这里
安装相应的 SPA 插件(single-spa-vue 和 single-spa-angular 在您的情况下)后，我们必须告诉 single-spa 生命周期挂载和卸载框架所需的钩子.
以 vue 为例:
从'vue/dist/vue.min.js'导入Vue；从'single-spa-vue'导入singleSpaVue；const vueLifecycles = singleSpaVue({维，应用选项:{el: '#vue-app'模板:`<p>Vue Works</p>`}});导出 const bootstrap = [vueLifecycles.bootstrap,];导出常量挂载 = [vueLifecycles.mount,];导出常量卸载 = [vueLifecycles.unmount,];您可以在此处找到带有 Vue 和 Angular 的示例应用程序.这里单一水疗中心制造商的步骤指南.另请查看他们的示例.
希望有所帮助.
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.
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:
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>
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>
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?
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.
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.
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.
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.
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
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.
In the case of 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,
];
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.
Hope that helps.
这篇关于如何将 Angular 和 Vue 项目合并在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
