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
– anvarik, Commented Jan 3, 2014 at 9: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
– Pnctovski, Commented Jan 3, 2014 at 9: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. — user2189331
– user2189331, Commented May 14, 2014 at 4:30

Robin Wieruch · Accepted Answer · 2015-03-15 13:10:53Z

3

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

answered Mar 15, 2015 at 13:10

Robin Wieruch

16.1k11 gold badges90 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iff_or · Accepted Answer · 2014-05-14 02:50:29Z

2

activate the html5mode for $location

edited May 14, 2014 at 2:50

iff_or

9291 gold badge11 silver badges25 bronze badges

answered Jul 17, 2013 at 12:57

Eduard Gamonal

8,0315 gold badges44 silver badges48 bronze badges

Comments

liamness · Accepted Answer · 2015-03-15 13:15:09Z

2

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.

answered Mar 15, 2015 at 13:15

liamness

7423 silver badges5 bronze badges

Comments

louisfischer · Accepted Answer · 2018-10-08 04:44:50Z

0

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

edited Oct 8, 2018 at 4:44

louisfischer

2,0942 gold badges25 silver badges40 bronze badges

answered Oct 7, 2018 at 22:04

Shashank

1

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related