UI Router charger la page de détails d'une page de liste

AngularJS application à l'aide de l'interface utilisateur du routeur.
Ma liste de page se charge correctement, mais lorsque vous cliquez sur les liens sur la page de la liste de mes changements de l'url, mais mon code html sur la page ne change pas, il reste sur la page de la liste. Quel est le problème avec cette gamme?

app.js

var myApp = angular.module('myApp', ['ui.router']);

myApp.config([
    '$stateProvider', function($stateProvider) {
        $stateProvider
            .state('products', {
                url: '',
                templateUrl: 'Scripts/templates/manageProducts/products.list.html',
                controller: 'productListCtrl'
            })
            .state('products.detail', {
                url: '/:id',
                templateUrl: 'Scripts/templates/manageProducts/products.detail.html',
                controller: 'productDetailCtrl'
            });
    }
]);

Index.html

<div ng-app="myApp">
    <div ui-view></div>
</div>

Sur le products.list.html modèle:

<a ui-sref="products.detail({ id: 1 })">Detail for Item 1</a>

Devrais-je être même à l'aide de l'INTERFACE utilisateur du Routeur? La liste et les détails page 2 écrans distincts.

source d'informationauteur Ryan Langton

  1. 16

    Il y a un plunkerce qui devrait permettre de donner une réponse:

    Devrais-je être même à l'aide de l'INTERFACE utilisateur du Routeur? La liste et les détails page 2 écrans distincts.

    Dans le cas, que nous continuerons avec productDetails de l'état, nous ne lâche quelque chose (si ce n'est même beaucoup).

    Dans le exemple nous pouvons voir cette définition de l'état:

    $stateProvider

    //parent state for products.detail
    //the important thing here is that it must contain
    //ui-view="details", because the child is targeting it
    .state('products', {
      url: '/products',
      templateUrl: 'products.list.html',
      controller: 'productListCtrl'
    })
    //here, we will hook into the parent ui-view
    //that means one essential thing:
    //our scope, will be inherited from parent
    .state('products.detail', {
      url: '^/:id',
      views: {
        'detail': {
          templateUrl: 'products.detail.html',
          controller: 'productDetailCtrl'
        }
      },
    })

    Jusqu'à maintenant, nous avons vu la norme imbriqués les états parent/enfant. Nous allons ensuite définir le sous-état, tout en ciblant la racine ui-view=""

        //this one is as the productDetails
    //it skips parent and targets the root view
    //despite of the fact, that it is defined as sub-state of the products !
    //we won't get anything from parent state
    .state('products.detailAsRoot', {
      url: '^/product/:id',
      views: {
        '@': {
          templateUrl: 'products.detail.html',
          controller: 'productAsRootCtrl'
        }
      },
    });

    Tout d'abord, l'héritage en javascript/scopes est extrêmement expliqué ici:

    Et aussi, l'important c'est que les étendues dans l'interface utilisateur du routeur sont héritées dans une sorte de "vue de nidification"

    Fondamental citer:

    Garder à l'esprit que les propriétés de l'étendue seulement hérité de descendre de l'état de la chaîne si les points de vue des états sont imbriqués. L'héritage de propriétés de l'étendue n'a rien à voir avec l'imbrication de vos états, et tout à voir avec l'imbrication de vos points de vue (des modèles).

    Donc, qu'est-ce que tous les cette réponse? À dire: si nous allons utiliser ui-routerle plus grand avantage est la portée de l'héritage. Parent peut faire quelque chose une fois... enfant(s) peuvent réutiliser.

    Voir aussi:

  2. 6

    J'ai eu à faire la page des détails de son propre état, comme suit:

            .state('productDetails', {
            url: '/:id',
            templateUrl: 'Scripts/templates/manageProducts/products.detail.html',
            controller: 'productDetailCtrl'
        })

    au lieu de 'produit.les détails", j'ai utilisé "productDetails'

  3. 4

    À l'aide d'une racine, abrégé de l'état:

    .state('products', {
  abstract: true,
  url: '/products',
  template: '<ui-view/>'
})
.state('products.list', {
  url: '',
  template: '<div>Products list</div>'
})
.state('products.detail', {
  url: '/:productId',
  template: '<div>Product detail</div>'
})