Страница загрузки нагрузки маршрутизатора UI со страницы списка

Приложение AngularJS с использованием ui-router. Моя страница списка загружается правильно, но при нажатии на ссылки на странице списка изменяется мой url, но мой html на странице не изменяется, он остается на странице списка. Что не так с этой маршрутизацией?

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>

В шаблоне products.list.html:

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

Должен ли я использовать UI Router? Страница списка и деталей - это два разных экрана.

Ответы

Ответ 1

Существует plunker, который должен помочь дать ответ:

Должен ли я использовать UI Router? Страница списка и деталей - это два разных экрана.

В случае, если мы продолжим с состоянием productDetails, мы что-то потеряем (если даже не много).

В пример мы можем увидеть это определение состояния:

$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'
        }
      },
    })

До сих пор мы видели стандартные родительские/дочерние состояния вложенных состояний. Затем мы определим под-состояние, а нарисуем корень 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'
        }
      },
    });

Во-первых, наследование в javascript/scopes чрезвычайно объяснено здесь:

Кроме того, важно то, что области в ui-router наследуются способом "вложения вида"

Основной пример:

Имейте в виду, что свойства области только наследуют цепочку состояний, если представления ваших состояний вложены. Наследование свойств области не имеет ничего общего с вложением ваших состояний и всего, что связано с вложением ваших представлений (шаблонов).

Так о чем же все это ответ? Сказать: если мы будем использовать ui-router, самым большим преимуществом является наследование области. Родитель может что-то сделать однажды... child (ren) может просто повторно использовать его.

Также смотрите:

Ответ 2

Мне нужно было создать страницу сведений о себе, как показано ниже:

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

вместо 'product.details' Я использовал 'productDetails'

Ответ 3

Использование корневого абстрактного состояния:

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