Javascript 在本地主机上运行我的程序时，它找不到 .js 文件，也找不到我的引导程序源

When running my program on localhost, it can't find .js files, nor the source of my bootstrap

提问by Logs

I have a program that when stating the script locations it is able to locate them (it gives me the recommended folder names, etc., but when running the program I keep getting

我有一个程序，当声明脚本位置时，它能够找到它们（它给了我推荐的文件夹名称等，但是在运行该程序时，我不断得到

"GET http://localhost:8080/js/admin.controller.js"

“获取http://localhost:8080/js/admin.controller.js”

errors. My files are in resources with

错误。我的文件在资源中

• angular
• bootstrap
• js
• static (html files)

• 有角的
• 引导程序
• js
• 静态（html 文件）

Included in HTML Files:

包含在 HTML 文件中：

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

I get out of the folder, enter js, where it recommends the path, and it gives no errors at compile time. Yet I'm still getting the GET errors at runtime or when I try to access bootstrap/angular. I've also tried accessing by href.

我走出文件夹，输入js，在那里推荐路径，编译时没有报错。然而，我仍然在运行时或尝试访问引导程序/角度时收到 GET 错误。我也试过通过href.

Anyone know why? I would greatly appreciate the help!

有谁知道为什么？我将不胜感激！

回答by Joe Lloyd

Check your File Structure

检查您的文件结构

If your app is not finding your js files your not giving the correct src. Your file structure should be like this for your main app or something simmilar

如果您的应用没有找到您的 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

索引.html

Notice that Index.html is at the root of my app this should always be the case so you are just going into folders to retrieve scripts etc.

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

Example

例子

If you were to try to get the javascript files from the above file structure your index page would look something like this

如果您尝试从上述文件结构中获取 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>

Adding Angular

添加角度

In the head of the index page I have added Angular, this is just to make sure it loads fast in my project along with bootstrap.css and ui.bootstrap.

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

here is what the head looks like

这是头部的样子

<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" />

Conclusion

结论

Hope this gives you a better idea of structure and calling scripts. feel free to ask me any questions and I'll update this answer.

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

回答by caasjj

The reason you can't access ../files is that your index.htmlis being accessed from the root of your server. All files must therefore be belowthat directory. You have the option of changing the root of your server (which would then mean e.g. serving your index from http://localhost:8080/<pathFromRoot>/index.html(not great!) or moving your asset directories below the directory containing index.html- my recommendation.

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

You can also move the root of your server, put index.htmlthere and then use relative paths to all your assets. This is probably the most common thing done.

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