无法链接到我的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页面应用程序

回答

相关问题