Question

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

我希望有一个命名空间，允许我创建每个帖子的链接，以便在生产中我可以发布：mysite / posts / my_new_post。但是，在.state url中添加帖子会导致无法实例化模块错误。

这是工作代码的片段：

.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我得到：未捕获错误：[$ injector：modulerr]错误，这很奇怪：未捕获的SyntaxError：意外的令牌＆lt;

不知怎的，它没有加载角度，任何人都有不同的想法？

Answer 1

您正在使用html5mode，这需要正确配置两件事：

服务器部分 - 服务器必须知道，有些请求不是服务器的......它们是虚拟的。必须进行一些重定向。请查看此处：How to: Configure your server to work with html5Mode
客户端部分 - 浏览器必须能够理解url的哪个部分应该被视为相对的。

要回答第二部分，请检查this Q & A或that Q & A以查看 woring 示例/ plunker。

短篇小说：

一般情况下，我们必须提供HTML元素 <base> ，其默认值为 href

<base href="/" />

更长的故事：

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

但是，如果我们将路由更改为/state/:ID - 结果网址为https://domain/state/abc - 如果我们从已经加密的index.html导航到那里就没问题。

如果我们直接导航到domain/state/abc - 基础href 可能会非常不同，那么我们需要。那就是<base href="应该帮助的地方。

此外，该文档可以提供帮助：

$locationProvider

我们可以像这样请求html5mode：

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

详情请见also here

当在id参数之前声明命名空间时，Angular-UI-Router停止工作

1 个答案:

$locationProvider