1

I have problem with html5Mode. In my MVC project I have only one controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return this.File("index.html", "text/html");
    }
}

In my angular project I have two routes and one abstract.

angular.module('app').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/articles');

    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/blocks/layout.html",
            controller: 'AppCtrl'

        })
        .state('app.articles', {
            url: "/articles",
            templateUrl: 'templates/articles.html',
            controller: 'ArticlesCtrl'
        })
        .state('app.one-article', {
            url: "/articles/:articleId",
            templateUrl: 'templates/one-article.html',
            controller: 'OneArticleCtrl'
        });

    // use the HTML5 History API
    $locationProvider.html5Mode(true).hashPrefix('!');   
});

This is in the RouteConfig.cs

public static void RegisterRoutes(RouteCollection routes)
{

    routes.MapRoute(
         name: "articles",
         url: "app/articles",
         defaults: new { controller = "Home", action = "Index" });

    routes.MapRoute(
        name: "Default",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" });

}

Everything works fine when I'm navigating from the root. But when I will click the refresh button abstract state is not loaded. Please help me how to solve this.

Thanks

Fateme Mirjalili
  • 762
  • 7
  • 16
Bogdan Nicovski
  • 89
  • 2
  • 10

2 Answers2

1

I solved the problem.

My index file was in the root of the solution. Instead of that I removed that index.html file and created MVC view Views -> Home -> Index.cshtml. All HTML is the same as in index.html.

Now from in the controller I'm using 

 public ActionResult Index()
    {
        return this.View();
    }

instead of this:

        public ActionResult Index()
        {
             return this.File("index.html", "text/html"); 
        }

Here is my RouteConfig.cs

  public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                         name: "AngularCatchAllRoute",
                         url: "{*any}",
                         defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
                            );
        }

Hope someone will find this article useful.

Bogdan

Bogdan Nicovski
  • 89
  • 2
  • 10
0

With the latest angular and the $locationProvider.html5Mode() setting we have to options, either

1) provide <base href=" or
2) pass different setting into $locationProvider.html5Mode(setting) mode.

I created working plunker, which has this special rows in the header:

<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <title>My App</title>
    <script>
      document.write('<base href="'+ document.location.pathname +'" />')
    </script>
  </head>

Check it here: $locationProvider

param: mode type: (optional)booleanObject

  • If boolean, sets html5Mode.enabled to value.
  • If object, sets enabled, requireBase and rewriteLinks to respective values. Supported properties:
    -- enabled – {boolean} – (default: false) If true, will rely on history.pushState to change urls where supported. Will fall back to hash-prefixed paths in browsers that do not support pushState. -- requireBase - {boolean} - (default: true) When html5Mode is enabled, specifies whether or not a tag is required to be present. If enabled and requireBase are true, and a base tag is not present, an error will be thrown when $location is injected. See the $location guide for more information -- rewriteLinks - {boolean} - (default: true) When html5Mode is enabled, enables/disables url rewriting for relative links.
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thanks for your quick response. After I changed to I've got empty page with too many angular errors. Maybe the problem is in my IIS configuration? – Bogdan Nicovski Nov 27 '14 at 16:44
  • There are essential details for server setting: [How to: Configure your server to work with html5Mode](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode) BTW I used document.write, becaus on plunker it is a must, the url is changing. In your case it could be `base="/"`... test it, play with... The plunker should help to compare – Radim Köhler Nov 27 '14 at 17:11
  • Radim thanks again. My server is configured and I changed to base="/" and again same problem. This is a really strange behaviour. When angular redirect me everything works fine, when I'm going manually to the wanted link layout is broken and all scripts and css is not loaded. – Bogdan Nicovski Nov 27 '14 at 17:45
  • It's hard to simulate this solution on plunker. Please write me on b.nicovski@yahoo.com. I will show in my project. Thanks – Bogdan Nicovski Nov 27 '14 at 20:26
  • The post is modified to be better understandable. – Bogdan Nicovski Nov 28 '14 at 14:26
  • Really hard for me to help, without some playground... sorry ;( But, is your solution working without HTML5? with `#/`? so if you turn off the html 5 - is it working? – Radim Köhler Nov 28 '14 at 14:28
  • Do you know what, this is my HomeController Index : http://stackoverflow.com/a/24988979/1679310. *I am using html5 mode OFF.* Would really strongly suggest, try to create working solution. Then extend it with more features (html5 etc.) if you know, that at least something is working, you can give more information about your issue... – Radim Köhler Nov 28 '14 at 16:00