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

Question

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"

errors. My files are in resources with

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

Included in HTML Files:

<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.

Anyone know why? I would greatly appreciate the help!

Solution 1

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

.
├── 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

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.

Example

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

<!-- 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.

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.

Solution 2

The reason you can't access ../ files is that your index.html is being accessed from the root of your server. All files must therefore be below that 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.

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