0

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?

laser
  • 1,388
  • 13
  • 14
guagay_wk
  • 26,337
  • 54
  • 186
  • 295
  • http://stackoverflow.com/a/23311886/189756 – Mohammad Sepahvand Apr 27 '14 at 04:33
  • possible duplicate of [$location / switching between html5 and hashbang mode / link rewriting](http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting) – rvignacio Jun 23 '14 at 17:35

1 Answers1

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.