Question

我正在构建一个艺术家组合网络应用程序，艺术家可以创建一个“项目”，其中包含一系列内容片段（此时主要是图像），然后可以按顺序放置，艺术家可以选择不同的预设布局。我正在使用angular和node + express。我很难找到动态设置模板的好方法。我到目前为止设计的唯一功能方案是将模板名称放在url中的查询参数中。

ui-sref="webapp/project/photo?template=vertical"

然后在ui-router中使用state params设置模板相对简单

templateUrl : function (stateparams) {
  return 'templates/' + stateparams.template + '.html';
},

虽然它的功能我不喜欢这个主要是因为它创建了凌乱的URL并且允许任何人使用查询参数更改模板，或者更可能在没有真实模板的情况下加载某些内容，因为在没有查询参数的情况下错误地或正确地键入了url。 / p>

我无法从templateUrl函数进行api调用，因为它不能注入，所以我不能使用$ http服务。我已经尝试过使用模板提供程序，但还没有做出任何功能。它确实允许注入函数，但该函数必须返回整个模板而不是url。如果我可以获得模板URL，那么如何加载模板呢？我假设我不是第一个想要从角度设置动态模板（数据库中设置的模板）的人。我最好的选择是什么？

Answer 1

我找到了使用ui-router，$ stateParams和$ http的问题的功能解决方案。我正在寻找更好的架构方案，因为每次请求项目时都需要3个服务器请求。一个用于获取模板名称，另一个用于加载模板文件，另一个用于加载项目数据。我想我只向规范添加了一个请求。无论如何..这个解决方案对我有用，但接下来我将移动逻辑，通过项目名称获取模板到角度服务，以保持一切清洁。

.state('projects/:project_url', {
  url              : '/projects/:project_url',
  templateProvider : function ($stateParams, $http) {
    return $http.get('/api/projects/' + $stateParams.project_url)
      .then(function (data) {
        // get template name
        var templateName = data.data[0].template;
        // return template by name
        return $http.get('/pages/' + templateName + '.html')
          .then(function (data) {
            return data.data;
          });
      });
  },
  controller       : 'projectCtrl'
});

Answer 2

http://dotjem.github.io/angular-routing/通过可注入模板功能支持您的方案。但请注意，您必须在return语句中提供原始模板，但这可以使用$ template service ...

轻松完成

它与UIRouter非常相似，所以如果你觉得它值得，它应该是一个相当容易的过渡。

http://plnkr.co/edit/dkPIWMW236ixifETohNW?p=preview

如果您使用最新的稳定版本而不是头部，则必须添加＆＃34; get＆＃34;以$template.get('template.html')而不是较新的$template('template.html')

来呼叫该服务

如何在角度ui-router中动态设置模板而不会出现混乱的查询参数？

2 个答案: