AngularJS - How does $ location html5Mode work?

Question

I ask about this because a couple of times now I tried to play with the command $locationProvider.html5Mode(true) along with <base href="/"> and encountered a lot of errors causing scripts / styles / images for my project, I assume that I am doing something wrong, but is there some kind of folder structure that you should follow so that you do not encounter these errors? Or is there a specific way base href works that I don't quite understand?

I recently thought I would try this in a very small application. This is an efficiently static website, but I want to use Angular routing to make sure all pages can load instantly. Therefore, my structure will 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 is small, but I will use Angular in this project for routing, no more so that it fits my needs.

I put <base href="/"> in my head, put ng-app and ng-controller in the body, and put a <div ng-view> somewhere inside the body too.

I added in $locationProvider.html5Mode(true) and tried the application. Then all my scripts are loaded as http://localhost:8888/script.js , which is incorrect. The project is in the folder, so index.html is in http://localhost:8888/my-project/index.html . Thus, it should load scripts from http://localhost:8888/my-project/js/angular/app.js , for example.

Is there something I don't understand about base href ? In the end, I can host this application somewhere on the network, so I want the URLs for scripts, etc. Everyone was important for the file. Does anyone have any ideas?

Ok, so above the base href tag I would have CSS styles that were 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 will try to load it as if the js folder was directly in localhost:8888/js .

Answer 1

Angular Frame is a single page application (SPA) that can run in the browser, essentially causing the browser to execute the running code snippets rather than making server calls using a hash ( # ). Typically, a C # URL will go to a specific anchor point on the page; in the case of Angular or other similar SPA infrastructures, # instead redirected to the code segment.

Ideally, you should not refer to this # in the URLs of your page. This is where Html5Mode comes into play. Html5Mode can hide # using the HTML5 Push state (also known as the story API).

When Html5Mode is enabled, the regular links on the page are silently replaced with Angular using event listeners. When these events are fired, the current page is entered into the browser history and a new page is loaded. This gives the illusion that you are moving to a new page and even allowing you to use the back button.

This is good when you are dealing with links that are called from a running application, but rely on event listeners cannot work if you go to a page from an external source where Angular is not loaded into memory. To handle this, you must download your pages from a web server that supports URL rewriting . When the server receives a request for a URL that does not have a physical page, it rewrites the URL to load the basic HTML page where Angular can be loaded and accepted.

When Angular receives a request for a route that has been rewritten in this way, it must first determine what the intended route is. This is where the Base HTML tag comes into play. Angular uses the Base link to help it determine which part of the URL is on the server and which part is the client route. Essentially, where # in the URL will be if Html5Mode was not included.

Unfortunately, Base is an HTML tag that the browser uses more than Angular. The browser also uses this tag to determine the correct location for loading scripts and resources using relative paths, regardless of the path in the location bar. In general, this is not a problem if all the scripts and resources relate to the location of the Index.html file. When the Base parameter is omitted, the browser will load scripts from the visible base path specified by the current URI. However, once you provide it, the browser will use whatever value you provide.

In general, if you do not host Angular on the subpage of your site and want your users to expect something specific in the URL string, you should always control the base on your server and use Base="/" on the client side.