angularjs ui.router

Question

template didnt change to (shop.product state) when i going to '/someShop/someProduct' the template is still using the (shop state)

/:shopid/:productid

app = angular.module('LittleP', ['ui.tinymce','ui.router']);

app.config(function ($locationProvider,$stateProvider) {
  $locationProvider.html5Mode(true);
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'LittleP/page/home/home.html',
    controller: 'home'
  })
  .state('search',{
    url: '/s',
    templateUrl: 'LittleP/page/search/search.html',
    controller: 'search'
  })
  .state('shop', { <--- this is the parent
    url: '/:shopid',
    template: 'LittleP/page/product/product.html',
    controller: function ($scope,$stateParams) {
      $scope.hello = 'this is shop';
    }'
  })
  .state('shop.product', { <--- this is the childern
    url: '/:productid',
    template: '<h1>{{hello}}</h1>',
    controller: function ($scope,$stateParams) {
      $scope.hello = 'this is the product of ' + $stateParams.productid;
    }
  });

Answer 1

Try to do something like that:

app.config(['$stateProvider', '$locationProvider'],function ($stateProvider, $locationProvider) {

 $stateProvider
  .state('shop', { 
    abstract: true,
    views: {
        'content@': {
           templateUrl:'LittleP/page/product/product.html',
           controller: 'yourController',
        }
    },
  })
  .state('shop.product', {
    url: '/:productid',
    views: {
      'shop@shop':{
         templateUrl: yourUrlPath,
         template: '<div>Children path</div>'. //this is agin templateUrl
         controller: 'childController, 
      }
    }
  });

  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false, 
  });
}