As I was migrating my Angularjs code from ng-router to UI-Router, I encountered a challenge. In ng-router, implementing optional parameters like ":userid" was quite simple. However, I realized that the same approach is not supported in ui-router. Below are the routes from my existing ng-router module:
//Define routes for view using ng-router
$routeProvider.
when('/my-app/home/:userid?', {
templateUrl: '/templates/partials/home/HomeView.html',
controller: 'HomeViewController'
})
.when('/my-app/:productKey/:userid?', {
templateUrl: '/templates/partials/productpage/ProductPageView.html',
controller: 'ProductViewController'
})
.otherwise({redirectTo: '/my-app/home'});
I attempted the following in ui-router but it did not work. Despite going through multiple posts suggesting route duplication, I want to avoid it as it would clutter the code.
//Set the default route
$urlRouterProvider.otherwise('/my-app/home');
//Define routes for view (Please ensure the most matched pattern is defined at the top)
$stateProvider
.state('viewallcards', {
url: '/my-app/home/:userid',
templateUrl: '/templates/partials/home/HomeView.html',
controller: 'HomeViewController'
})
.state('productpage', {
url: '/my-app/:productKey/:userid',
templateUrl: '/templates/partials/productpage/ProductPageView.html',
controller: 'ProductViewController'
});
While /my-app/home/ works, /my-app/home does not. Is there a way to make it work without the trailing slash?
Furthermore, after reading posts on the same issue, I was surprised to learn that ui-router does not support this feature. Can someone confirm if this information is still valid? Your help would be greatly appreciated.