无法从 AngularJS index.html 导航到 VueJS webapp

Posted 2023-02-23

技术标签:

【中文标题】无法从 AngularJS index.html 导航到 VueJS webapp【英文标题】：Unable to navigate to a VueJS webapp from AngularJS index.html 【发布时间】：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。 ***.com/questions/30380769/… 我已经尝试过了，它可以工作。但是当我加载的页面来自 VueJS 时不会。在这里，如果它来自 AngularJS，它可以正常加载。但是当它在 Vue 中时，就没有运气了。它给了我一个空白框架。 【参考方案1】：

Vue 和 Angular 可以很好地共存于一个页面上。

因为您使用 Angular 来渲染 Vue 的 HTML，所以您需要确保在渲染新的 HTML 之后触发您的 Vue 初始化。您可以通过以下几种方式完成此操作：

// Implement me

.js

第一个选项可能性能更高，而第二个选项可能会使您的开发设置更清洁。

【讨论】：

首先非常感谢您回答我的问题。我一直在互联网上寻找帮助。你告诉的第一个选项，如果可能的话，你能提供一个例子吗？我不认为我可以直接在这种方法中提供我的 Vue 代码，可以吗？当我尝试第一个选项时，它给了我与之前我在 OP 中提到的启动白色背景相同的行为。让我上传那个截图。代码比截图更有帮助，所以如果你能在某个地方添加它会更好。添加了代码。请检查。这是您在 option1 中告诉添加到 errorinput.js 文件中的 app.vue 代码。是的，您不能只粘贴.vue 模板。您要么需要用 javascript 编写组件，要么使用我提到的方法 #2 在路由加载后加载包。

以上是关于无法从 AngularJS index.html 导航到 VueJS webapp的主要内容，如果未能解决你的问题，请参考以下文章

如何从 Python Pyramid 为 AngularJS 应用程序提供 index.html 文件？

AngularJS 1.5“无法从州'家'解决'___'”

为啥我的 AngularJS 视图无法在 Cordova 中加载？

如何使 AngularJS 路由与 index.html/#/myPage 一起使用，如 index.html#/myPage

onsenUI AngularJS UI 无法正常工作？

Angular 8 混合应用程序无法识别 AngularJS 组件