[英]Angularjs SPA detail page refresh
我正在使用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 }
);
}
}
這里的州應該是父母和孩子,例如
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路由器
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.