2016-04-25 8 views
0

平均スタックアプリケーションを作成するためのチュートリアルを行っていますが、これまでは1ページアプリケーションを作成していましたが、 index.html以外の複数のhtmlページをリンクすると、CAN NOT GETページを返すか、まったく何もしません。私は初心者なので、どんな入力も素晴らしいでしょう。ここで平均スタックアプリケーションの他のHTMLページにリンクできません

は、ファイル構造です:ここで

enter image description here

は私Server.jsです:

var express   = require('express'), 
    app    = express(), 
    bodyParser  = require('body-parser'), 
    mongoose   = require('mongoose'), 
    signupController = require('./server/controllers/signup-controller'); 


mongoose.connect('mongodb://localhost:27017/shopialmedia'); 

app.use(bodyParser()); 

app.get('/', function (req, res) { 
    res.sendFile(__dirname + '/client/views/index.html'); 
}); 


app.use('/js', express.static(__dirname + '/client/js')); 


//REST API 
app.get('/api/users', signupController.list); 
app.post('/api/users', signupController.create); 

app.listen(8080, function() { 
    console.log('I\'m Listening...'); 
}) 

私はそれがres.sendFileとは何かを持っていますが、私としてはかなり確信しています私はちょうど初心者だと言いましたので、私は代わりに何を書くべきか分かりません。私はapp.useを試しました(express.static( '../client/view'));しかし役に立たない。とにかく、再び入力があれば大歓迎です。前もって感謝します。

EDIT:それは助けることができる場合にも、ここでのindex.htmlです:

<!doctype html> 
<html ng-app = "signupApp"> 
<head> 
    <!-- META --> 


    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport --> 

    <title>Welcome to Shopial Media</title> 
    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap --> 
    <style> 
     html     { overflow-y:scroll; } 
     body     { padding-top:50px; } 
    </style> 


</head> 

<body style="background-color:lightgrey;"> 


<a class="btn btn-primary" href= "product.html" role="button">Products</a> 
<a2 class="btn btn-primary" href= "offers.html" role="button">Offers</a2> 
<a3 class="btn btn-primary" href= "search.html" role="button">Search</a3> 

<div class="jumbotron text-center"> 
      <h1>Welcome to ShopialMedia</h1> 
     </div> 


<h2> Sign up if you haven't already </h2> 

<div ng-controller = "signupController"> 
<form ng-submit = "createUser()"> 
<label> Email : </label> 
<input type="text" placeholder="Enter your Email" ng-model="userEmail" id="textEmail"></input> 
<BR> 
<label> Password: </label> 
<input type="text" placeholder="Enter your password" ng-model="userPass" id="textPass"></input> 
<BR> 
<label> First Name: </label> 
<input type="text" placeholder="Enter your First Name" ng-model="userFName" id=t extFname></input> 
<BR> 
<label> Last Name : </label> 
<input type="text" placeholder="Enter your Last Name" ng-model="userLName" id=t extLname></input> 
<BR> 
<label> Age : </label> 
<input type="text" placeholder="Enter your Age" ng-model="userAge" id=t extAge></input> 
<BR> 
<button type="submit" ng-click="signup()"> Sign Up </button> 
</form> 
</div> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.js"></script> 
     <script type="text/javascript" src="/js/app.js"></script> 
     <script type="text/javascript" src="/js/controllers/signup-controller.js"></script> 

</body> 

答えて

0

あなたは現在唯一のルートナビゲーション(/)とsignupController.listによって処理ルートのリストをサポートしている(これは私たちが見ることができません)。サポートしたい別のページがある場合は、ハンドラを追加してapp.get('/about', function() {});とし、ユーザがそのページにナビゲートするとそのルートのビューを取得できます。クライアントサイド(角度)ではなく、サーバー側のビューです。

0

コントローラファイルの内容は表示されませんが、クライアント側のルートファイルは表示されません。

あなたの好みに応じて、stateproviderまたはrouteproviderを使用することができます。

大雑把に言えば、

$stateProvider reference [here][1] 

    // HOME STATES AND NESTED VIEWS ======================================== 
    .state('home', { 
     url: '/home', 
     templateUrl: 'partial-home.html' 
    }) 

    // nested list with custom controller 
    .state('home.list', { 
     url: '/list', 
     templateUrl: 'partial-home-list.html', 
     controller: function($scope) { 
      $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle']; 
     } 
    }) 

    // nested list with just some random string data 
    .state('home.paragraph', { 
     url: '/paragraph', 
     template: 'I could sure use a drink right now.' 
    }) 

または$ routeParams here

angular.module('ngRouteExample', ['ngRoute']) 

.controller('MainController', function($scope, $route, $routeParams, $location) { 
    $scope.$route = $route; 
    $scope.$location = $location; 
    $scope.$routeParams = $routeParams; 
}) 

.controller('BookController', function($scope, $routeParams) { 
    $scope.name = "BookController"; 
    $scope.params = $routeParams; 
}) 

.controller('ChapterController', function($scope, $routeParams) { 
    $scope.name = "ChapterController"; 
    $scope.params = $routeParams; 
}) 

.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/Book/:bookId', { 
    templateUrl: 'book.html', 
    controller: 'BookController', 
    resolve: { 
     // I will cause a 1 second delay 
     delay: function($q, $timeout) { 
     var delay = $q.defer(); 
     $timeout(delay.resolve, 1000); 
     return delay.promise; 
     } 
    } 
    }) 
    .when('/Book/:bookId/ch/:chapterId', { 
    templateUrl: 'chapter.html', 
    controller: 'ChapterController' 
    }); 

    // configure html5 to get links working on jsfiddle 
    $locationProvider.html5Mode(true); 
}); 
を参照
関連する問題