angularjs - UI 路由器从列表页面加载详细信息页面

Question

使用 ui-router 的 AngularJS 应用程序。
我的列表页面加载正确，但是当单击列表页面上的链接时，我的 url 会更改，但页面上的 html 没有更改，它仍保留在列表页面上。这个路由有什么问题？

应用程序.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'
            });
    }
]);

索引.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 路由器吗？列表和详细信息页面是 2 个不同的屏幕。

Answer 1

有一个plunker ，这应该有助于给出答案:

Should I even be using UI Router? The list and details page are 2 distinct screens.

以防万一，我们将继续使用 productDetails状态，我们确实丢失了一些东西(如果不是很多的话)。

在 example我们可以看到这个状态定义:

$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 中的继承在这里得到了极大的解释:

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

而且，重要的是，ui-router 中的范围以“ View 嵌套”的方式继承

Scope Inheritance by View Hierarchy Only

一个基本的引用:

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

那么这个答案是关于什么的？说:如果我们将使用 ui-router ，最大的好处是作用域继承。 parent 可以做一次…… child (人)可以重复使用它。

另见:

How do I prevent reload on named view, when state changes? AngularJS UI-Router

Angular UI Router Nested State resolve in child states

plunker此处描述的工作示例