2016-04-13 7 views
0

私は、ユーザーが2つのボタンのいずれかをクリックすると、対応する登録フォームを持つ新しいページに誘導されるプロジェクトに取り組んでいます。私はフロントエンドの開発者であるため、サーバー側では非常に未経験です。私はこれを達成するためにノードのルーティングが必要だと推測していますが、これを行う方法はわかりません。現在、ユーザーがボタンをクリックすると、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は次のようになります。digital.htmlはデジタル登録フォームと画面で

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

.htmlは画面登録フォームです。もし誰かがそれを見たいなら、私はそれらのファイルを提供することができます。 何が起こっているかを視覚化できるように、サンプルコードを私に提供してください。皆さんありがとうございました。本当に感謝しています。 よろしくお願いします。 Node Clueless

+0

ngRouteの現在の設定でエラーが発生しますか?何が間違っているの? – shershen

+0

この質問がどのようにノードに関連しているのか分かりませんが、角度コードしか表示されません –

+0

同じ質問を投稿したのはなぜですか? –

答えて

0

シンプルなページWebアプリケーションでは、ルーティングパートは前面に表示されます(例ではAngularなど)。 NodeJSはルーティングの問題を処理しませんが、REST APIインターフェイスを提供します。

あなたが望むのは、あなたの$routeProviderをうまく構成することだけです。ルートプロバイダの設定では、各子ページのコントローラがないことに気づきます。多分あなたはこの点から始めることができますか?

関連する問題