从状态路由中的 $http 请求加载模板 url

Question

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

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

请建议我将如何实施。

Answer 1

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

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

Answer 2

我建议使用 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 and using dynamic templates
Angular UI Router: decide child state template on the basis of parent resolved object
UI-Router, how to get the name of the 'state' And How send it to the function That brings Template state

Answer 3

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

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

Answer 4

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

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

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

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

从状态路由中的 $http 请求加载模板 url

load template url from $http request in state routing

angularjs

angular-ui

angular-template

angular-ui-router