Angularjs: несколько частей в одном html?

Возможно ли получить несколько фрагментов html в одном html? У меня следующая ситуация:

Template: {header} {main} {footer}

/index: header:"Welcome" main:"welcome text" footer:""

/help: header:"Help title" main:"faq tips" footer"Back to home"

используя ng-include, я должен получить 6 html с сервера. Если я получу несколько частичных фрагментов в одном html, то я получу 2 html только с сервера, один для /index и один для /help.

  • Эта ситуация является небольшим примером реальной ситуации.
  • Тег script с типом ng-template у меня не работает, потому что скрипт должен быть включен до тега ng-include.

Спасибо!

Обновление от 07.04.12:

Я стараюсь обновлять более одного div за раз с помощью уникального html-файла. Мне не нравится это:

function IndexCtrl($scope) {
    $scope.mainPage = 'partials/index/index.html';
    $scope.headerTemplate = 'partials/index/header.html';
    $scope.footerTemplate = 'partials/index/footer.html';
}

После того, как в шаблоне используйте ng-includes для включения этих частей. Я думаю, что это не правильный путь. Есть другой способ?

Спасибо!


html angularjs partials
person Jose Ignacio Larghi    schedule 04.07.2012    source источник
comment
Можете ли вы предоставить больше информации о том, что вы ищете, или о том, чего вы пытаетесь достичь?   -  person ganaraj    schedule 04.07.2012

Ответы (2)


arrow_upward
50
arrow_downward

Шаблоны могут быть встроены в основной html. Например, со следующим index.html:

<!DOCTYPE html>
<html ng-app=app>
<meta charset=utf-8>
<title>App</title>
<ng-view>Loading...</ng-view>
<script type=text/ng-template id=partial1.html>
 <p>foo = {{foo}}</p>
</script>
<script type=text/ng-template id=partial2.html>
 <p>Contents of partial2.html</p>
</script>
<script src=app.js></script>

вы можете использовать следующие app.js:

angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {

  $routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' });

  $controllerProvider.register('Partial1', ['$scope', function($scope) {
    $scope.foo = 'bar';
  }]);
}]);

Подробнее см. в документации по службе $templateCache.

person Marcello Nuccio    schedule 04.07.2012
comment
При использовании этого решения следует помнить, что оно, вероятно, плохо масштабируется. Если у вас есть только несколько шаблонов, это будет работать очень хорошо. Если вы создаете крупномасштабное приложение с десятками шаблонов, ваш индексный файл будет очень тяжелым, и его будет сложнее поддерживать. - person ryanzec; 15.11.2012
comment
Ммм, хорошо, если вы используете серверную часть для создания HTML, вы можете управлять своими частичными частями как настоящими частичными (разными файлами), но объединять все в один HTML для повышения производительности. Как я это делаю прямо сейчас. - person Marçal Juan; 15.12.2012
comment
@Marçal, я делаю это на этапе сборки, помимо минимизации всех css и js и распределения в логических блоках (общее + текущее приложение). Я создаю файл со всеми шаблонами, которые могут легко получить ответ 304, поскольку им управляет сервер или уровень кеша... В среде разработки я просто отправляю файлы отдельно по запросу. - person Alfonso de la Osa; 26.04.2013
comment
Есть ли способ поместить html в отдельный файл? т. е. template1.html, teplate2.html и т. д. - person Manish Rawat; 18.05.2016
comment
@ManishRawat, если шаблона нет в кеше, то он загружается по адресу templateUrl. - person Marcello Nuccio; 19.05.2016

arrow_upward
5
arrow_downward

Что я делаю, так это использую шаблон вместо templateUrl и использую текстовый плагин requirejs для загрузки шаблонов. Таким образом, для разработки у вас могут быть тысячи файлов для ваших шаблонов, но после минимизации у вас будет только один файл javascript со всеми встроенными шаблонами.

Я создал проект с открытым исходным кодом, который настроен для магистрали, но может быть легко изменен для angular, который выполняет минимизацию и требует подключения текстового плагина js для вас: http://github.com/davidjnelson/agilejs

person davidjnelson    schedule 04.03.2013
comment
другая альтернатива, и то, что делает Google, заключается в использовании закрытия вместо requirejs для управления зависимостями. - person davidjnelson; 05.03.2013