Angularjs SPA详情页刷新

Question

我正在使用 Angularjs 开发 SPA 应用程序，应用程序内的所有导航都可以正常工作，但是当我尝试刷新详细信息页面（例如：www.domain.com/traveldetail/123）时，它会破坏页面。

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

这里的状态应该是父母和孩子，例如

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'
  })

}])

可以参考ui router