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

Question

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

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

请建议我将如何实现这一点。

Answer 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);

    }],

检查这些：

• Angular UI-router 和使用动态模板
• Angular UI Router：根据父解析对象决定子状态模板
• 在 angular + typescript 中使用 templateRequest（$templateRequest 不是函数）
• ui 路由器嵌套视图条件
• UI-Router，如何获取“状态”的名称以及如何将其发送到带来模板状态的函数

Answer 2

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

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

在我的情况下，该 url 以 jsp 页面响应 inboxrecord.jsp 将被呈现。

Answer 3

因为 templateUrl 也可以是您可以轻松完成的功能：

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

Answer 4

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

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

Answer 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;
                });
},