Партиалы в AngularJS

#html #html5 #angularjs

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

Ответы

Ответ 1

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

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


    
  
    






В даннном пример 


  
     
  





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

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

Пример 




  

  






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



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


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

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

function hello() {
  return {
    restrict: 'A',
    templateUrl: 'some_tpl.html'
  };
}
.green {
  color: green;
}





  






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


Ответ 2

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




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

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


ngRoute
ui-router


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