Question

我试图将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 app的Angular页面和链接（Manage Error Descriptions）：

白色背景问题：

添加代码后

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>
}]);

Answer 1

Vue和Angular可以在页面上共存。

因为您正在使用Angular来呈现Vue的HTML，所以您需要确保在呈现新HTML后触发Vue初始化。你可以通过以下两种方式实现这一目标：

将Vue脚本粘贴到上面代码中的// Implement me
在路由加载后，使用Angular路由器中的挂钩加载特定于Vue的.js文件

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

无法从AngularJS index.html

1 个答案: