Soy nuevo en AngularJS y no he podido encontrar tutoriales específicos de unbotones de interruptor de alternar vista de lista y cuadrícula que se carga en dos parciales HTML diferentes. Leer oficialng-include, ng-switch documentos oficiales y buscado SO. Desafortunadamente, no queremos usarEnrutador UI.

Se está cargando en dos parciales (list.html ygrid.html) la forma angular correcta de codificar esto?

La ayuda más relevante que he encontrado son estas:

1)http://tutorialzine.com/2013/08/learn-angularjs-5-examples (Ejemplo # 5)

Hubo un comentario perspicaz en el Ejemplo # 5

Buenos ejemplos simples, bien hecho. El último ejemplo que cambia entre las vistas de cuadrícula y lista no es muy eficiente ya que crea ambas opciones y la muestra / oculta una. Un enfoque más simple / mejor sería usar un único ul con repetidor y ng-switch y luego habilitar los elementos de lista alternativos usando ng-switch-case. - Johan

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

3)crear una sola vista html para múltiples vistas parciales en angularjs

4)Ng-include condicional en angularjs

Mi código 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-->

Mi codigo directivo

'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";

};
});