How to remove index.html from url on website based on angularjs

Question

I didn't find a way to remove index.html from the url, because like this looks really ugly.

mydomain.com/index.html#/myview1 
mydomain.com/index.html#/myview2

Is there a way to remove that part, like that url will be so clear where the user is.

mydomain.com/myview1
mydomain.com/myview2

Tnx in advance for your time.

Edit: I just find way that it could work like:

mydomain.com/#/myview1
mydomain.com/#/myview2

which is pretty much better then with index.html.

But still if there is a way for shorter solution let me know.

Bitt

How have you done to remove index.html from url? – Blackball

Read the edit Alavaros. – Bitt

@Pnct how did you remove index.html as you mentioned in your edit? – Stjohn

@Stjohn just remove "index.html" from routing config, and everywhere you use as a link. And as i wrote above as my edit, you should use just the "#" char. But if you are asking about removing completely "index.html" without "#", you should try to activate the html5mode for $location as Eduard Gamonal answered on my question. – Bitt

Is URL-rewriting (mydomain.com/myview1 -> mydomain.com/index.html#/myview1) not an option? It's often cleaner and less work to enforce friendly URLs externally (outside of your framework, say, via mod_rewrite) than to muck around with plumbing, especially in path-y clientside frameworks like Angular/Backbone/etc. – Zoom

Answer 1

Maybe this approach could help:

Add $locationProvider.hashPrefix();, which removes index.html in your URL, in your app.js config. Don't forget to add the new dependency. After that your app.js could look similar to this:

 angular.module('myApp', [
  'ngRoute'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix(); // Removes index.html in URL

  $routeProvider.otherwise({redirectTo: '/someroute'});
}]);

Note that this does not remove the hashtag. You can find your new route at: .../app/#/someroute

Snappish

Answer 2

activate the html5mode for $location

Atory

Answer 3

You'll have to do some work on the server side to set this up. html5mode gets you part of the way, but as soon as the user refreshes, the reference to the file will be wrong. You want links that are persistent and can be shared, presumably. Basically make sure any request to url.com/myapp/{etc} (or whatever) gets redirected to index.html and let your angular app sort out the routing.

Bakst

Answer 4

Use

<rewrite>
    <rules>
        <rule name="RewriteRules" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
      </rule>
  </rules>
</rewrite>

And on Index page

<base href="/" /> 

And on your config use

$locationProvider.html5Mode(true);

It should work

Epilogue