Need to handle dynamic params in angular UI router, and load templates accordingly

Question

I need to handle dynamic params in angular ui-router and load templates according also if someone use link to come on my site, he should be able to reach at desired page. I need to use it for multiple parameters and get the value form server to related values.

.state('home', {
url: '/:shop',
views: {
    "mainbox": {
        templateUrl: "app/shop/main.html",
        controller: "shopMainCtrl",
        controllerAs: "shop"
    }
    // xyz.com/wallmart  should be landed here
}

})
.state('course', {
    url: '/:shop/:area',
    views: {
        "mainbox": {
            templateUrl: "app/area/nav.html",
            controller: "areaNavCtrl",
            controllerAs: "areaNav"

        }
        //xyz.com/wallmart/california  should be landed here
    }

})
.state('area.food', {
    url: '/food',
    views: {
        "mainboxcontent": {
            templateUrl: "app/area/food.html",
            controller: "foodMainCtrl",
            controllerAs: "food"

        }//xyz.com/wallmart/california/food  should be landed here
    }

}).state('area.cloths', {
    url: '/cloths',
    views: {
        "mainboxcontent": {
            templateUrl: "app/area/cloths.html",
            controller: "clothsCtrl",
            controllerAs: "cloths"

        }
        //xyz.com/wallmart/california/cloths  should be landed here
    }

})

.state('buy', {
    url: '/:shop/:area/:buy',
    views: {
        "mainbox": {
            templateUrl: "app/buy/buynow.html",
            controller: "buyMainCtrl",
            controllerAs: "buyNow"
        }
        //xyz.com/wallmart/california/iphone  should be landed here
    }

})

Answer 1

https://github.com/angular-ui/ui-router/wiki templateProvider is something you may try.

stackoverflow: Angular UI Router: decide child state template on the basis of parent resolved object