it-swarm.com.de

erstellen Sie eine einzelne HTML-Ansicht für mehrere Teilansichten in eckigerjs

Ich möchte eine einzige HTML-Datei mit mehreren Tags erstellen. Diese sollten als separate Einzelansichten fungieren, die sich normalerweise im Teilordner befinden. Und dann möchte ich sie im Routing-Controller angeben. Jetzt mache ich Folgendes: 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

    <!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> 

im partials ordner: ich habe 2 html-ansichten namens edit.html und productlist.html

anstatt diese 2 Dateien zu erstellen, möchte ich sie in einer separaten Datei zusammenfassen und sie (die Divs) über das Routing aufrufen. Wie mache ich das?

23
z22

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

Versuchen Sie dies in Ihrer Konfiguration:

    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 deinem Controller:

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

Und in deiner HTML:

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

Ich hatte ein Problem mit verschachtelten Ansichten und tiefen Verknüpfungen in Angular, da $ routerProvide keine Mehrfachansichten unterstützt. Aber ich habe eine mögliche Lösung gefunden, um dies zu erreichen hier . Es basiert auf der manuellen Übergabe von Routen unter Verwendung des Anforderungskontexts und des Renderkontexts.

0
Max Podriezov

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

Der Vorteil dieser und nicht der ngRoute besteht darin, dass Sie mehrere Ansichten auf derselben Seite haben können, indem Sie die Namenskonvention "ui-view" verwenden. 

0
Offir Pe'er