Angular Direct Url without hash

Question

I have a site that i built on mvc and c#.net which works fine, now i am trying to build mobile site for the same using angular, so i want the urls to be without hash so i use the following code in my js file

var app = angular.module('mobilesite', ["ngRoute", "ngTouch", "mobile-angular-ui", "shoppinpal.mobile-menu"]);

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Blog', {
        templateUrl: "/Blog/Index"
    });

    //$locationProvider.html5Mode(true);
});

app.controller('maincontroller', function ($scope) {
    $scope.Name = "Index Mobile";
});

app.controller('blogcontroller', function ($scope) {
    $scope.Name = "Blog Mobile";
});

for example the url for blog will http://localhost/Blog and it works perfectly with no issues when clicked on the link.

But when i open a new browser and type the above url directly i get no layout loaded and only it displays {{Name}}. When i changed the javascript to use hash then everything works perfectly.

Am i missing something here, please help.

score 3 · Answer 1 · edited May 23 '17 at 11:51

I think you need to set $locationProvider.setHtml5Mode(true). See https://docs.angularjs.org/api/ng/provider/$locationProvider and AngularJS routing without the hash '#'

Edit

You also need to configure you server for deep links. Take a look at this page: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

If you're using Apache:

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

score 0 · Accepted Answer · answered Jul 26 '15 at 14:51

Thank you for the reply but infact i was using mvc 4.0 and i fixed it two ways, first i have web.config url rewrite logic from regular site, and since this is mobile i dont want different urls, so even though i made my html5mode to true, it is not working, so i changed routeprovider condition to lower case and that triggered.

 <rewrite>
  <rules>
    <rule name="Add WWW prefix">
      <match url="(.*)" ignoreCase="true"></match>
      <conditions>
        <add input="{HTTP_HOST}" pattern="^xxxxx\.com"/>
      </conditions>
      <action type="Redirect" url="http://www.xxxxxx.com/{R:1}" redirectType="Permanent"/>
    </rule>
    <rule name="Lower Case URLs" stopProcessing="true">
      <match url="[A-Z]" ignoreCase="false" />
      <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
        <add input="{URL}" pattern="WebResource.axd" negate="true" />
      </conditions>
      <action type="Redirect" url="{ToLower:{URL}}" />
    </rule>
  </rules>
</rewrite>

but when i refreshed the page or accessing it directly i was checking on layout if the request.isajaxrequest and that did the magic.

Angular Direct Url without hash

2 Answers2

Linked