I am currently using ui-router version 1.0.11 for AngularJs 1.x
The issue I am facing:
When a user enters an address like: /url/abcdef that is not in my route configuration, they should be automatically redirected to /products. This redirection works fine, but the problem arises when there are parameters in the URL of links within the /products page. For example, when I click on a product name, it redirects me back to the /products page. Everything works fine if I remove $urlRouterProvider.otherwise('/customers'); from the router configuration, but then I don't have a route defined for pages like /url/rtrtrt.
Here is my router code:
var app = angular.module("productsApp", [
"ui.router"
]);
app.config([
"$stateProvider",
"$urlRouterProvider",
"$locationProvider",
function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/products');
$stateProvider
.state("home", {
url: "/products",
templateUrl: "/products.html",
controller: "MainCtrl",
resolve: {
getAllP: function($http) {
return $http.get("/products/get").then(function(res) {
return res.data;
});
}
}
})
.state("det", {
url: "details/:pId/details",
templateUrl: "p_details.html",
controller: "productDetailCTRL",
resolve: {
prDet: function($http, $stateParams) {
return $http
.get("/products/id/" + $stateParams.pId + "/details")
.then(function(res) {
return res.data;
});
}
}
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix("!");
}
]);
Update: I attempted to add another state /error with an error page error.html. However, I encountered the same issue even on the products page. Clicking on a product redirected me to the /error page!!! I'm puzzled as to why this is happening.