Я новичок в AngularJS, и я не смог найти конкретные учебникикнопки тумблера списка и вида сетки который загружается в двух разных HTML-частях. Читайте официальныйng-include, ng-switch официальные документы и искал ТАК. К сожалению, мы не хотим использоватьUI-маршрутизатор.

Загружается в две части (list.html а такжеgrid.html) Правильный угловой способ кодирования это?

Наиболее важная помощь, которую я нашел, это:

1.http://tutorialzine.com/2013/08/learn-angularjs-5-examples (Пример № 5)

Был Проницательный комментарий к Примеру № 5

Хорошие простые примеры - молодцы. Последний пример, который переключается между представлениями сетки и списка, не очень эффективен, так как он создает и параметры, и показывает / скрывает один. Более простым / лучшим подходом было бы использование одного ul с ретранслятором и ng-switch, а затем включение альтернативных элементов списка с использованием ng-switch-case. - Йохан

2.http://www.adobe.com/devnet/html5/articles/getting-started-with-angularjs.html

3.создать один HTML-представление для нескольких частичных представлений в angularjs

4.Условное ng-include в angularjs

Мой HTML код

 <div class="col-xs-6" ng-controller="ToggleDisplayCtrl">
    <div class="btn-group select-format-container" ng-switch on="selected">
      <button ng-switch-when="true" ng-click="toggleGrid()" type="button" class="btn btn-primary" ng-model="formatChoice" ng-disabled="">grid</button>
      <button ng-switch-when="false" ng-click="toggleList()" type="button" class="btn btn-primary" ng-model="formatChoice" ng-disabled="">list</button>
    </div>

    <div ng-include src="formatChoice.url" scope="" onload=""></div>

  </div><!-- col-xs-6  END ToggleDisplayCtrl-->

Мой код директивы

'use strict';

 var app = angular.module('tempApp');

 app.controller('ToggleDisplayCtrl', function($scope) {
  $scope.formatChoices =
  [ { name: 'grid', url: 'partials/grid.html'},
    { name: 'list', url: 'partials/list.html'} ];

$scope.selected = true;
$scope.toggleGrid = function() {
  if(selected) {
    return "partials/grid.html";
  }
  return "main.html";
};
$scope.toggleList = function() {
  if(selected) {
    return "partials/list.html";
  }
  return "main.html";

};
});