无法从AngularJS index.html导航到VueJS Web应用程序 [英] Unable to navigate to a VueJS webapp from AngularJS index.html
问题描述
我试图将AngularJS和VueJS项目合并在一起，因为我们需要从AngularJS应用程序内部调用VueJS中设计的流程.为了将AngularJS和VueJS项目合并在一起，我将Angular和Vue的package.json文件中的依赖项以及其他一些文件也包含在内.
I was trying to merge AngularJS and VueJS projects together since we need to have a requirement of calling the flow designed in VueJS from inside an AngularJS app. For merging AngularJS and VueJS projects together, I included the dependencies in package.json file of Angular and Vue together and few other files too.
现在，由于Vue和Angular都在项目根目录中创建了index.html文件，因此我将Angular作为我的index.html文件，并将VueJS索引文件重命名为index23.html.然后从需要调用VueJS流的链接中，在AngularJS配置文件的路由器中提供路径，如下所示:
Now since both Vue and Angular have an index.html file created in the project root directory, I made the Angular one as my index.html file and renamed VueJS index file as index23.html. Then from the link from where I need to call VueJS flow, I provided the path in the router of AngularJS config file as shown:
'use strict';
app.config(function ($routeProvider) {
$routeProvider
.when("/errorinput", {
templateUrl: "src/index23.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
}]);
但是这样做时，我的VueJS页面没有出现，而是在背景中出现，我认为当当前页面在单击该链接时被白色背景包围.我真的不确定是否需要在上述文件的app.controller方法内进行编码，因为这是我正在谈论的Vue组件.
But on doing so, my VueJS page doesn't comes up but rather it comes up in background I think as current page gets surrounded with a white background on clicking that link. I am really not sure if I need to code something inside the app.controller method of above file since this is a Vue component which I am talking about.
有什么办法可以使这项工作成功?如果需要提供其他详细信息，请告诉我.进行此调用的index.html文件的内容如下:
Is there any way we can make this work? Please let me know if I need to provide additional details. Contents of index.html file from where this call is made are below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SEW Drive Status| </title>
<!-- Bootstrap -->
<link href="node_modules/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="node_modules/gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="node_modules/gentelella/build/css/custom.min.css" rel="stylesheet">
<!-- Angular JS Material -->
<link href="node_modules/angular-material/angular-material.min.css" rel="stylesheet">
<!-- Angular JS Material -->
<!--link href="public/material.css" rel="stylesheet"-->
</head>
<script src="node_modules/angular/angular.min.js" ></script>
<script src="node_modules/angular-route/angular-route.min.js" ></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.js"></script>
<script src="app/app.js" ></script>
<!-- custom control script section -->
<script src="app/components/assetlist.js" ></script>
<script src="app/components/errorinput.js" ></script>
<script src="bundle.js"></script>
<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>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
这是Angular页面和链接(管理错误描述)，在这里我需要调用VueJS应用程序:
This is the Angular page and link(Manage Error Descriptions) from where I need to call VueJS app:
白色背景问题:
errorinput.js文件:
errorinput.js file after adding the code:
'use strict';
app.config(function ($routeProvider) {
$routeProvider
.when("/errorinput", {
templateUrl: "views/errorinput.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
<template>
<div class="container">
<div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<script>
export default{
}
</script>
}]);
推荐答案
Vue和Angular可以很好地共存于页面上.
Vue and Angular can co-exist on a page just fine.
由于要使用Angular渲染Vue的HTML，因此需要确保在渲染新的HTML后触发Vue初始化.您可以通过以下两种方法完成此操作:
Because you're using Angular to render Vue's HTML, you'll need to make sure your Vue initialization fires after the new HTML is rendered. You could accomplish this a couple of ways:
- 将您的Vue脚本粘贴到上面的代码中显示
// Implement me的位置 - 在路由加载后，使用Angular路由器中的钩子加载特定于Vue的
.js文件
- Paste your Vue script where it says
// Implement mein your code above - Use a hook in your Angular router to load your Vue-specific
.jsfile after the route has loaded
第一个选项的性能可能更高，而第二个选项则可能会使您的开发设置更加整洁.
First option is probably more performant, while second option probably keeps your dev setup cleaner.
这篇关于无法从AngularJS index.html导航到VueJS Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
