【发布时间】：2018-07-20 11:01:15
【问题描述】：
我试图将 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("/errorinput", {
templateUrl: "src/index23.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
}]);
但是这样做时，我的 VueJS 页面没有出现，而是出现在背景中，我认为当前页面在单击该链接时被白色背景包围。我真的不确定是否需要在上述文件的 app.controller 方法中编写一些内容，因为这是我正在谈论的 Vue 组件。
我们有什么办法可以做到这一点吗？如果我需要提供更多详细信息，请告诉我。进行此调用的 index.html 文件的内容如下：
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 -->
这是我需要调用 VueJS 应用程序的 Angular 页面和链接（管理错误描述）：
添加代码后的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!
<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>
}]);
【问题讨论】：
-
如果你创建了一个只有 iframe 的 Angular 视图，它的模型只有使用 vue 的页面的 url，它会起作用吗？类似于以下答案的内容，但我不知道如何通过 iframe 将状态从 angular 获取到 vue。 stackoverflow.com/questions/30380769/…
-
我已经尝试过了，它可以工作。但是当我加载的页面来自 VueJS 时不会。在这里，如果它来自 AngularJS，它可以正常加载。但是当它在 Vue 中时，就没有运气了。它给了我一个空白框架。
标签： angularjs vue.js angular-routing vue-router