angularjs - 是否可以通过 Angular 中 UI-Router 的 AJAX 请求加载模板？

Question

我知道这可能 get an answer here ，但是这对于延迟加载实现本身来说更有用。

所以，这是一个典型的 UI-Router 配置 block :

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

但是，如果我想在请求 ($stageChangeStart) 时加载这样的 templateUrl，并且它将基于 AJAX 请求，该怎么办？

应该如何实现？大型 Angular 应用程序如何处理这个问题？

Answer 1

我们应该(在本例中)使用TemplateProvider。来自文档的小引用:

Templates

TemplateUrl
... templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT injected.

TemplateProvider
Or you can use a template provider function which can be injected, has access to locals, and must return template HTML, like this:

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

结果也被查了...

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

• Angular UI Router: decide child state template on the basis of parent resolved object
• Angular and UI-Router, how to set a dynamic templateUrl