How change URL and don't reload page in AngularJS

Question

My AngularJS project uses html5mode, I do these codes to open html5mode

• In HTML:

...
<base href="/features-A/">
...

• In JS:

app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5mode(true)
}])

NOTE: the /features-A/ is not an actual folder in my project, it is just a behavior defined in AWS CloudFront, Because we also have some URL /features-B point to other projects, We only need to know that: Whether it is accessed via "http://myhost.com" or "http://myhost.com/features-A/" is the entry file for my project: index.html

Here is what the browser does:

1. when going to my "Sign In" page, The URL in the address bar is

   http://myhost.com/features-A/signin

2. When going to "Home" page, The URL in the address bar is

   http://myhost.com/features-A/ome

As we see, AngularJS changed the URL via History API add /features-A/ inside to the URL

What I want

1. when people access "Sign In", The URL does not have /features-A/:

   http://myhost.com/signin

2. When people access the "Home" page, The URL has /example:

   http://myhost.com/features-A/home

This will make our website looks like the Sign In page is a system that is independent and outside /features-A/.

What I tried

I have tried some solutions however they haven't worked:

1. Set base href Dynamically In stateChangeSuccess event but URL still changed
2. Use HTML5 history API pushState and replaceState function, this way would cause page refresh indefinitely

So, Is there any solution to solve this problem?

Answer 1

how do not you create a new virtual host?

via php

php -S localhost:8080

type this Command in your folder's project