Question

我正在学习使用MEAN堆栈的教程。我到了应该开始使用Node的地步。一切都已安装，我已将角度和引导脚本放在相应的文件夹中。问题是当我尝试在localhost：3000中运行应用程序时，找不到这些文件。

我得到的错误：

我的项目的目录结构：

这是我到目前为止所获得的代码：

index.ejs

<!DOCTYPE html>
<html ng-app = "flapperNews">

<link rel="stylesheet" type="text/css" href="../public/stylesheets/bootstrap.css">

<style>
    .glyphicon-thumbs-up {
        cursor : pointer;
    }
</style>



<head>
    <title></title>
</head>

<body>

<div class = "row">

    <div class = "col-md-6 col-md-offset-3"> 

        <ui-view></ui-view>

     </div>
</div>

<script type="text/ng-template" id = "/home.html">
    <div class = "row">
        <div class = "col-md-6 col-md-offset-3">
            <div class = "page-header">
                 <h1>Flapper News</h1>
            </div>
        </div>
    </div>

    <div ng-repeat="post in posts | orderBy:'-upvotes'">
        <span class="glyphicon glyphicon-thumbs-up" ng-click="upvote(post)"></span>
            {{post.upvotes}}
        <span style="font-size:20px; margin-left:10px;">
            <a ng-show="post.link" href="{{post.link}}">
                {{post.title}}
            </a>
            <span ng-hide="post.link">
                {{post.title}}
            </span>
        </span>

        <span>
            <a href="#/posts/{{$index}}">Comments</a>
        </span>

    </div>

    <form ng-submit="addPost()" style="margin-top:30px;">
        <h3>Add a new post</h3>

        <div class="form-group">
            <input type="text" class="form-control" placeholder="Title" ng-model="newPost.title"></input>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Link" ng-model="newPost.link"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>

    </form>
</script>

<script type="text/ng-template" id="/posts.html">
    <div class = "page-header">
        <h3> 
            <a ng-show="post.link" href="{{post.link}}">{{post.title}}</a>
            <span ng-hide = "post.link">{{post.title}}</span>
        </h3>
    </div>

    <div ng-repeat = "comment in post.comments | orderBy : '-upvotes'">
        <span class = "glyphicon glyphicon-thumbs-up" ng-click = "upvote(comment)">
            {{comment.upvotes}} - by {{comment.author}}
        </span>
        <span style="font-size:20px; margin-left:10px;">
            {{comment.body}}
        </span>

    </div>

    <form ng-submit = addComment() style = "margin-top:30px;">
        <h3>Add a new comment</h3>


        <div class = "form-group">
            <input type="text" class = "form-control" ng-model = "body" placeholder="Comment">
            <button type="submit" class = "btn btn-primary">Post</button>
        </div>
    </form>
</script>

</body>

<script src = "../public/javascripts/angular.min.js"></script>
<script src = "../public/javascripts/mean.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="../public/javascripts/angular-ui-router.js"></script>

<script src="../public/javascripts/bootstrap.min.js"></script>

</html>

mean.js

var app = angular.module("flapperNews",['ui.router','ui.bootstrap']);

// Injecting the posts service into the controller so
// we can access its data
app.controller ("mainCtrl",function ($scope,posts) {
    // Binding the scope.posts variable in our controller 
    // to the posts array in our service
    $scope.posts = posts.posts;

    $scope.addPost = function () {
        if ($scope.newPost.title === "" || !$scope.newPost.title) {
            return;
        }
        else {
            $scope.posts.push({title : $scope.newPost.title ,link : $scope.newPost.link,upvotes : "0",
  comments: [
    {author: 'Joe', body: 'Cool post!', upvotes: 0},
    {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
  ]
        });
            $scope.newPost.title = "";
            $scope.newPost.link = "";
        }


    }

    $scope.upvote = function (post) {
        post.upvotes ++ ;
    }

});

app.controller("postsCtrl",function ($scope,$stateParams,posts) {

    $scope.post = posts.posts[$stateParams.id];

    $scope.addComment  = function () {
        if ($scope.body === "") {
            return;
        }
        else {
                $scope.post.comments.push({
                body : $scope.body,
                author : "user",
                upvotes : 0
            });
        $scope.body = "";
        }
    }

});

// We're creating an object with an array property called posts
app.factory("posts",[function () {
    var o = {
            posts : []
        };
    return o;
}])

app.config (["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvier) {
// Configuring a home state
    $stateProvider
        .state("home",{
            url: "/home",
            templateUrl : "/home.html",
            controller : "mainCtrl"
        })
        .state("posts",{
            // id is a route parameter
            url : "/posts/{id}",
            templateUrl : "/posts.html",
            controller : "postsCtrl"
        });

    $urlRouterProvier.otherwise("home");
}]);

Answer 1

您无需使用路径中的public文件夹引用您的资源

<link rel="stylesheet" type="text/css" href="../public/stylesheets/bootstrap.css">

假设您已在public服务器中设置了express文件夹，如下所示（在这种情况下为app.js），您应该看到类似于下面的行

 app.use(express.static('public'));

这是公共资产的默认位置，即你的css等的定义。只是做

 <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.css">

默认情况下，express将导航到定义的公用文件夹。

Answer 2

您的服务器文件是app.js吗？如果是这样，它是否在您的public文件夹中？道歉，但从图片中很难说清楚。

如果是这种情况，则不需要在文件路径中包含public。

另外，您是否正在提供静态文件夹？（使用app.use(express.static('public')）;这样做是很好的做法 - 这样做只会提供public文件夹 - html中的所有路径都将相对于此文件夹，就好像它是目录一样。这样做意味着您也可以从文件路径中取出public。正如我所说，这是一种很好的做法，因为通常你想要尽可能少地展示你的服务器结构 - 只提供一个这样的静态文件夹会有所帮助。

Answer 3

如果您使用快速路线，则需要在app.js中设置静态路径，例如：

app.use(express.static(__dirname + '/public'));

在index.ejs中：

<link rel="stylesheet" type="text/css" href="/public/stylesheets/bootstrap.css"

无法找到并加载Javascript文件

3 个答案: