In my single page application, the footer features various links such as About, FAQs, Privacy, and more. As of now, I am using angular-strap modal to display a modal for each link. The code snippet looks like this:
<li>
<a href="#about" id="about"
data-modal-class="my_modal gradient-body"
data-bs-modal="'templates/about.html'">About
</a>
</li>
Currently, clicking on the About link does not change the URL of my application, it simply opens the modal popup. However, I would like to maintain the same functionality while also having a URL structure like mydomain.com/#about to directly open the about box.
To achieve this, I am using $routeProvider to define routes in the following manner:
$routeProvider
.when('/home', {
templateUrl: 'templates/map.html'
})
.when('/verify/:code',{
template : " ",
controller : 'VerifyReportCtrl'
})
.otherwise({ redirectTo: '/home' });
The main reason for making this change is to improve the SEO of my application since currently there is no way to index the content of the About page.