Menu
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:
more details
999
Since Angular supports using custom Web Components, you'll be able to use the Vue components (wrapped as Web Components).
As stated earlier, Angular is much more complex to use than Vue. Due to rigid structure rules, performing simple actions also requires long lines of code. The syntax of an Angular app will also be a lot more complex when comparing Angular vs Vue.
Angular, for example, is better for bulky and large UI applications. Both of these frameworks are extremely popular, but the numbers aren't equal. As per the stack overflow surveys in 2019, around 30 percent of developers are using Angular for their upcoming projects while around 15% are using Vue.
js is one of the top JavaScript frameworks, and it is replacing Angular and React most of the time. So if you want to use Vue features and functionalities in web development efficiently, hire Vue.
The following walkthrough is to create a proof of concept to demonstrate that adding a Vue component to an Angular app is possible I’ll be using a premade Vue Calculator (Butler, 2019) to add to an Angular Tour of Heroes app (Papa, 2019).
You can create a terrible project that doesn’t scale with Angular, just as you can with React or Vue. A framework won’t push you into bad patterns nor will save you from mistakes. Vue is usually praised for creating a great dev experience, but in the end, the best framework is the one you are most comfortable with.
In order to use the my-vue-calc component I need to load Vue.js in the Angular app. I accomplished this by installing vue as a dependency using npm. Then adding vue to the angular.json configuration file. While I’m here I’ll also add the calculator to the scripts.
With Vue we need to set a watcher like this: With Angular and RxJS, route params is an observable so you can react to changes by tapping into the stream (or mapping, or any of the very cool RxJS operators) I like Angular’s reactive approach better, but I can understand that imposing RxJS is not a choice Vue should make for you.
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:
postMessage APISince 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.
96
One solution would be to continue to keep the two features (really applications) separate and divert the user traffic with a Load Balancer. The load balancer can handle and route traffic to the respective application based on configured URL rules. If you are using AWS, you can configure an Application Load Balancer (ALB) using listener rules and target groups.
Even if you aren't using AWS, this type of load balancer can be easily configured. For example with a reverse proxy server on nginx.
The benefit of this approach is that neither application needs to be updated at all, and you don't have to worry about any cross-framework dependencies, issues, etc.
Example:
applicationname.com/app1 -> forwards to Target Group for App 1
applicationname.com/app2 -> forwards to Target Group for App 2
In each application you can now just use regular href links that can point to the other application.
example in App 1: <a href="/app2/feature1">Feature 1</a>
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
