在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那里，然后使用所有资产的相对路径。这可能是最常见的做法。