Как добавить шаблон в div в angularjs

Question

Я застрял в некоторых понятиях позвоночника, которые я пытаюсь реализовать в угловых js. В backbonejs мы можем добавить шаблон (html-страницу) к определенному тегу div, и мы можем отобразить этот div. можно сделать то же самое в angularjs? добавление шаблона в DIV и сделать его

Answer 1

Вы можете бросить шаблон в script тега и ссылаться на него по идентификатору ngInclude и ngView:

Docs: http://docs.angularjs.org/api/ng.directive:script

Пример: http://jsfiddle.net/guilleferrer/bxdrA/1/

<div ng-app=""> 
    <script type="text/ng-template" id="/tpl.html"> 
    Content of the template. 
    </script> 

    <ng-include src="'/tpl.html'"></ng-include> 
</div> 

Answer 2

Я бы рекомендовал использовать ui-router. Это позволит вам включить несколько «представлений» в корень шаблона. Для примера

<div ui-view="header"></div> 
    <div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span2 main-menu-span"> 
     <div class="nav-collapse sidebar-nav"> 
      <ul ui-view="nav-bar" class="nav nav-tabs nav-stacked main-menu"></ul> 
     </div><!--/.well --> 
     </div> 
     <div id="content" class="span10" ui-view="main"> 
     <div ui-view="breadcrumbs"></div> 
     </div> 
    </div> 
    </div> 
</div> 

в модуле объекта конфигурации:

var tickets = { 
     name: 'tickets', 
     url: '/tickets', 
     abstract: true, 
     views: { 
      'header': { 
       templateUrl: 'header.tpl.html' 
      }, 
      'nav-bar': { 
       templateUrl: 'nav-bar.html' 
      }, 
     } 
    }; 
    var list = { 
     name: 'tickets.list', 
     parent: 'tickets', 
     url: '', 
     views: { 
      'main@': { 
       templateUrl: 'list.tpl.html', 
       controller: TicketQueue, 
      }, 
     }, 
    }; 
    $stateProvider.state(tickets); 
    $stateProvider.state(list);