How can we add a template to a div in angularjs

Question

i am stuck in some concepts of backbone which i try to implement in angular js . in backbonejs we can add a template (html page) to a particular div tag and we can render that div itself. is possible to do same in angularjs? adding a template to a div and render it?

What's the use case of adding a template to a div and then rendering it? You can put a template in a `script` tag and reference it from various other directives: http://docs.angularjs.org/api/ng.directive:script — Langdon, May 29 '13 at 01:35
possible duplicate of [AngularJs Include Partial Template](http://stackoverflow.com/questions/22329769/angularjs-include-partial-template) — Vivek, Jul 20 '15 at 10:22

score 0 · Answer 1 · answered May 29 '13 at 01:38

0

You can throw a template in a script tag and reference it by the id from ngInclude and ngView:

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

Example: 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>

answered May 29 '13 at 01:38

Langdon

19,875
18
88
107

if we want to load an external html page(template) to a div dynamically – Jose G Varanam May 29 '13 at 10:03
`ngInclude` supports that with the `src` attribute as well: http://docs.angularjs.org/api/ng.directive:ngInclude – Langdon May 29 '13 at 14:11

score 0 · Answer 2 · answered Jun 25 '13 at 22:03

I would recommend using ui-router. It will allow you to include multiple "views" in a root of a template. For Example

<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>

In your module config object:

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);

How can we add a template to a div in angularjs

2 Answers2