I am a beginner with Angular and I'm trying to understand how multiple routes can lead to the same view/templateUrl and controller. This is what I have written:
angular
.module('mwsApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap'
])
.config(function ($routeProvider, $locationProvider) {
// debugger
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'MainCtrl as vm',
})
.when('/rika', {
templateUrl: 'index.html',
controller: 'MainCtrl as vm',
})
// .otherwise({
// redirectTo: '/'
// });
$locationProvider.html5Mode(true).hashPrefix("!");
});
Problem: When I access "localhost:9000/", it displays correctly, but if I visit "localhost:9000/rika", it shows "Cannot get /rika".
Debugging: After investigation, I believe the issue lies with html5Mode. I want to remove the automatically added #! from the URL by Angular, but doing so triggers the error.
I would appreciate any suggestions or insights!