Menu
Like many before me, I am struggling to get page refresh working with my angular app.
I am using angular/require/webapi. I extended this from the angular phone tutorial
I placed this project on github as well
Here is where I currently sit.
I have the routes setup. They are in html mode. They work on site navigation. Refreshing was causing problems. I setup code Gobal.asax.cs to reroute failures to index.html. The base page (/phones) is able to refresh. The error comes in when one refreshes the details page (phones/motorola-xoom-with-wi-fi).
Here is my routes code
define(['angular', 'app', 'angularRoute'], function (angular, app)
{
'use strict';
var myApp = app.config(['$routeProvider', '$provide', '$locationProvider', function ($routeProvider, $provide, $locationProvider) {
//$provide.decorator('$sniffer', function ($delegate) {
// $delegate.history = false;
// return $delegate;
//});
$routeProvider
.when('/', {
redirectTo: '/phones'
})
.when('/phones', {
templateUrl: '../Web/Templates/partials/_phones.html',
controller: 'PhoneList'
})
.when('/phones/:phoneId', {
templateUrl: '../Web/Templates/partials/_phone-detail.html',
controller: 'PhoneDetail'
});
//.otherwise({
// redirectTo: '/phones'
//});
// enable html5Mode for pushstate ('#'-less URLs)
//$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);
}]);
return myApp;
});
My global.asax.cs
public class WebApiApplication : System.Web.HttpApplication
{
private const string ROOT_DOCUMENT = "index.html";
protected void Application_Start()
{
GlobalConfiguration.Configure(WebApiConfig.Register);
}
protected void Application_BeginRequest(Object sender, EventArgs e)
{
string url = Request.Url.LocalPath;
string[] newURL = new string[1];
newURL[0] = ROOT_DOCUMENT;
if (!System.IO.File.Exists(Context.Server.MapPath(url)))
Context.RewritePath(ROOT_DOCUMENT);
}
}
And my index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<title>Angular-RequireJS sample app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script data-main="Scripts/app/main" src="Scripts/lib/require.js"></script>-->
<link rel="stylesheet" type="text/css" media="all" href="Content/css/app.css" />
<link rel="stylesheet" type="text/css" media="all" href="Content/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="all" href="Content/css/bootstrap-responsive.css" />
<base href="/">
</head>
<body>
<div class="container-fluid">
<p>Single Page Web Ap</p>
<div ng-view></div>
</div>
<script data-main="Scripts/app/main" src="Scripts/lib/require.js"></script>
</body>
</html>
877
This should solve the issue - change the constant definition:
private const string ROOT_DOCUMENT = "/index.html";
// instead of this
// private const string ROOT_DOCUMENT = "index.html";
Also check it here: How to: Configure your server to work with html5Mode (scroll down to ASP.Net C# Rewrites) see that snippet:
private const string ROOT_DOCUMENT = "/default.aspx";
protected void Application_BeginRequest( Object sender, EventArgs e )
{
string url = Request.Url.LocalPath;
if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
Context.RewritePath( ROOT_DOCUMENT );
}
Note, I would also suggest to change the Application_BeginRequest to properly handle API requests like this:
protected void Application_BeginRequest(Object sender, EventArgs e)
{
var path = Request.Url.AbsolutePath;
var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);
if (isApi)
{
return;
}
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
