Question

我正在尝试使用MEAN堆栈进行以下分配。

我创建了几个工作正常的注册表单。一个注册页面是index.html（通过Angular加载其中的几个视图/标签，因此它们是多页面的），另一个是index2.html。
- 我还创建了一个主页，这是一个简单的页面有公司的标志，名称和两个按钮。
点击每个按钮会引导您进行不同的注册表单（index.html或index2.html）。最后一个功能是我遇到问题的地方。如何将主页面连接到不同的注册表单？换句话说，如何在用户点击相应的按钮时将用户重定向到正确的注册页面？我应该使用节点路由到正确的注册页面还是使用Angular Route？如您所见，目前我正在尝试使用Angular Route但不确定这是否是用于此目的的正确工具。任何帮助和方向将不胜感激。谢谢

以下是我对主页面（home.html）的代码：

<html ng-app="myHome">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Home Page</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link rel="stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css"/>
        <link rel="stylesheet" href="/css/redirect.css"/>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"> </script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><!--This is to call Angular JS-->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
        <script src="/js/redirect.js"></script>  
    </head>
    <body>
        <div class="container">
            <div class="row" id="rotate">
                <div class="col-md-6 col-md-offset-3">
                    <img src="/css/Logo_75.png">
                </div>
            </div>
            <div class="row">
                <h1>WHAT TYPE OF QUOTE ARE YOU REQUESTING:</h1><br>
                <h1>DIGITAL OR SCREEN QUOTE?</h1>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <button type="button" class="btn btn-success"><a href="#/digital">DIGITAL QUOTE</a></button>
                    <button type="button" class="btn btn-success"><a href="#/screen">SCREEN QUOTE</a></button>
                </div>
            </div>
        </div>
    </body>

这是角度JS文件：

var app = angular.module('myHome', [ngRoute]);

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/digital', {
            templateUrl: '/index.html'
        }).
        when('/screen', {
            templateUrl: '/index2.html'
        }).
        otherwise({
            redirectTo: '/home.html'
        });
}]);

其中index.html是＆＃34;数字＆＃34;的注册表格。 option和index2.html是＆＃34;屏幕＆＃34;的注册表单。选项。如果有人需要查看这些注册表的代码，请告诉我感谢

Answer 1

您需要使用ng-view指令。将容器更改为如下所示

a.b.c.d

将您在其中的内容放入模板index.html中，并将index.html重命名为digital.html，将index2.html重命名为screen.html以与路由名称相对应（这是一个推荐，因为它很有意义我相信）

并将路由更改为此

products:
product_id  start_date  end_date    price_eur
1           2000-01-01  2000-12-31  100
1           2001-01-01  2002-12-31  150


conversion_factors:
start_date  end_date    dollar_to_eur
1970-01-01  2000-03-31  1.50
2000-04-01  2000-06-30  1.60
2000-07-01  2001-06-30  1.70
2001-07-01  2003-06-30  2.00

result:
product_id  start_date  end_date    price_eur   dollar_to_eur
1           2000-01-01  2000-03-31  100         1.50                
1           2000-04-01  2000-06-30  100         1.60                
1           2000-07-01  2000-12-31  100         1.70                
1           2001-01-01  2001-06-30  150         1.70                
1           2001-07-01  2002-12-31  150         2.00

点击基于whcih按钮指向正确的表单

1 个答案: