AngularJs UI-Router - $stateProvider can't read my abstract state

问题

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 refresh button abstract state is not loaded. Please help me how to solve this.

Thanks

回答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

回答2:

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.

来源：https://stackoverflow.com/questions/27169968/angularjs-ui-router-stateprovider-cant-read-my-abstract-state

标签

asp.net-mvc

angularjs

angular-ui-router