Erstellen Sie eine einzelne HTML-Ansicht für mehrere Teilansichten in angularjs

Ich wollen, erstellen Sie eine einzelne html-Datei mit mehreren tags. Diese sollte als eigenständige individuelle Ansichten, die sind in der Regel gehalten in den partials-Ordner.
Und dann habe ich wollen, geben Sie diese im routing-controller.
Für jetzt bin ich dabei wie folgt:
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>

in den partials-Ordner:
ich habe 2 html-Ansichten genannt edit.html und productlist.html

erstellen, anstatt diese 2 Dateien, die ich wünschte, kombinieren Sie Sie in einem in separaten und nennen Sie (die divs) über routing.
Wie mache ich das?

InformationsquelleAutor der Frage z22 | 2012-09-25

  1. 42

    Könnten Sie ng-switch bedingt, daß Ihre productList mit einem umfassen-je nach route-Parameter.

    Versuchen, diese in Ihre 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 Ihre html:

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

    InformationsquelleAutor der Antwort Andrew Joslin

  2. 0

    Hatte ich problem mit der Verschachtelung von Ansichten und deep-linking in Eckig als $routerProvide nicht unterstützt mehrere ng-view.. Aber ich habe eine mögliche Lösung gefunden, wie dies geschehen hier. Die basiert auf der übergabe Routen manuell mittels des request-Kontext und der render-Kontext.

    InformationsquelleAutor der Antwort Max Podriezov

  3. 0

    Ich Hatte das gleiche problem, jetzt gibt es eine Lösung für Sie mit:
    UI-Router

    Der Vorteil der Verwendung dieses und nicht das ngRoute ist, dass Sie können mehrere Ansichten auf der gleichen Seite mit "ui-view" Namenskonvention.

    InformationsquelleAutor der Antwort Offir Pe'er

Schreibe einen Kommentar