检查文件结构

Question

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

＆＃34;获取http://localhost:8080/js/admin.controller.js＆＃34;

错误。我的文件在资源中

angular
bootstrap
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

在索引页面的头部我添加了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的目录下 - 我的建议。 / p>

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

在localhost上运行我的程序时，它无法找到.js文件，也无法找到我的引导源

2 个答案:

检查文件结构

的index.html

实施例

添加Angular

结论