在状态路由中从 $http 请求加载模板 url答案

【问题标题】：load template url from $http request in state routing在状态路由中从 $http 请求加载模板 url
【发布时间】：2016-11-12 23:46:58
【问题描述】：

我想从 $http 调用中加载 templateurl。

$stateProvider
.state('home', {
        url: '/',
        templateUrl: will be served by $http call from server
    });

请建议我将如何实施。

【问题讨论】：

建议您阅读关于模板的 ui-router 文档github.com/angular-ui/ui-router/wiki#templates :)

标签： angularjs angular-ui-router angular-ui angular-template

【解决方案1】：

我建议使用templateProvider。这可能会消耗任何数量的 IoC 参数（包括当前的 $stateParams）。结合$templateRequest，我们也可以很方便的从服务器获取模板并缓存起来：

.state('myState', 
{
    ...
    // instead of templateUrl
    templateProvider: ['$templateRequest', '$stateParams', 
    function($templateRequest,$stateParams){
      var pathToTemplate = '....html';
      // get the proper path from any IoC injected here

      return $templateRequest(pathToTemplate);

    }],

检查这些：

【讨论】：

【解决方案2】：

Angular 以最优雅的方式完成了它。如果你想调用你的后端控制器来为 templateurl 请求一个 jsp 页面，只需像这样调用 $http url

.state('inbox', {
        url: '/inbox',
        templateUrl:'jspController/inboxRecord',
        controller : 'inboxController'
    })

在我的例子中，该 url 以 jsp 页面响应 inboxrecord.jsp 将被呈现。

【讨论】：

【解决方案3】：

因为 templateUrl 也可以是您可以轻松实现的功能：

$stateProvider.state('home', {
  templateUrl: function ($stateParams){
    $http....success({
      return <whatever> + '.html';
    })
  }
})

【讨论】：

【解决方案4】：

您将需要一个控制器来从结果中填充您的模板，并从您的模板中绑定范围值。

 $stateProvider
.state('home', {
    url: '/',
    templateUrl: 'index.html',
    resolve {
        results:  function($http){
        return $http({method: 'GET', url: '/serverspi'})
           .then (function (data) {
               return process(data);
           });
     },   
   }
});

【讨论】：

【解决方案5】：

我使用了 templateProvider (https://github.com/angular-ui/ui-router/wiki) 并检索了一个包含我的模板的 JSON 对象，执行如下操作：

templateProvider: function($http) {
        return $http.get("http://example.com/returnJSONobject")
                .then(function(res) {
                    return res.htmlTemplate;
                });
},

【讨论】：