Angularjs Routing. How to remove hash tags from links while maintaining the ability to refresh the page?

J

Jazper2014-10-26 12:54:26

Angular

Jazper, 2014-10-26 12:54:26

I have a config code

app.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider.otherwise({redirectTo: '/'});
    $routeProvider
      .when('/', {
        templateUrl: 'views/view.html',
        controller: 'View1Ctrl'
      })
      .when('/view1', {
        templateUrl: 'views/view1.html',
        controller: 'View1Ctrl'
      })
      .when('/:testId', {
        templateUrl: 'views/view2.html',
        controller: 'View2Ctrl'
      });
    $locationProvider.html5Mode(true);
}]);

html code

<head>
  <base href='/test/app/' />
</head>
<body ng-app="app">

  <ul class="menu">
    <li><a href="#/">view</a></li>
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/12">view2</a></li>
  </ul>
 <div ng-view></div>
</body>
</html>

Everything works fine, hashes are not visible in the links, forward and backward transitions work, but when updating / reloading the page on a link like localhost / test / app / view1 , an error occurs that such a page was not found.
If you remove the line $locationProvider.html5Mode(true); hash tags appear in links - #, and pages are updated correctly.
How to make the links look beautiful and the update works fine?

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

_

_ _, 2014-10-26
@AMar4enko

Depends on where you run. If, for example, for nginx, then a special rule is prescribed in its configuration, which, based on the User-Agent, shows index.html for all routes, and angularjs resolves everything by location.
Well, in all other cases, the approach is similar.
It's just that sometimes it is necessary to give a "live" user an angularjs application, and a pre-prepared statics to a search robot. If you are not interested in robots yet, then just give index.html regardless of the url

A

Abror Jakey, 2016-05-06
@ayyjay

RewriteEngine On
RewriteBase /test/app/
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /test/app/index.html

V

Viktor Sidorets, 2016-08-25
@v3ctor

People who are interested in this topic, please check out my deep-ngroute with dynamic pages . I did it for myself, so something may be missing!