crea una singola vista html per più viste parziali in angularjs

Desidero creare un singolo file html con più tag. Questi dovrebbero fungere da singole viste separate che di solito sono conservate nella cartella parziale. E poi desidero specificarli nel controller di routing. Per ora sto facendo come segue: app.jscrea una singola vista html per più viste parziali in 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>

nella cartella parziali: Ho 2 viste HTML denominato edit.html e productlist.html

invece di creare questi 2 file, desidero combinarli in uno separato e chiamarli (i div) attraverso il routing. Come faccio a fare questo?

fonte

2012-09-25 z22

Spiegare per favore. Vuoi aggiungere div a index.html? –

no non in index.html ma in qualche altro file html – z22

perché non usare jquery? o semplicemente javascript per mostrare/nascondere i div, tutti nello stesso div. – nycynik

È possibile utilizzare ng-switch per eseguire il rendering condizionale dell'elenco dei prodotti con inclusione, in base ai parametri del percorso.

Prova questo nella configurazione:

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 nel controller:

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

E nel tuo html:

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

fonte

2012-09-25 14:10:17

Ho avuto problemi con una vista di nidificazione e deep linking in Angular come $ routerProvide non supporta più ng-view .. Ma ho trovato una possibile soluzione su come fare questo happe n here. Si basa sulla gestione manuale dei percorsi utilizzando il contesto della richiesta e il contesto di rendering.

fonte

2013-01-18 13:57:47

Ho avuto lo stesso problema, ora c'è una soluzione per esso utilizzando: UI-Router

Il vantaggio di utilizzare questo e non l'ngRoute è che si può avere più viste nella stessa pagina utilizzando "ui-view "convenzione di denominazione.

fonte

2016-04-10 11:56:23

crea una singola vista html per più viste parziali in angularjs

risposta

Problemi correlati