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

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

I have a config code

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

html code
  <base href='/test/app/' />
<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>
 <div ng-view></div>

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?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
_ _, 2014-10-26

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

Abror Jakey, 2016-05-06

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

Viktor Sidorets, 2016-08-25

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!

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question