3

Как с помощью AngularJS сделать загрузку части html-страницы из html-шаблона (дабы не повторять несколько раз один и тот же код)?

2
  • 1
    Можете давать подробности: что за часть, которая повторяется / где она повторяется?
    – Michel
    1 ноя 2015 в 19:25
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 25 ноя 2015 в 5:37

2 ответа 2

4

Существует множество способов подгрузки/манипулации частей шаблона (chunks).

1) Хранить рядом в основном layout. Для этого используется <script>.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>

<div ng-app="">
    <script type="text/ng-template" id="some_tpl.html">
        Hello world!
    </script>
  
    <div ng-include="'some_tpl.html'"></div>
</div>

В даннном пример <script> мы используем в паре с ng-include.

2) GET запросом. Если локальный <script> c конкретным id не найден (на самом деле задействован $templateCache, но об этом ниже), то происходит запрос на сервер в попытке получить шаблон. Собственно, id является одновременно и URL-ом.

А именно:

<div ng-include="'/tpls/some_tpl.html'"></div>

GET запрос можно обработать двумя способами:

  • web-приложением (python, php и т.д.). Плюсы: шаблон можно отрендерить как угодно. Минусы: дорого, ибо происходит запуск скрипта, которым вполне может быть какой-нибудь развесистый фреймворк (Django, Symfony). Кроме того, это не SPA-way к котрому Angular склоняет - рендеринг на клиенте, а от сервера только json.
  • только сервером. Шаблон отдавать в виде статики, т.е. можно хранить шаблоны наравне с остальной статикой (css, js, images) + все бенефиты сервера по работе со статикой - кэширование на сервере/на клиенте, сжимать gzip-ом.

3) Задать шаблон в js. Такой способ приемлем, если вы делаете некую виджет-директиву и необходимо задать небольшой шаблон, который будет использоваться по умолчанию, если разработчик не задал его сам. Angular к счастью или, к сожалению, не ReactJS.

$templateCache

Указывая шаблон в <script> или при первоначальной загрузке шаблона с сервера, последний заносится в специальный кэш. Таким образом, можно получить/добавить/удалить шаблон из кэша по его id.

Пример получения шаблона из кэша:

angular.module('app', [])
  .controller('MainCtl', MainCtl);

MainCtl.$inject = ['$templateCache'];

function MainCtl($templateCache)
{
    alert($templateCache.get('/tpls/some_tpl.html'));
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>

<div ng-app="app" ng-controller="MainCtl">
  
    <script type="text/ng-template" id="/tpls/some_tpl.html">Hello world!</script> 
  
</div>

Вместо заключения

В директивах, а также в маршрутизаторе (см. ответ @Michael P. Bazos) существует два параметра: template и templateUrl. Первый позволяет задать шаблон в сыром виде (его исходник), а второй - URL/id шаблона.

Пример <script> + директива:

angular.module('app', [])
  .directive('hello', hello);


function hello() {
  return {
    restrict: 'A',
    templateUrl: '/tpls/some_tpl.html'
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>


<div ng-app="app">

  <script type="text/ng-template" id="/tpls/some_tpl.html">Hello world!</script>

  <div hello></div>
</div>

Пример с добавлением шаблона в кэш:

angular.module('app', [])
  
  .controller('MainCtl', MainCtl)
  .directive('hello', hello);


MainCtl.$inject = ['$templateCache'];

function MainCtl($templateCache) {
  
  /* шаблон можно "вручную" подтянуть с сервера $http.get() */
  $templateCache.put('some_tpl.html', '<span class="green">Hello world!</span>')    
}

function hello() {
  return {
    restrict: 'A',
    templateUrl: 'some_tpl.html'
  };
}
.green {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>


<div ng-app="app" ng-controller="MainCtl">

  <div hello></div>
</div>

Имея данный набор инструментов можно как угодно манипулировать шаблонами.

-1

В AngularJS, html шаблоны можно загружать при помощи директивы ngInclude. Например:

<ng-include src="'partials/layout/navbar.html'"></ng-include>

Но на практике лучше не использовать ngInclude напрямую, а конфигурировать маршрутизатор, который сам загрузит и внедрит шаблоны.

Двумя главными решениями для маршрутизации в angular приложениях являются:

У второго есть больше возможностей, в том числе можно загружать разные наименованные шаблоны в одной странице:

<body>
    <header ui-view="navbar"></header>
    <main ui-view="main"></main>
    <footer ui-view="footer"></footer>
</body>
2
  • 1
    ужасно, ведь есть же директивы...
    – vas
    1 ноя 2015 в 18:43
  • В чём ужас использовать ui-router? По-моему для таких вещей как навигационное меню директива хуже выбор: директива будет всё равно повториться в разных шаблонах и у angular придётся скомпилировать её при каждой загрузки вида...
    – Michel
    2 ноя 2015 в 0:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.