Generating SEO-friendly URLs using HTML5 mode

All this while, all the URLs in our angularjs app have had # in the URLs. When building a CMS, ensuring that the URLs are meaningful and SEO-friendly is quite important.

To make our site URLs are SEO friendly, we need to turn on the HTML5 mode in $locationProvider by making the following highlighted changes in the angcms/public/js/app.js file:

.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});
  $locationProvider.html5Mode(true);
}]);

The next thing to do is set the base URL in our angcms/public/index.html file, as highlighted in the following code:

<title>AngCMS</title>
      <base href="/">
  <link rel="stylesheet" href="css/bootstrap.min.css"/>

Refresh the Index page, and you will notice that your URLs are now clean without the # symbol in them.