如何将Angular和Vue项目合并在一起？
Cod*_*ter 8 javascript node.js angularjs angular-ui-bootstrap vue.js
我读了这方面的各种资源,但仍然无法找到方法.这里的问题是我想将两个不同的项目合并在一起.我的同事正在研究他在AngularJS中设计的一个功能.我使用VueJS开发了我的功能.管理层随后决定将两者合并在一起.在第一个项目启动的用户界面中,将提供一个链接,从我的网页在VueJS中设计的位置开始.
我在VueJS服务器上本地运行我的项目npm start,也使用快速服务器.但是第一个项目只运行node app.js,然后在本地运行.
以下是他的项目描述的截图:
这是我的项目细节:
我的index.html文件包含以下内容:
<!-- 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包含我的应用程序将通过其启动的链接的代码.该链接包含此代码,可以重定向到我的代码:
<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文件包含以下代码:
'use strict';
app.config(function ($routeProvider) {
$routeProvider
.when("/errorinput", {
templateUrl: "views/errorinput.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
}]);
知道如何将它们合并在一起以获得所需的功能吗？
编辑:所以我确实找到了在一台服务器上运行这两个项目的方法.我在我的VueJS项目中包含了AngularJS的所有依赖项.角应用程序运行正常,但现在,VueJS网页没有与angularJS一起出现.当我给出我的VueJS应用程序的相对路径时,它似乎在后台.任何想法我现在如何在这个引导的AngularJS应用程序中路由我的VueJS？这里提到了有关此问题的更多详细信息:
Agn*_*ney 12
它们也完全相互独立.第一个项目应用程序中没有链接,我的应用程序需要从该链接启动.
看起来你可以尝试一下很酷的Micro Frontend.MicroFrontend是一种新的应用程序范例,前端服务被组织为不同的应用程序,并通过前端的事件总线进行通信.
有不同的方法来实现这一点:
由于您说应用程序不需要相互通信,因此SPA框架对您来说更容易.它是该领域非常成熟的框架,支持前端框架,包括Vue和AngularJS,但不限于这些选项.
如何使这项工作有效地创建一个具有不同div的HTML:
<div id="angular1"></div>
<div id="vue-app"></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中 找到示例应用程序.以下是单一水疗中心制造商的分步指南.另请查看他们的示例.
希望有所帮助.
| 归档时间： |
|
| 查看次数： |
3641 次 |
| 最近记录： |