I'm asking this because a couple of times now, I've tried to play around with the $locationProvider.html5Mode(true)
command along with <base href="/">
and ran into a lot of errors calling the scripts/styles/images for my project. I guess there must be something I am doing wrong, but is there a certain folder structure you should follow so you don't run into these errors? Or is there a specific way that the base href
works that I'm not quite understanding?
Recently, I thought I'd try it on a very, very small app. It's effectively a static website, but I want to take advantage of Angular's routing to make sure all of the pages can load instantly. So my structure would be something like this:
my-project
css
images
js
angular
app.js
app.routes.js
mainCtrl.js
views
home.html
about.html
contact.html
index.html
So I know that this folder structure isn't great, but I'll only be using Angular in this project for routing, nothing more, so it fits my needs.
I put into the head <base href="/">
, put in body ng-app
and ng-controller
, and inside the body put a <div ng-view>
somewhere too.
I added in the $locationProvider.html5Mode(true)
and tried the app out. All of my scripts are then being loaded as http://localhost:8888/script.js
which is incorrect. The project is located in a folder so that index.html
is located in http://localhost:8888/my-project/index.html
. So, it should be loading the scripts from http://localhost:8888/my-project/js/angular/app.js
for example.
Is there something that I'm not understanding about the base href
? Eventually I may host this app somewhere online, so I want the URLs to scripts etc to all be relevant to the file really. Anyone have any ideas?
Alright, so above the base href
tag I would have my CSS styles which would be linked as css/style.css
and at the bottom of my body
tag I would have my scripts loaded as js/init.js
or js/angular/app.js
for example. This would try to load it as if the js
folder is located directly at localhost:8888/js
.