UI 路由器从列表页面加载详细信息页面 [英] UI Router load detail page from a list page

问题描述

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

app.js

var myApp = angular.module('myApp', ['ui.router']);myApp.config(['$stateProvider', 函数($stateProvider){$stateProvider.state('产品', {网址:'',templateUrl: 'Scripts/templates/manageProducts/products.list.html',控制器:'productListCtrl'}).state('products.detail', {网址: '/:id',templateUrl: 'Scripts/templates/manageProducts/products.detail.html',控制器:'productDetailCtrl'});}]);

索引.html

<div ui-view></div>

在 products.list.html 模板上:

 商品 1 的详细信息</a>

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

解决方案

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

<块引用>

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

如果我们继续使用 productDetails 状态，我们会丢失一些(如果不是很多).

在示例中，我们可以看到这个状态定义:

$stateProvider//products.detail 的父状态//这里重要的是它必须包含//ui-view="details"，因为孩子正在瞄准它.state('产品', {网址:'/产品'，templateUrl: 'products.list.html',控制器:'productListCtrl'})//在这里，我们将挂钩到父 ui-view//这意味着一件重要的事情://我们的作用域，将从父级继承.state('products.detail', {网址: '^/:id',意见:{'细节': {templateUrl: 'products.detail.html',控制器:'productDetailCtrl'}},})

到目前为止，我们已经看到了标准的嵌套状态父/子.接下来我们将定义子状态，同时针对根 ui-view=""

//这个是productDetails//它跳过父视图并以根视图为目标//尽管事实上它被定义为产品的子状态！//我们不会从父状态得到任何东西.state('products.detailAsRoot', {url: '^/product/:id',意见:{'@':{templateUrl: 'products.detail.html',控制器:'productAsRootCtrl'}},});

首先，这里对 javascript/scopes 中的继承进行了大量解释:

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

而且，重要的是，ui-router 中的作用域是以视图嵌套"的方式继承的

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

基本引用:

<块引用>

请记住，作用域属性只有在您的状态的视图是嵌套的情况下才沿状态链向下继承.范围属性的继承与状态的嵌套无关，而与视图(模板)的嵌套有关.

那么这个答案是关于什么的?要说:如果我们会使用ui-router，最大的好处就是作用域继承.父母可以做一次……孩子(们)可以重复使用它.

另见:

• 当状态发生变化时，如何防止重新加载命名视图?AngularJS UI-路由器
• 子状态中的 Angular UI 路由器嵌套状态解析
• plunker 与此处描述的工作示例

AngularJS app using ui-router. My list page loads correctly, but when clicking on links on the list page my url changes but my html on the page does not change, it remains on the list page. What is wrong with this routing?

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>

On the products.list.html template:

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

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

解决方案

There is an plunker, which should help to give an answer:

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

In case, that we would continue with productDetails state, we do loose something (if not even a lot).

In the example we can see this state definition:

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

Until now we've seen the standard nested states parent/child. Next we will define the sub-state, while targeting the root 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'
        }
      },
    });

Firstly, the inheritance in javascript/scopes is tremendously explained here:

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

And also, important is, that scopes in ui-router are inherited in a way of "view nesting"

• Scope Inheritance by View Hierarchy Only

A fundamental cite:

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

So what is all this answer about? To say: if we will use ui-router, the biggest benefit is the scope inheritance. Parent can do something once... child(ren) can just reuse it.

Also see:

• How do I prevent reload on named view, when state changes? AngularJS UI-Router
• Angular UI Router Nested State resolve in child states
• The plunker with working example described here

这篇关于UI 路由器从列表页面加载详细信息页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！