当名称空间在id参数之前声明时，Angular UI路由器停止工作

Question

我正在我的网站上制作一个简单的博客部分，所以我想有一个名为posts的命名空间，它可以动态链接到post模板。这些帖子都有自己的模板（即posts/some_post.html），因为它们太不同了，不能只使用json数据来填充通用模板。

我想有一个命名空间，允许我创建到每个帖子的链接，这样在生产中我就可以发布：mysite/posts/my_new_post。但是，在.state url中预先准备posts会导致无法实例化模块错误。

这是工作代码的一个片段：

.config(["$urlRouterProvider", "$stateProvider","$locationProvider", function ($urlRouterProvider, $stateProvider,$locationProvider){
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
  .state('posts', {
    url: '/:postID',
    templateUrl : function($stateParams){
      return 'templates/posts/' + $stateParams.postID + '.html';
    },
  });

}]);

这段代码很有效，我可以链接到生成的URI。单击此链接时：

li><a ui-sref="posts({postID: 'blog2'})">blog 2</a></li>

URI变成website/blog2，从website/home，我可以链接到URI

但是，如果我尝试添加一个名称空间，我会失败：

.state('posts', {
    url: '/posts/:postID',  // note i added posts before the id
    templateUrl : function($stateParams){
      return 'templates/posts/' + $stateParams.postID + '.html';
 },

链接将在第一次工作，并将我带到正确的页面，如果我键入URI模式mysite/posts/blog1，我会得到：Uncaught Error:[$injector:modulerr]错误，而这个奇怪的：Uncaugh SyntaxError:意外的令牌<

不知怎么的，它没有加载角度，有人有什么想法吗？

Answer 1

您使用的是html5mode，它需要正确配置两件事：

• 服务器部分-服务器必须知道，有些请求不是针对服务器的。。它们是虚拟的。必须进行某些重定向。查看如何在这里：如何：配置您的服务器以使用html5Mode
• 客户端部分浏览器必须能够理解url的哪个部分应该被视为相对的

要回答第二部分，请查看此问答；A或那个问答；一个工作示例/punker的A。

短篇小说：

通常，我们必须为HTML元素<base>提供href的默认值

<base href="/" />

更长的故事：

它做什么？好吧，正如您所经历的那样——如果我们直接导航到站点：https://domain/index.html——浏览器确实理解相对部分是"/"。

但是，如果我们将路由更改为/state/:ID，则结果url为https://domain/state/abc，如果我们从已经过时的index.html导航到那里，则这是可以的。

如果我们直接导航到domain/state/abc，则基本href可能与我们需要的非常不同。这就是<base href="应该提供帮助的地方。

此外，医生可以提供帮助：

$locationProvider

例如，我们可以要求如下的html5模式：

$locationProvider.html5Mode({
   enable: true,
   requireBase: false.
});

另请参阅此处的更多详细信息