在localhost上运行我的程序时，它找不到.js文件，也找不到我的bootstrap源

Question

我有一个程序，当说明脚本位置，它能够找到它们（它给我推荐的文件夹名称等，但在运行程序时，我一直在

“GET http：// localhost：8080 / js / admin.controller.js ”

错误。 我的文件在资源中

• 角
• 引导
• JS
• static（html文件）

包含在HTML文件中：

<script src="../js/admin.controller.js"></script>
<script src="../js/admin.factory.js"></script>
<script src="../js/admin.service.js"></script>

我离开文件夹，输入js，它推荐路径，并且在编译时没有错误。 然而，我仍然在运行时或当我尝试访问bootstrap / angular时得到GET错误。 我也试过通过href访问。

谁知道为什么？ 我非常感谢你的帮助！

Answer 1

检查您的文件结构

如果你的应用程序没有找到你的js文件你没有给出正确的src。 你的主应用程序或类似的东西你的文件结构应该是这样的

.
├── app
│   ├── app.module.js
│   ├── app.routes.js
│   ├── components
│   │   ├── about
│   │   │   └── about.html
│   │   ├── contact
│   │   │   └── contact.html
│   │   ├── home
│   │   │   ├── homeCtrl.js
│   │   │   ├── homeService.js
│   │   │   └── partial-home.html
│   │   ├── login
│   │   │   ├── loginCtrl.js
│   │   │   ├── login.html
│   │   │   └── loginService.js
│   │   └── services
│   │       └── services.html
│   └── shared
│       └── navigation-bar 
│           ├── navbarDirective.js
│           ├── navbarService.js
│           └── navigation-bar.html
├── assets
│   ├── css
│   │   ├── bootstrap.css
│   │   └── style.css
│   ├── img
│   │   └── homeBanner.png
│   └── js
│       └── ui-bootstrap-tpls-0.13.4.js
├── index.html
├── npm-debug.log
└── README.md

的index.html

请注意，Index.html位于我的应用程序的根目录，这应该始终如此，所以您只需要进入文件夹来检索脚本等。

例

如果你试图从上面的文件结构中获取javascript文件，那么你的索引页面看起来就像这样

<!-- Angular Modules -->
<script type="text/javascript" src="app/app.module.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/components/home/homeCtrl.js"></script>
<script type="text/javascript" src="app/components/home/homeService.js"></script>
<script type="text/javascript" src="app/shared/navigation-bar/navbarDirective.js"></script>
<script type="text/javascript" src="app/shared/navigation-bar/navbarService.js"></script>
<script type="text/javascript" src="app/components/login/loginCtrl.js"></script>
<script type="text/javascript" src="app/components/login/loginService.js"></script>

添加角度

在索引页面的头部我添加了Angular，这只是为了确保它在我的项目中与bootstrap.css和ui.bootstrap一起快速加载。

这是头部的样子

<title>My Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Angular links -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<!-- angularBootstrap link -->
<script type="text/javascript" src="assets/js/ui-bootstrap-tpls-0.13.4.js"></script>
<link rel="shortcut icon" href="https://angularjs.org/favicon.ico" />

结论

希望这能让您更好地了解结构和调用脚本。 随时问我任何问题，我会更新这个答案。

Answer 2

您无法访问../文件的原因是您的index.html是从服务器的根目录访问的。 因此，所有文件必须位于该目录之下 。 您可以选择更改服务器的根目录（这意味着例如从http://localhost:8080/<pathFromRoot>/index.html （不太好！）提供索引，或者将资产目录移动到包含目录的目录下方index.html - 我的推荐。

您还可以移动服务器的根目录，将index.html放在那里，然后使用所有资产的相对路径。 这可能是最常见的事情。