Разделить шаблон Angular на несколько небольших шаблонов

В моем приложении Angular я пытаюсь понять, каким будет правильный способ разделить мою страницу на компоненты.

Страница перед изменением похожа на:

<div id='settings'>

  <p class='controlGroup' ng-controller="FirstCtrl">
    <label class='control-label'>First Control</label>

    <div class="control">
        <!-- some inputs -->
    </div>
  </p>

  <p class='controlGroup' ng-controller="SecondCtrl">
    <label class='control-label'>Second Control</label>

    <div class="control">
        <!-- some inputs -->
    </div>
  </p>

    </p>


  <button id='saveBtn' class='saveButton' ng-click='saveSettings()'>Save Changes</button>

</div>

Хотя логика управления разделена на два разных контроллера, я хочу также отделить их шаблон, поэтому было бы легко повторно использовать их или переместить их в другое место.

Я вижу много вариантов: теги ng-include, script и т.д.

Каким будет правильный способ?

Ответ 1

Используя ng-include, вы можете иметь разные шаблоны и просто вставлять их в части своей DOM, используя это, это хорошо для времен, когда вы хотите загружать разные представления в зависимости от различных ситуаций, таких как нажатие кнопки навигации или переменной или около того, обратите внимание, что ng-include также компилирует шаблон, чтобы вы могли использовать контроллеры и другие функции и директивы angular в шаблоне, вот пример из angularjs docs:

вот ваш основной html:

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <select ng-model="template" ng-options="t.name for t in templates">
       <option value="">(blank)</option>
      </select>
      url of the template: <tt>{{template.url}}</tt>
      <hr/>
      <div ng-include src="template.url"></div>
    </div>
  </body>
</html>

и вот js:

function Ctrl($scope) {
  $scope.templates =
    [ { name: 'template1.html', url: 'template1.html'}
    , { name: 'template2.html', url: 'template2.html'} ];
  $scope.template = $scope.templates[0];
}

Ответ 2

Директивы - естественный выбор для создания повторно используемых компонентов в angular: http://docs.angularjs.org/guide/directive