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

Question

使用ui-router的AngularJS应用程序.我的列表页面加载正确,但是当点击列表页面上的链接时,我的网址会更改但页面上的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路由器吗？列表和详细信息页面是2个不同的屏幕.

Answer 1

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

我应该使用UI路由器吗？列表和详细信息页面是2个不同的屏幕.

如果我们继续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中的继承在这里得到了极大的解释:

• AngularJS中范围原型/原型继承的细微差别是什么？

而且,重要的是,ui-router中的范围是以"视图嵌套"的方式继承的

• 仅按视图层次结构的范围继承

一个基本的引用:

请记住,只有嵌套状态的视图时,范围属性才会继承状态链.范围属性的继承与状态的嵌套以及与视图(模板)的嵌套有关的所有内容都无关.

那么这个答案究竟是什么呢？要说:如果我们将使用ui-router,最大的好处是范围继承.父母可以做一次......孩子可以重复使用它.

另见:

• 当状态发生变化时,如何防止在命名视图上重新加载？AngularJS UI-Router
• Angular UI路由器嵌套状态在子状态中解析
• 这里描述了具有工作实例的掠夺者

Answer 2

我必须将详细信息页面设置为自己的状态,如下所示:

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

而不是'product.details'我使用'productDetails'