Question

以下是我的应用中的几种状态：

angular.module("app").config([
'$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
    'use strict';

    $httpProvider.defaults.withCredentials = true;

    //#region Routing
    $urlRouterProvider.otherwise("/login");

    $stateProvider.state('client1', {
        onEnter: function () { },
        views: {
            "index": {
                templateUrl: 'indexView.html'
            }
        }
    }).state('client1.deliverables', {
        url: '/deliverables/:taxYear/:entity/:deliverable/:status',
        onEnter: function () { },
        views: {
            "nav": {
                templateUrl: 'Nav/nav.html',
                controller: 'NavController'
            },
            "content": {
                templateUrl: 'deliverables/deliverables.html',
                controller: 'DeliverablesController'
            },
            "footer": {
                templateUrl: 'footer.html',
            },
            reloadOnSearch: false
        }

有时，我想用默认参数加载可交付成果状态。我宁愿不使用虚拟字符串...有更好的方法吗？

                    $state.go('^.deliverables', {
                        taxYear: null,
                        entity: null,
                        status: null
                    }); // Navigate to dashboard

但接下来我的网址上有三个斜线。 http://example.com/#/deliverables////。有没有办法在不使用虚拟参数的情况下建立更友好的URL？有没有更好的方法来做到这一点，而不是连续三个斜线？这不是世界末日，但它看起来很陌生。

如果我创建两个不同的状态，那么我必须复制所有状态信息两次。

编辑：有时我想用所有可以为空的参数加载此页面。但是当我这样做时，我会连续三次斜杠。其他时候，我想改变状态并提供实际值。这很好。有没有办法处理这个问题而不将状态信息复制到两个状态？

EDIT2 ：该页面有4个输入，用于过滤jquery数据表。在可交付物页面的首页加载中，我不想按任何输入进行过滤。我也可以在页面中进行深度链接的角度等效。然后，这些深层链接将过滤表格。这就是我在URL

上有参数的原因

Answer 1

Ui-router 0.2.12支持压缩默认参数值。

请参阅RFC的此问题： https://github.com/angular-ui/ui-router/issues/1501

请参阅此插件：http://plnkr.co/edit/VMPc8D7oUG0B1R3QuiCE?p=preview进行演示。

您可以指定每个参数的默认值如何被压扁。

鉴于以下状态：

  $stateProvider.state({
    name: "user",
    url: "user/:username",
    parent: 'top',
    params: { 
      username: { 
        value: function(Session) { return Session.username; }
      } 
    }, 
    resolve: { 
      user: function($stateParams, users) { return users[$stateParams.username]; }, 
      galleries: function($stateParams, photos) { return photos[$stateParams.username] }
    },
    templateUrl: 'user.html',
    controller: function($scope, $state, user, galleries) { $scope.user = user; $scope.galleries = galleries; }
  });

  $stateProvider.state({
    name: "user.gallery",
    url: "/gallery/:galleryid",
    resolve: { 
      photos: function($stateParams, galleries) { return galleries[$stateParams.galleryid]; } 
    },
    params: { galleryid: { value: "favorites" } }, 
    templateUrl: 'gallery.html',
    controller: function($scope, $state, $stateParams, photos) { 
      $scope.gallery = $stateParams.galleryid; 
      $scope.photos = photos; 
    }
  });

  $stateProvider.state({
    name: "user.gallery.photo",
    url: "/photo/:photoid",
    resolve: { 
      photo: function($stateParams, photos) { 
        return photos.filter(function(photo) { return photo.id === $stateParams.photoid; })[0];
      } 
    },
    templateUrl: 'photo.html',
    controller: function($scope, $state, $stateParams, photo) { 
      $scope.gallery = $stateParams.galleryid; 
      $scope.photo = photo; 
    }
  });

这些参数：

{
  "username": "christopherthielen",
  "galleryid": "favorites",
  "photoid": "CN0ZRJw"
}

会像这样在网址中被压扁：

{
  false: "/user/christopherthielen/gallery/favorites/photo/CN0ZRJw",
  "-": "/user/-/gallery/-/photo/CN0ZRJw",
  "~": "/user/~/gallery/~/photo/CN0ZRJw",
  "": "/user//gallery//photo/CN0ZRJw",
  true: "/user/gallery/photo/CN0ZRJw"
}

Answer 2

我不了解您所描述的具体情况的最佳做法。我认为它将分为两个主要用例，我可以想象：

1）对于参数或有效值，控制器中的核心逻辑和3个视图的部分中的html是相同的。在这种情况下，你的工作正常，只是看起来有点奇怪的连续斜线。这没有问题;但是，如果这困扰你，请考虑传递“0”而不是Nulls（假设0是参数的无效值）。

2）如果你的观点实际上是不同的，这取决于参数中是否有值，那么你可能最好只为“/可交付”路线设置一个单独的状态。是的，您必须复制视图定义;但是，如果你的控制器中有if / then块（和/或部分中的ng-if / ng-show / ng-hide块）来处理null参数的情况，那么你真的只是拆分逻辑分成单独的控制器/部分，以便它们变得更简单，状态定义不会重复，因为这两个状态将使用不同的控制器/部分（基本上将现有的控制器/部分分成两个不同的文件，每个只有每个中适用的逻辑。

Angular UI路由器默认参数最终使用URL http://example.com/#/deliverables////。一种避免连续斜线的方法？

2 个答案: