backbone.js - angularjsのdivにテンプレートを追加するにはどうすればよいですか

Question

angular js で実装しようとするバックボーンのいくつかの概念に行き詰まっています。backbonejs では、特定の div タグにテンプレート (html ページ) を追加し、その div 自体をレンダリングできます。angularjsで同じことをすることは可能ですか? テンプレートを div に追加してレンダリングしますか? </p>

Answer 1

タグでテンプレートをスローし、およびscriptからの id で参照できます。ngIncludengView

ドキュメント: 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);