javascript - 为什么 AngularJS 从搜索栏中删除我的部分 URL

Question

我正在尝试为 CRUD 站点设置状态提供程序。

当我转到 www.mysite.com/posts/mypost 时，URL 被 chop 为 www.mysite.com/mypost 并且它不会触发 Controller .当我使用 AngularJS 的 routeProvider 时，此错误不会持续存在，但默认提供程序对于我正在尝试执行的操作而言不够健壮。我假设在 stateProvider 决定下一步做什么之前某些东西 chop 了 URL，但我不知道是什么导致了它。我怎样才能阻止 stateProvider(或任何罪魁祸首)被 chop ？

以下是部分代码。

$stateProvider.state('posts',{
  url: '/posts',
  templateUrl: localized.partials + '/post-list.html',
  controller: 'loopController'
}).state('post',{
  url: '/posts/:post/',
  templateUrl: localized.partials + "/post-single.html",
  controller: 'singlePostController'
}).state('pages',{
  url: '/pages',
  templateUrl: localized.partials + '/page-list.html',
  controller: 'pagesController'
}).state('page',{
  url: '/pages/:page',
  templateUrl: localized.partials + '/page-single.html',
  controller: 'singlePageController'
});


app.controller('singlePostController', 
['$scope', '$stateParams', 'Post', function ($scope, $stateParams, Post) 
{
  $http.get(resturl +'/posts/'+$stateParams.post).
    success(function(s){
      console.log(s);}).
    error(function(e){
      console.log(e)});
}
]);

Answer 1

post 状态中的尾部斜杠是导致您悲伤的原因。要直接激活该状态，您需要遵循您定义的模式 - 包括尾部斜线。这看起来像...

www.mysite.com/posts/mypost/

您有一些选项可以解决这个问题。您可以从您的状态定义中删除尾部斜线......

}).state('post',{
    url: '/posts/:post'
    ...

或者按照 ui-router FAQ 页面上的建议实现以下逻辑来处理这个问题

How to: Make a trailing slash optional for all routes

这本质上驱动了一些额外的配置，如下所示

$urlMatcherFactoryProvider.strictMode(false);

$urlRouterProvider.rule(function ($injector, $location) {
    var path = $location.url();

    // check to see if the path already has a slash where it should be
    if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
        return;
    }

    if (path.indexOf('?') > -1) {
        return path.replace('?', '/?');
    }

    return path + '/';
});

---

Note: All routes in app/scripts/app.js must be redefined with trailing /. This means that routes such as /things/:id become /things/:id/ as well