crear una única vista html para múltiples vistas parciales en angularjs

Deseo crear un solo archivo html con múltiples tags. Estos deberían actuar como vistas individuales separadas que generalmente se guardan en la carpeta de parciales. Y luego deseo especificarlos en el controlador de enrutamiento. Por ahora estoy haciendo lo siguiente: 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       

en la carpeta de partials: tengo 2 vistas html llamadas edit.html y productlist.html

en lugar de crear estos 2 archivos, deseo combinarlos en uno por separado y llamarlos (los divs) a través del enrutamiento. ¿Cómo hago esto?

Puede usar ng-switch para renderizar condicionalmente su productList con un include, dependiendo de los parámetros de la ruta.

Prueba esto en tu configuración:

  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'}); 

Y en tu controlador:

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

Y en tu html:

  <...productListHtml...> 

Tuve un problema con las vistas de anidamiento y los enlaces profundos en Angular porque $ routerProvide no es compatible con múltiples ng-view … Pero encontré una posible solución para que esto ocurra aquí . Se basa en el enrutamiento manual de las rutas mediante contexto de solicitud y contexto de representación.

Tuve el mismo problema, ahora hay una solución para usarlo: UI-Router

La ventaja de usar esto y no el ngRoute es que puede tener múltiples vistas en la misma página usando la convención de nomenclatura “ui-view”.