无法链接到我的 MEAN Stack 应用程序中的其他 HTML 页面答案

【问题标题】：Can not link to other HTML pages in my MEAN Stack Application无法链接到我的 MEAN Stack 应用程序中的其他 HTML 页面
【发布时间】：2016-04-26 09:21:11
【问题描述】：

所以我一直在做一些关于创建平均堆栈应用程序的教程，直到现在我已经设法创建了一个单页应用程序，但是当我尝试链接多个 html 页面时，除了 index.html，它要么返回一个 CANNOT GET 页面，要么根本不做任何事情。我是初学者，所以任何输入都会很棒。

这是文件结构：

这是我的 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>

【问题讨论】：

标签： angularjs node.js mongodb express mean-stack

【解决方案1】：

您目前仅支持根导航 (/) 和 signupController.list 处理的路线列表（我们看不到）。如果您想要支持另一个页面，您可以为其添加一个处理程序，app.get('/about', function() {});，然后当用户导航到该路由时，您将获得该路由的视图。请注意，这些是服务器端视图，而不是客户端（角度）。

【讨论】：

【解决方案2】：

看不到控制器文件的内容，虽然我看不到客户端路由文件。

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

【讨论】：