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.

@Pnct how did you remove index.html as you mentioned in your edit? — anvarik, Jan 03 '14 at 09:14
@anvarik 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. — Pnctovski, Jan 03 '14 at 09:42
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. — , May 14 '14 at 04:30

score 3 · Answer 1 · answered Mar 15 '15 at 13:10

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

score 2 · Answer 2 · edited May 14 '14 at 02:50

2

activate the html5mode for $location

edited May 14 '14 at 02:50

iff_or

880
1
11
24

answered Jul 17 '13 at 12:57

Eduard Gamonal

8,023
5
41
46

score 2 · Answer 3 · answered Mar 15 '15 at 13:15

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.

score 0 · Answer 4 · edited Oct 08 '18 at 04:44

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

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

4 Answers4

Linked