页面路由不完全是我的意图

时间:2016-04-13 14:00:52

标签: angularjs node.js

我在下面的代码中使用了Angular Routing来引导用户使用新的注册表单。这个应用就像这样。用户看到一个网页,要求他们通过单击相应的按钮在“数字报价”或“屏幕报价”之间进行选择。单击按钮后,应将其指向另一个显示相应注册表单的页面。就不同的注册表格而言,我已经建立了所有。但是我在功能方面有一个大问题。当用户单击该按钮时,它应该在不同的页面中加载注册。我不知道该怎么做。对了,我没有使用ng-view指令,这意味着按钮和初始问题仍然存在。我的目标是,一旦你点击按钮,你看到的只是相应/不同的注册页面。任何帮助或方向将不胜感激。我不相信Angular可以解决这个问题。 谢谢 主页 - >的index.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>
       <div class="container">
         <div ng-view></div>
       </div>
    </body>

angular JS文件或redirect.js文件如下所示:

    var app = angular.module('myHome', [ngRoute]); 
.config(['$routeProvider', function($routeProvider) { 

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

其中digital.html是数字选项的注册表单,screen.html是屏幕注册表单选项。如果有人想看到这些注册表单,我也可以粘贴这些文件。非常感谢你的帮助。

2 个答案:

答案 0 :(得分:1)

  

当用户点击按钮时,它应该在a中加载注册   不同的页面

可能你可以通过下一个方式解决它。

只需点击按钮,从服务器点击新页面。(从href =“#/ digital”中删除#)并在服务器端应用程序中创建新路由(/ digital)。

答案 1 :(得分:0)

唯一的方法是使用target =“blank”的锚标记。 Angular是完全SPA,所以它(ng-view)永远不会允许你在新窗口中打开页面(我认为你试图这样做)。最好根据当前需要使用<a>标记。