将请求标头传递给 AngularJS 中的 uriTemplate答案

【问题标题】：Pass a request header to uriTemplate in AngularJS将请求标头传递给 AngularJS 中的 uriTemplate
【发布时间】：2015-06-09 22:24:01
【问题描述】：

我有这个 Angular 代码：

    .state('UserTables', {
        url: '/Tables',
        resolve: {
            auth: function resolveAuthentication(SessionService) {
                return SessionService.isUser();
            }
        },
        views: {
            "containerMain": {
                templateUrl: 'Views/Tables',
                controller: TableController
            },
        }
    })

并且想将一些请求标头传递给 templateUrl 调用。

有人做过类似的事情吗？

基本上我有一个 REST 服务，它可以根据 1 个标头和一些属性生成我需要的视图。属性没问题，但我不知道如何调用服务并等待结果。

试过了：

        views: {
            "containerMain": {
                template: function (SessionService, $http, $q) {
                    console.log('template');
                    var resp = SessionService.getTable($http, $q, 'Generate/Table?objectId=WfObject');
                    var r = '';
                    resp.then(function (result) {
                        r = result;
                        console.log('resp:', r);
                    });
                    console.log('r:',r);
                    return r;
                }

【问题讨论】：

标签： angularjs angular-ui-router request-headers

【解决方案1】：

templateUrl 属性也可以将函数作为值。因此，您可以通过那里向 templateUrl 添加动态属性。

templateUrl : function(stateParams) {
      // before returning the URL, add additional properties and send
      // stateParamsargument object refers to $stateParams and you can access any url params from there.
      return  'Views/Tables';
}

【讨论】：

【解决方案2】：

我创建了working plunker here

要加载带有自定义标题的模板，我们可以这样调用 （检查 plunker 中的状态“UserTables”）：

views: {
    "containerMain": {
        //templateUrl: 'Views/Tables',
        templateProvider: ['$http',
          function ($http) {

            var tplRequest = {
              method: 'GET',
              url: 'Generate/Table?objectId=WfObject',
              headers: {
                'MyHeaderKey': 'MyHeaderValue'
              }, 
            }

            return $http(tplRequest)
            .then(function(response) {
                console.log('loaded with custom headers')
                var tpl = response.data;
                return tpl;
              }
            );
        }],
        controller: 'TableController'
    },
  }

如果我们想要（并且可以）缓存模板，我们可以这样做（检查状态'UserTablesWithCache'）：

views: {
    "containerMain": {
        //templateUrl: 'Views/Tables',
        templateProvider: ['$http', '$templateCache',
          function ($http, $templateCache) {

            var templateName = 'Generate/Table?objectId=WfObject';
            var tpl = $templateCache.get(templateName)
            if(tpl){
              console.log('returning from cache');
              return tpl;
            }

            var tplRequest = {
              method: 'GET',
              url: templateName,
              headers: {
                'MyHeaderKey': 'MyHeaderValue'
              }, 
            }

            return $http(tplRequest)
            .then(function(response) {
                console.log('loaded, placing into  cache');
                var tpl = response.data;
                $templateCache.put(templateName, tpl) 
                return tpl;
              }
            );
        }],
        controller: 'TableController'
    },
  }

如果我们不需要标头，我们可以缓存，这真的很容易，如下所述：

Trying to Dynamically set a templateUrl in controller based on constant

草稿版本可能是：（没有自定义标题但有效加载和缓存）

templateProvider: ['$templateRequest', function(CONFIG, $templateRequest) {

    var templateName = 'Generate/Table?objectId=WfObject';

    return $templateRequest(templateName);
}],

【讨论】：