Javascript 无法找到和加载文件

Question

我正在学习使用 MEAN 堆栈的教程。我到了应该开始使用 Node 的地步。一切都已安装，我已将 angular 和 bootstrap 脚本放在相应的文件夹中。问题是当我尝试运行 localhost:3000.

中的应用程序时，发现了 none 个这些文件

我遇到的错误：

我的项目目录结构：

这是我目前得到的代码：

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

app.js 是您的服务器文件吗？如果有，它在您的 public 文件夹中吗？抱歉，从图片上很难看出来。

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

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

Answer 2

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

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

在index.ejs中：

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

Answer 3

您不需要在您的路径public文件夹中引用您的资产

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

假设您已如下设置 express 服务器中的 public 文件夹（在本例中为您的 app.js），您应该会看到类似于下面的行

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

这是 public 资产的默认位置，即您的 css 等 defined.Rather 只需

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

因为 express 默认情况下将导航到定义的 public 文件夹。

Javascript 无法找到和加载文件

Javascript files can't be found and loaded

javascript

node.js

express

angularjs

mean-stack