無法鏈接到我的MEAN棧中的其他HTML頁面應用程序

所以我一直在做一些關於創建Mean stack應用程序的教程，直到現在我已經設法創建一個頁面應用程序，但是當我嘗試鏈接多個html頁面，而不是index.html，它會返回一個CAN NOT GET頁面或者根本不做任何事情。我是初學者，所以任何輸入都會很棒。無法鏈接到我的MEAN棧中的其他HTML頁面應用程序

這裏的文件結構：

這裏是我的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/views'））;但無濟於事。無論如何，任何輸入將不勝感激。提前致謝。

編輯：另外這裏的，如果可以幫助中的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>

來源

2016-04-25 Omar Fayez

您目前只支持根導航（/）和航線由signupController.list（這是我們無法看到的處理列表）。如果你有另一個你想要支持的頁面，你可以爲它添加一個處理程序，app.get('/about', function() {});，然後當用戶導航到該路線時，你將看到該路線。請注意，這些是服務器端視圖，而不是客戶端（角度）。

來源

2016-04-26 01:12:12 mariocatch

雖然我沒有看到客戶端路由文件，但看不到控制器文件的內容。

您可能想要使用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); 
});

來源

2016-04-26 01:21:11 amyloula

無法鏈接到我的MEAN棧中的其他HTML頁面應用程序

回答

相關問題