JavaScript文件无法find并加载
我正在学习使用MEAN堆栈的教程。 我达到了我应该开始使用Node的地步。 一切都安装完毕，我已经把angular度和引导脚本放在各自的文件夹中。 问题是，当我尝试在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"); }]);
您不需要将您的资产与path中的公用文件夹进行引用
<link rel="stylesheet" type="text/css" href="../public/stylesheets/bootstrap.css">
假设你已经在你的express服务器中设置你的public文件夹（在这种情况下是你的app.js ），你应该看到类似于下面的一行
app.use(express.static('public'));
这是公共资产的默认位置，即您的CSS等被定义的地方，而不仅仅是这样
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.css">
如express将默认导航到定义的公用文件夹。
是app.js你的服务器文件？ 如果是这样，它在你的public文件夹？ 道歉，但很难从图片中知道。
如果是这种情况，则不需要在文件path中包含public 。
另外，你是否提供了一个静态文件夹？ （使用app.use(express.static('public') ）;这是一个很好的做法 – 它做的只是public文件夹 – HTML中的所有path将相对于此文件夹，就好像它是这样做意味着你也可以把public从你的文件path中取出，正如我所说的，这是一个很好的习惯，因为通常你只想尽可能less地展示你的服务器结构 – 这样只能提供一个静态文件夹。
如果您使用快速路线，则需要在app.js设置静态path，如下所示：
app.use(express.static(__dirname + '/public'));
而在index.ejs中：
<link rel="stylesheet" type="text/css" href="/public/stylesheets/bootstrap.css"