Можно ли загрузить шаблон через запрос AJAX для UI-Router в Angular?

Я знаю, что здесь можно получить ответ, однако это больше подходит для ленивых загрузка самой реализации.

Итак, это типичный блок конфигурации 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.

Как это должно быть реализовано? Как БОЛЬШИЕ угловые приложения справляются с этим?


state angularjs angular-ui-router angular-template
person diegoaguilar    schedule 26.09.2015    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Мы должны (в данном случае) использовать TemplateProvider. Небольшая цитата из документа:

Шаблоны

TemplateUrl
... templateUrl также может быть функцией, возвращающей URL. Для этого требуется один предустановленный параметр, stateParams, который НЕ внедряется.

TemplateProvider
Или вы можете использовать функцию поставщика шаблонов, которая может быть внедрена, имеет доступ к локальным элементам и должна возвращать HTML-шаблон, как это:

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

И даже больше.

Мы можем использовать сотрудничество с действительно мощными

$templateRequest

В этом разделе вопросов и ответов (динамическая маршрутизация Angular UI-Router на основе слага из API Ajax Call. Загрузить представление на основе слага) мы видим такое простое templateProvider определение

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

и результат тоже чечен...

Есть и другие ссылки на похожие вопросы и ответы, включая рабочие примеры.

person Radim Köhler    schedule 26.09.2015
comment
Как получить доступ к $timeout на этапе настройки, когда настроен $stateProvider?? $timeout тоже настраивается и недоступен. - person dewd; 08.12.2017