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

Desejo criar um único arquivo html com várias tags. Estes devem atuar como visões individuais separadas que normalmente são mantidas em pastas parciais. E então eu gostaria de especificá-los no controlador de roteamento. Por enquanto estou fazendo o seguinte: app.js

angular.module('productapp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}). when('/productapp/:productId', {templateUrl: 'partials/edit.html', controller: editCtrl}). otherwise({redirectTo: '/productapp'}); }], ['$locationProvider', function($locationProvider) { $locationProvider.html5Mode = true; }]); 

index.html

     Search form with AngualrJS       

na pasta parciais: eu tenho 2 exibições de html chamadas edit.html e productlist.html

em vez de criar esses 2 arquivos, desejo combiná-los em um em separado e chamá-los (os divs) por meio de roteamento. Como eu faço isso?

Você poderia usar ng-switch para renderizar condicionalmente sua productList com um include, dependendo dos parâmetros da rota.

Tente isso na sua configuração:

  angular.module('productapp', []) .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}) .when('/productapp/:productId', {templateUrl: 'partials/productList.html', controller: productsCtrl}) .otherwise({redirectTo: '/productapp'}); 

E no seu controlador:

  function productsCtrl($scope, $routeParams) { $scope.productId = $routeParams.productId; } 

E no seu html:

  <...productListHtml...> 

Eu tive problema com vistas de aninhamento e links profundos em Angular como $ routerProvide não suporta múltiplos ng-view .. Mas eu encontrei uma solução possível como fazer isso acontecer aqui . Sua base na entrega de rotas manualmente usando contexto de solicitação e contexto de renderização.

Eu tive o mesmo problema, agora há uma solução para isso usando: UI-Router

A vantagem de usar isso e não o ngRoute é que você pode ter várias visualizações na mesma página usando a convenção de nomenclatura “ui-view”.