Logan Stewart Logan Stewart - 3 months ago 7
AngularJS Question

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

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!

Answer

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.