Javascript 未加载到HTML中的外部文件_Javascript_Html_Angularjs

Javascript 未加载到HTML中的外部文件

javascript html angularjs

Javascript 未加载到HTML中的外部文件,javascript,html,angularjs,Javascript,Html,Angularjs,将外部文件加载到index.html时出现问题。我的样式表和JS文件根本不显示（错误404-找不到）。我的目录结构如下我的index.html是： <!DOCTYPE html> <html ng-app="myApp"> <head> <title>Orders and Customers</title> <link rel="stylesheet" type="text/css" href="./asset

将外部文件加载到index.html时出现问题。我的样式表和JS文件根本不显示（错误404-找不到）。我的目录结构如下

我的index.html是：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Orders and Customers</title>
    <link rel="stylesheet" type="text/css" href="./assets/css/stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
    <script src="./../app/app.js" type="text/javascript"></script>
    <script src="./../app/controllers/customer/CustomerController.js"></script>
    <script src="./../app/controllers/order/OrderController.js"></script>
    <script src="./../app/services/customer/CustomerService.js"></script>
    <script src="./../app/services/order/OrderService.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

非常感谢您的帮助

相对路径

<script src="./../app/app.js" type="text/javascript"></script>

等等，都指向了错误的目录

使用浏览器开发人员工具中的“网络”选项卡，检查发出的确切请求

如果整个应用程序目录是公共的（我认为不应该是公共的），“/。/”将引用视图目录。单身。指当前目录，在本例中是包含index.html的目录。双重的指它上面的目录，这里是视图，而不是

<script src="./../app/app.js" type="text/javascript"></script>

尝试使用完整路径：

<script src="/app/app.js" type="text/javascript"></script> <script src="/app/controllers/order/OrderController.js"></script>

试试这个

app.use(express.static(path.join(__dirname, 'views')));
只要使用

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

试试这个

app.use(express.static(path.join(__dirname, 'views')));
在server.js中

var router = express.Router(); router.use(express.static(path.resolve(__dirname, "../app")));
在index.html中

<script src="/app.js" type="text/javascript"></script> <script src="/controllers/customer/CustomerController.js"></script> <script src="/controllers/order/OrderController.js"></script> <script src="/services/customer/CustomerService.js"></script> <script src="/services/order/OrderService.js"></script>

路由器
是捕获路径的中间件。例如，
/service/*
匹配服务路径下的所有请求。因此，我更改了您的代码以处理“/app”文件夹下的所有资源。（例如：
/app/app.js
等）

path.resolve
将路径从相对更改为绝对。这意味着您可以添加另一个当前工作目录。
path.resolve（\uu dirname，“../app”）
从当前工作目录（
视图
）添加
“/app”
）。它从
“视图/。/app”
解析为
“/app”

（参考）
多亏了成贤，我才想出了解决问题的办法。我真的很感谢你们的帮助。我想详细阐述一下，仅供参考

在express中声明静态路径时，不需要引用与要从中导入的文件相关的任何内容。相反，您只需从声明的静态路径引用文件
嘿，谢谢你的回复。该目录看起来有点奇怪，但index.html实际上在views文件夹中，所以“/”不会指views文件夹，“//…”不会指根目录吗？编辑：上载了“网络”选项卡的图片。您的根目录不是公用的。其中的文件不是静态托管的，也不应该是静态托管的。您的公共目录似乎是视图目录。因此，尝试将所有静态内容（JS、css、图像等）移动到views目录下，并相对于views目录引用它。因此，如果您的html中有view/js/app.js中的app.js，请将其称为
Hey Hammad，再次感谢您的回复。我将其中一个控制器及其相关工厂放入一个名为“js”的文件夹中，该文件夹与index.html路径相同。不幸的是，这并没有解决问题。请尝试使用
。/assets/css/stylesheet.css
。感谢您的回复。我试过了，但错误仍然存在。天哪，你是个救命恩人。所以我做的有点不同。我对meanstack（以及一般的编程）相当陌生，似乎我不完全理解express.static的功能。实际上，我没有使用express.Router（），而是创建了另一个指向我的“app”文件夹的静态路径，并使用了您在我的HTML和low中列出的源路径。瞧，一切都很正常。我肯定会研究path.resolve，因为我认为这也是一个很好的解决方案。非常感谢你的帮助！如果你不介意的话，还有一个问题。角度组件（即控制器、服务、局部视图等）是否被视为静态内容？我觉得它们是动态的。
express.static
并不意味着“它处理静态内容”。它为服务器响应请求提供了一种方法。因此它可以处理
/app.js
路径。Tim的动态功能触发的不是http请求，而是javascript引擎。