無法找到並加載Javascript文件
[英]Javascript files can't be found and loaded
問題描述
我正在學習使用MEAN堆棧的教程。 我到了應該開始使用Node的地步。 一切都已安裝，我已將angular和bootstrap腳本放在相應的文件夾中。 問題是當我嘗試在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");
}]);
3 個解決方案
解決方案1
4 已采納 2016-09-12 20:25:21
你不必與參考您的資產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將默認導航到定義的公用文件夾。
解決方案2
0 2016-09-12 20:21:44
app.js是您的服務器文件嗎？ 如果是這樣，是因為你的public文件夾？ 道歉，但從圖片中很難說清楚。
如果是這種情況，則不需要在文件路徑中包含public 。
另外，你在提供靜態文件夾嗎？ （使用app.use(express.static('public') ）;這樣做很好 - 這樣做只是服務於public文件夾 - html中的所有路徑都是相對於這個文件夾的，就像它是這樣做意味着你也可以讓public走出你的文件路徑。正如我所說，這是一個很好的做法，因為通常你想要盡可能少地展示你的服務器結構 - 只提供一個像這樣的靜態文件夾有幫助。
解決方案3
0 2016-09-12 20:22:51
如果您使用快速路由，則需要在app.js設置靜態路徑，例如：
app.use(express.static(__dirname + '/public'));
在index.ejs中：
<link rel="stylesheet" type="text/css" href="/public/stylesheets/bootstrap.css"
JavaScript-加載頁面后無法調用計時器函數
[英]JavaScript - can't make the timer function to be called when the page is loaded
如果無法使用Javascript / jQuery加載視頻，則隱藏視頻容器
[英]Hide a video container if video can't be loaded with Javascript/jQuery
外部，動態加載 SVG：無法使用 JavaScript 訪問元素
[英]External, dynamically loaded SVG: Can't access Elements with JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.