AngularJS SPA详细页面刷新

Question

I am working on SPA application using Angularjs, all navigation within the app works fine, but when I try refresh detail page (examle: www.domain.com/traveldetail/123), it brakes the page.

app.js

travelApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise("travellist");
    $stateProvider
      .state('/', {
          url: '/',
          templateUrl: 'Partials/travellist.html',
          controller: 'TravelListController'
      })
      .state('travellist', {
          url: '/travellist',
          templateUrl: 'Partials/travellist.html',
          controller: 'TravelListController'
      })
      .state('traveldetail', {
          url: '/traveldetail/:travelId',
          templateUrl: 'Partials/traveldetail.html',
          controller: 'TravelDetailController'
      })
}])

Web.config

    <rewrite>
      <rules>
        <rule name="TravelList" stopProcessing="true">
          <match url="^travellist" />
          <action type="Rewrite" url="/" />
        </rule>
        <rule name="TravelDetail" stopProcessing="true">
          <match url="^traveldetail" />
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>

WeApiConfig.cs

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            //routeTemplate: "api/{controller}/{id}",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

Answer 1

Here the state should be parent and child, for ex

travelApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise("travellist");
$stateProvider
  .state('travel', {
      url: '/',
      templateUrl: 'Partials/travellist.html',
      controller: 'TravelListController'
  })
  .state('travel.list', {
      url: '/travellist',
      templateUrl: 'Partials/travellist.html',
      controller: 'TravelListController'
  })
  .state('travel.list.detail', {
      url: '/traveldetail/:travelId',
      templateUrl: 'Partials/traveldetail.html',
      controller: 'TravelDetailController'
  })

}])

you can refer to ui router