ui-router dosn't work with $urlRouterProvider.otherwise

Question

I have ui-router version 1.0.11 for AngularJs 1.x

My problem:

When a user put an address like: /url/abcdef that isn't in my route, then the user shout automatically redirected to /products. This is ok but I have the problem that a link with parameters in the router, in the same products page don't work. For Example I click to a product name and I will redirect to /products. Without $urlRouterProvider.otherwise('/customers'); in the router is the link ok, but I haven't a router for pages like /url/rtrtrt

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("!");
  }
]);

Updated: I tried to put another state /error with an error Page error.html. There is the same error in the products page. I click the product and this redirect me to the /error page!!! I don't understand why

Why -1 in the reputation? I don't understand. I am asking a question and I didn't find the solution anywhere — dani

FarukT FarukT · Accepted Answer · 2018-01-30T14:51:41

you failed the position of code you must mode move $urlRouterProvider.otherwise(**'home'**);

    var app = angular.module("productsApp", ["ui.router"]);

    app.config(["$stateProvider","$urlRouterProvider","$locationProvider",
        function($stateProvider, $urlRouterProvider, $locationProvider) {


            $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;
                        });
                    }
                }
            });

            $urlRouterProvider.otherwise('home');

            $locationProvider.html5Mode(true);
            $locationProvider.hashPrefix("!");
        }
]);

ui-router dosn't work with $urlRouterProvider.otherwise

1 Answers