Erstellen einer einzelnen HTML-Ansicht für mehrere Teilansichten in angularjs

Ich möchte eine einzelne HTML-Datei mit mehreren Tags erstellen. Diese sollten als separate individuelle Ansichten fungieren, die normalerweise in Teilbereichen gespeichert werden. Und dann möchte ich sie in Routing-Controller angeben. Vorerst i wie tue folgt: app.jsErstellen einer einzelnen HTML-Ansicht für mehrere Teilansichten 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>

in partials Ordner: i edit.html 2 html Ansichten genannt haben und productlist.html

anstatt diese 2 Dateien zu erstellen, möchte ich sie zu einem in separaten kombinieren und sie (die divs) durch Routing anrufen. Wie mache ich das?

Quelle

2012-09-25 z22

Bitte erläutern. Möchten Sie divs zu index.html hinzufügen? –

nein nicht in index.html sondern in einer anderen html-Datei – z22

warum nicht jquery verwenden? oder nur Javascript, um divs anzuzeigen/auszublenden, alle im selben div. – nycynik

Sie könnten ng-switch verwenden, um Ihre Produktliste abhängig von den Routenparametern bedingt mit einem Include zu rendern.

Versuchen Sie dies in Ihrer config:

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

Und in Ihrem Controller:

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

Und in Ihrem html:

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

Quelle

2012-09-25 14:10:17

Ich hatte Probleme mit Verschachtelung Ansichten und DeepLinking in Angular als $ routerProvide unterstützt nicht mehrere ng-view .. Aber ich habe eine mögliche Lösung gefunden, wie dies geschieht n here. Es basiert auf Handover-Routen manuell mit Request-Kontext und Render-Kontext.

Quelle

2013-01-18 13:57:47

Ich hatte das gleiche Problem, jetzt eine Lösung für sie gibt es mit: UI-Router

Dies hat den Vorteil verwenden und nicht die ngRoute ist, dass Sie mehrere Ansichten auf die gleiche Seite mit „ui-Ansicht haben kann " Namenskonvention.

Quelle

2016-04-10 11:56:23

Erstellen einer einzelnen HTML-Ansicht für mehrere Teilansichten in angularjs

Antwort

Verwandte Themen