AngularJS与UI路由器

AngularJS与UI路由器,angularjs,angular-ui-router,Angularjs,Angular Ui Router,试图让UI路由器按我想要的方式工作,我快发疯了。我不想做任何复杂的事情,但无论我做什么,我都遇到了同样的问题。我只想创建以下链接结构: /命令 /订单/添加订单 /订单-显示所有订单。这很好,我可以刷新页面,它可以重新加载 /订单/添加订单-添加新订单。如果我单击orders页面中的一个链接,这是可行的,但是一旦我到了那里,如果我用F5刷新页面或者直接键入URL,我会得到页面加载的模板,然后是嵌套在彼此中的另两个模板版本 这是我的配置: angular.module('hecpApp').con

试图让UI路由器按我想要的方式工作,我快发疯了。我不想做任何复杂的事情,但无论我做什么,我都遇到了同样的问题。我只想创建以下链接结构:

/命令 /订单/添加订单 /订单-显示所有订单。这很好,我可以刷新页面,它可以重新加载

/订单/添加订单-添加新订单。如果我单击orders页面中的一个链接,这是可行的,但是一旦我到了那里,如果我用F5刷新页面或者直接键入URL,我会得到页面加载的模板,然后是嵌套在彼此中的另两个模板版本

这是我的配置:

angular.module('hecpApp').config([
    '$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $urlRouterProvider.otherwise('/orders');

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'HtmlPartials/Home.html',
                controller: 'HomeCtrl',
                breadcrumb: { title: 'Home' },
                unauthenticated: true
            })
            .state('orders', {
                abstract: true,
                template: '<ui-view></ui-view>'
            })
                .state('orders.list', {
                    url: '/orders',
                    templateUrl: 'HtmlPartials/Orders.html',
                    controller: 'OrdersCtrl',
                    breadcrumb: { title: 'Orders' },
                    unauthenticated: true
                })
                .state('orders.addorder', {
                    url: '/orders/addorder',
                    templateUrl: 'HtmlPartials/AddOrder.html',
                    controller: 'AddOrderCtrl',
                    breadcrumb: { title: 'Add Order' },
                    unauthenticated: true
                })
            .state('bounce', {
                // Workaround for $state.reload issue see https://github.com/angular-ui/ui-router/issues/76
                // and $state.bounce function declared in app.run
                template: '<h4>Loading...</h4>'
            });
    }
]);
任何帮助都将不胜感激

编辑:

我的web.config中有以下设置:

<rewrite>
      <rules>
        <rule name="Main Rule" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!--<add input="{REQUEST_URI}" pattern="^/bundles/.*$" negate="true" />-->
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>

您需要将HTML5模式设置为false,或者在服务器端进行设置,以将所有参数路由到SPA的路由。这不是一个真正的角度问题,这是一个服务器配置问题。@JMK我已经在我的web.config中设置了一些路由设置,请参见上面的编辑。