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...