web-dev-qa-db-fra.com

créer une seule vue html pour plusieurs vues partielles dans angularjs

Je souhaite créer un fichier HTML unique avec plusieurs balises. Celles-ci doivent agir en tant que vues individuelles séparées qui sont généralement conservées dans un dossier de partiels. .__ Et puis je souhaite les spécifier dans le contrôleur de routage . Pour le moment je fais comme suit: 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>

dans le dossier Partials: J'ai 2 vues HTML nommées edit.html et productlist.html

au lieu de créer ces 2 fichiers, je souhaite les combiner en un fichier séparé et les appeler (les divs) via le routage ... Comment puis-je faire cela?

routingroutesangularjs
23
z22

Vous pouvez utiliser ng-switch pour restituer votre productList avec un include, en fonction des paramètres de route.

Essayez ceci dans votre configuration:

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

Et dans votre contrôleur:

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

Et dans votre html:

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

J'avais un problème avec les vues imbriquées et les liens profonds dans Angular car $ routerProvide ne supporte pas la vue multiple. Mais j'ai trouvé une solution possible pour y arriver ici . Il est basé sur la gestion manuelle des itinéraires à l'aide du contexte de requête et du contexte de rendu.

0
Max Podriezov

J'ai eu le même problème, maintenant il existe une solution pour cela en utilisant: UI-Router

L'avantage d'utiliser ceci et non pas ngRoute est que vous pouvez avoir plusieurs vues dans la même page en utilisant la convention de nommage "ui-view". 

0
Offir Pe'er