javascript - AngularJS 重定向到另一个 ng-app 模块

标签 javascript jquery html angularjs route-provider

这里是 AngularJS 的新手。

我使用 Yeoman、grunt 和 Bower 创建了一个 AngularJS 应用程序。

索引页包含一些样式以及ng-app和ng-view。

index.html

<html>
  <head>
      <!-- CSS Imports -->
   </head>
   <body ng-app="MyApp1">
      <div>
          //Some divs here to  have some styles

          <div ng-view></div>
      </div>
    </body>
    <!--importing AgularJS, app.js, controller JS files -->
</html>

app.js

'use strict';

angular.module('MyApp1', [])
  .config(function ($routeProvider,$locationProvider) {
    $routeProvider
        .when('/', {
          redirectTo: '/main'
        })
      .when('/invoice', {
        templateUrl: 'views/invoice.html',
        controller: 'UploadController'
      })
      .when('/main', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/login', {
            templateUrl: 'views/login.html',
          })
      .otherwise({
        redirectTo: '/main'
      });
//    $locationProvider.html5Mode(true);
  });

    angular.module('LoginApp', [])
    .config(function ($routeProvider,$locationProvider) {

    });

索引页有ng-view将显示发票.html 或 main.html。默认为main.htmlma​​in.html

<div class="hero-unit">
  <a ng-href="views/login.html" target="_self">Login</a>
  <br>
  <a ng-href="#invoice">New Document</a>

</div>

好的。在此main.html ,我有两个链接。第二个是发票链接。无论如何,它将显示在 index.html ng-view 内。 Controller UploadController属于MyApp1模块。并且它有单独的JS文件。运行良好。

第一个链接指向另一个 HTML 页面。它是login.html。它还有另一个ng-app称为LoginApp。两个模块都是独立的并且位于不同的页面中。

当我点击第一个链接时,它会转到login.html。但在 URL 中它显示为 http://localhost:9000/views/login.html 。但我希望它显示为 http://localhost:9000/login ,就像其他 main.html ( http://localhost:9000/#/main ) 一样。当我编辑像 <a ng-href="#login">Login</a> 这样的链接时它不工作。

还有$locationProvider.html5Mode(true);不适合我。

最佳答案

将login.html 放入与index.html 相同的文件夹中。

我认为不可能路由到另一个模块。但是,login.html 的此路由规则不适用于(外部)页面。

关于javascript - AngularJS 重定向到另一个 ng-app 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20898111/

相关文章:

php - 将多选的数组数据发送到 Mysql

javascript - 停止在加载时调用 Html.Action

javascript - 如何获取 Canvas 上图像的坐标?

javascript - 禁止点击标记

javascript - nth-child 在我的情况下不起作用

javascript - 具有多个不同高度小部件的两列布局,如何使小部件可折叠并保持页面流动?

jquery - 当鼠标悬停在子菜单上时,阻止向下滑动的子菜单向上滑动

javascript - ScrollMagic - 进度条

css - 响应式视频 CSS

html - 如何在 Shiny 忙碌并显示加载文本时禁用所有操作按钮