Eu sou novo no AngularJS e não consegui encontrar tutoriais específicos de umbotões de alternância de exibição de lista e grade que carrega em duas parciais HTML diferentes. Leia oficialng-include, ng-switch documentos oficiais e pesquisou SO. Infelizmente, não queremos usarRoteador de interface do usuário.

Está carregando em duas partes parciais (list.html egrid.html) a maneira angular correta de codificar isso?

A ajuda mais relevante que encontrei são:

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

Houve um comentário perspicaz no Exemplo # 5

Exemplos simples e agradáveis - bem feito. O último exemplo que alterna entre as visualizações de grade e de lista não é muito eficiente, pois cria as duas opções e a mostra / oculta. Uma abordagem mais simples / melhor seria usar um único ul com repetidor e ng-switch e, em seguida, ativar os elementos alternativos da lista usando ng-switch-case. - Johan

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

3)crie uma única visualização em html para várias visualizações parciais em angularjs

4)Ng-include condicional em angularjs

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

Meu código de diretiva

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

};
});