2016-04-13 68 views
0

我正在開發一個項目,當用戶點擊兩個按鈕選項中的任何一個時,用戶將被定向到一個帶有相應註冊表單的新頁面。我是前端開發人員,因此在服務器方面很缺乏經驗。我猜測我需要節點路由來實現這一點,但不知道如何做到這一點。目前,我正在使用ng-view指令在用戶單擊按鈕時加載新的註冊頁面。但正如我所說,這不是我想要的,因爲當登記表出現時,2個按鈕和原始問題仍然出現,這不是我想要的。我可以使用ng-hide和ng-show,但我決定不這樣做,因爲我希望用戶被引導到顯示註冊表單的新頁面。我的主頁是index.html,然後它看起來像這樣:如何使用ngRoute進行路由?

<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> 

我的角度應用或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是數字登記表和屏幕.html是屏幕註冊表單。如果有人想看到這些文件,我可以提供這些文件。 請給我提供一些示例代碼,以便我可以直觀地看到發生了什麼。感謝大家的幫助,我非常感謝。 此致 節點無知

+0

ngRoute的當前設置是否給出錯誤?到底發生了什麼問題? – shershen

+0

我無法理解這個問題如何與節點相關,我只能看到角碼 –

+0

爲什麼你發佈相同的確切問題? –

回答

0

在一個簡單的webapp應用程序中,路由部分在前面處理(例如Angular在你的例子中)。 NodeJS不處理路由問題,而是處理REST API接口。

所以你想要的只是配置好你的$routeProvider。因爲我注意到在你的路由提供者配置中,每個子頁面都沒有控制器。也許你可以從這一點開始?