Why is this AngularJS routing broken when html5mode is enabled?

Question

I would like to use AngularJS routing. I am using AngularJS-seed-master as a start and routing works by default. However, it stopped working after I enabled html5mode. Below is the html code when routing works;

  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>    
  <div ng-view></div>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-route.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

Javscript app.js code when routing works;

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',  
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) 
{
    //configuration for $routeProvider
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});

}])

Then, I enabled html5mode by adding this to app.js

.config(['$locationProvider', function($locationProvider)
{        
    $locationProvider.html5Mode(true);
}])

It is at this point that AngularJS routing stops working. What did I do wrong? How can AngularJS routing be made to work after enabling html5Mode?

possible duplicate of $location / switching between html5 and hashbang mode / link rewriting — rvignacio
– rvignacio, Commented Jun 23, 2014 at 17:35

user2122112 · Accepted Answer · 2016-08-05 16:35:21Z

1

What you have to do is in "app.js" set the "html5mode" to true:

config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
   $locationProvider.html5Mode(true).hashPrefix('!');
   $routeProvider.otherwise({redirectTo: '/view2'});
}]);

In index.html add under header:

<head>
      <base href="/" />
      <meta name="fragment" content="!">
</head>

And change the link:

<body>
  <ul class="menu">
    <li><a href="/#!/view1">view1</a></li>
    <li><a href="/#!/view2">view2</a></li>
  </ul>
</body>

And that's it the main URL: http://localhost:8000

Will redirect to: http://localhost:8000/view1

And link will work showing sexy address.

answered Aug 5, 2016 at 16:35

user2122112

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

Collectives™ on Stack Overflow

Why is this AngularJS routing broken when html5mode is enabled?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related