2

我知道这可能会在这里得到答案，但是对于延迟加载实现本身来说更是如此。

所以，这是一个典型的UI-Router配置块：

app.config(function($stateProvider, $urlRouterProvider, $injector) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'view_home.html',  // Actually SHOULD BE result of a XHR request ....
            controller: 'HomeCtrl'
        });
});

但是，如果我想在templateUrl请求时加载它（$stageChangeStart）并且它将基于 AJAX 请求，该怎么办。

应该如何实施？大型角度应用程序如何处理这个问题？

4

1 回答 1

5

我们应该（在这种情况下）使用TemplateProvider. 来自 doc 的小引用：

模板

TemplateUrl
...templateUrl也可以是返回 url 的函数。它采用一个预设参数 ，stateParams不注入。

TemplateProvider
或者您可以使用可以注入的模板提供程序函数，可以访问 locals并且必须返回模板 HTML，如下所示：

$stateProvider.state('contacts', {
  templateProvider: function ($timeout, $stateParams) {
    return $timeout(function () {
      return '<h1>' + $stateParams.contactId + '</h1>'
    }, 100);
  }
})

还有更多。

能使用与真地强大的合作

$templateRequest

在这个问答中（Angular UI-Router dynamic routing based on slug from API Ajax Call. Load view based on slug）我们可以看到如此简单的templateProvider定义

.state('hybrid', {
    // /john-smith
    url: '/:slug',
    templateProvider: ['type', '$templateRequest',
      function(type, templateRequest) 
      {
        var tplName = "tpl.partial-" + type + ".html";
        return templateRequest(tplName);
      }
    ],

结果也是chached...

还有一些其他类似问答的链接，包括工作示例

于 2015-09-26T06:39:14.733 回答