无法从 AngularJS index.html 导航到 VueJS webapp
[英] Unable to navigate to a VueJS webapp from AngularJS index.html
本文介绍了无法从 AngularJS index.html 导航到 VueJS webapp的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图将 AngularJS 和 VueJS 项目合并在一起，因为我们需要从 AngularJS 应用程序内部调用在 VueJS 中设计的流程.为了将 AngularJS 和 VueJS 项目合并在一起，我在 Angular 和 Vue 的 package.json 文件中包含了依赖项以及其他一些文件.
现在，由于 Vue 和 Angular 都在项目根目录中创建了一个 index.html 文件，我将 Angular 文件作为 index.html 文件并将 VueJS 索引文件重命名为 index23.html.然后从我需要调用 VueJS 流程的链接中，我提供了 AngularJS 配置文件的路由器中的路径，如下所示:
'use strict';app.config(function ($routeProvider) {$routeProvider.when("/错误输入", {templateUrl: "src/index23.html"});});app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {//实现我！}]);
但是这样做时，我的 VueJS 页面没有出现，而是出现在背景中，我认为因为单击该链接时当前页面被白色背景包围.我真的不确定是否需要在上述文件的 app.controller 方法中编写代码，因为这是我正在谈论的 Vue 组件.
有什么办法可以使这项工作顺利进行吗?如果我需要提供其他详细信息，请告诉我.进行此调用的 index.html 文件的内容如下:
index.html
<html lang="zh-cn"><头><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- 元、标题、CSS、网站图标等--><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 驱动器状态|<!-- 引导程序--><link href="node_modules/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 字体真棒--><link href="node_modules/gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"><!-- 自定义主题样式--><link href="node_modules/gentelella/build/css/custom.min.css" rel="stylesheet"><!-- Angular JS 材质 --><link href="node_modules/angular-material/angular-material.min.css" rel="stylesheet"><!-- Angular JS 材质 --><!--link href="public/material.css" rel="stylesheet"--><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><!-- 自定义控制脚本部分--><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>管理<span class="fa fa-chevron-down"></span></a>;<ul class="nav child_menu"><li><a href="#!errorinput"><i class="fa fa-database"></i>管理错误描述</a></li>
<!--/侧边栏菜单-->
这是我需要调用 VueJS 应用程序的 Angular 页面和链接(管理错误描述):
白色背景问题:
添加代码后的errorinput.js文件:
'使用严格';app.config(function ($routeProvider) {$routeProvider.when("/错误输入", {templateUrl: "views/errorinput.html"});});app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {//实现我！<模板><div class="容器"><div><transition name="淡入淡出"><路由器视图></路由器视图>
<风格>.fade-enter-active, .fade-leave-active {过渡:不透明度 0.5s}.fade-enter, .fade-leave-active {不透明度:0}</风格><脚本>导出默认{}}]);
解决方案
Vue 和 Angular 可以很好地共存于一个页面上.
因为您使用 Angular 来呈现 Vue 的 HTML，所以您需要确保在呈现新的 HTML 之后触发 Vue 初始化.您可以通过以下几种方式完成此操作:
- 将您的 Vue 脚本粘贴到上面代码中
//Implement me 的位置 - 在路由加载后，使用 Angular 路由器中的钩子加载特定于 Vue 的
.js 文件
第一个选项可能更高效，而第二个选项可能使您的开发设置更简洁.
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.
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!
}]);
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.
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 -->
This is the Angular page and link(Manage Error Descriptions) from where I need to call VueJS app:
White background issue:
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 and Angular can co-exist on a page just fine.
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:
- Paste your Vue script where it says
// Implement me in your code above
- Use a hook in your Angular router to load your Vue-specific
.js file after the route has loaded
First option is probably more performant, while second option probably keeps your dev setup cleaner.
这篇关于无法从 AngularJS index.html 导航到 VueJS webapp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
