When setting up my routes in AngularJS, I have the following configuration:
discountLinkApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/discount-links', {
templateUrl: 'js/partials/discount-links.html',
controller: 'discountLinkController'
}).
when('/register/:tag', {
templateUrl: 'js/partials/register.html',
controller: 'paymentPageController'
}).
otherwise({
redirectTo: '/discount-links'
});
//Removes the # from the URL
$locationProvider.html5Mode(true);
}]);
The structure of my root directory looks like this:
├── index.php
├── js
│ ├── app.js
│ ├── controllers
│ │ └── mainCtrl.js
│ ├── partials
│ │ ├── discount-links.html
│ │ └── register.html
│ └── services
│ └── discountLinkService.js
└── views
└── index.php
For the /discount-links route, AngularJS correctly requests:
/js/partials/discount-links.html
However, for the '/register/:tag' route, it seems to be looking for
/register/js/partials/register.html
Notice the additional /register/ segment which does not exist, resulting in a 404 error.
I am trying to understand why this discrepancy is occurring. The only difference between the two routes is the :tag.
To solve this issue, I can add ../ to the templateUrl so it becomes ../js/partials/register.html, but this feels inconsistent to me.
Does anyone have any insights or ideas on how to resolve this?