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

Deseo crear un solo archivo html con varias etiquetas. 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 la siguiente manera: app.jscrear una única vista html para vistas parciales múltiples en angularjs

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

<!DOCTYPE html> 
<html ng-app = "productapp"> 
<head> 
<title>Search form with AngualrJS</title> 
     <script src="../angular-1.0.1.min.js"></script> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="js/products.js"></script> 
     <script src="js/app.js"></script> 
</head> 
<body> 
    <div ng-view></div> 
</body> 
</html>

en la carpeta parciales: tengo 2 vistas HTML denominado 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?

Fuente

2012-09-25 z22

Por favor, explique. ¿Desea agregar divs a index.html? –

no no en index.html pero en algún otro archivo html – z22

¿por qué no utilizar jquery? o simplemente javascript para mostrar/ocultar divs, todo en el mismo div. – nycynik

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

Pruebe esto en su 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 su controlador:

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

Y en su html:

<...productListHtml...> 
    <div ng-switch="productId != null"> 
     <div ng-switch-when="true" ng-include="'partials/product.html'"> 
    </div>

Fuente

2012-09-25 14:10:17

tuve un problema con vistas anidación y enlaces profundos en angular como $ routerProvide no admite múltiples ng-view ... Pero encontré una posible solución para hacer esto n here. Se basa en el enrutamiento manual de las rutas mediante contexto de solicitud y contexto de representación.

Fuente

2013-01-18 13:57:47

tuve el mismo problema, ahora hay una solución para ello usando: UI-Router

La ventaja de usar este y no el ngRoute es que usted puede tener múltiples puntos de vista en la misma página utilizando "ui-vista " convenio de denominación.

Fuente

2016-04-10 11:56:23

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

Respuesta

Cuestiones relacionadas