Angular嵌套路由器ui

Angular nested router-ui

本文关键字：ui 路由器 嵌套 Angular      更新时间：2023-09-26

在angular中如何为嵌套视图创建路由呢? 

/#/app/dashboard
/#/app/product/
/#/app/product/new

我当前的路线是:

$stateProvider
    .state('app',{
        url: '/app',
        templateUrl: 'views/app.html',
        resolve: loadSequence('modernizr','moment'),
        abstract: true
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'views/dashboard.html',
        title: 'Dashboard',
        ncyBreadcrumb: {
            label: 'Dashboard'
    }
    }).state('app.product', {
        url: '/product',
        templateUrl: "views/product.html",
        title: 'Buttons',
        resolve: loadSequence('ngTable', 'ngTableCtrl')
    }).state('app.product.new', {
        parent: 'app.product',
        url: '/new',
        templateUrl: "views/add_product.html",
        title: 'Buttons',
        resolve: loadSequence('ngTable', 'ngTableCtrl')
    })

这个问题是，查看/#/app/product/new渲染回/#/app/product。问题在哪里?嵌套视图是如何为angular工作的?

谢谢!

您在上面提出的概念正在发挥作用。我创建了一个示例工作柱塞，以显示这种状态流正在工作:

$stateProvider
    .state('app',{
        url: '/app', 
        templateUrl: 'views/app.html',
        abstract: true
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'views/dashboard.html'
    }).state('app.product', {
        url: '/product',
        templateUrl: "views/product.html",
    }).state('app.product.new', {
        parent: 'app.product',
        url: '/new',
        templateUrl: "views/add_product.html",
    })

这些链接工作，并按预期导航:

<a href="#/app/dashboard">
<a href="#/app/product">
<a href="#/app/product/new">

唯一的方法，我是如何做这个链接的

<a href="#/app/product/new/">

导航到它的父元素(如问题中所述)，是通过1)具有如下的默认rdirection:

$urlRouterProvider.otherwise('/app/product');

如上面的例子所示-使用错误的链接

// check the trailing /
<a href="#/app/product/new/">
// this will work
<a href="#/app/product/new">

总结，概念还可以。从#/app/product/new到#/app/product没有内在的原因

点击这里查看

扩展

按规定-这是坏掉的柱塞。我在这里修改了

第一个调整是index.html - cleanup
  1. 删除错误元素
  2. 并使用NOT MIN角来查看问题

index . html: 

<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <!--script>document.write('<base href="' + document.location + '" />');</script-->
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js" data-semver="1.4.6"></script>
    <script data-require="ui-router@*" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
    <!--<script>-->
    <script src="app.js"></script> 
  </head>

然后，真正的问题是错误的引用名称'ui-router' -它应该是'ui.router'

app.js 

// wrong
var app = angular.module('plunker', ['ui-router'])
// working
var app = angular.module('plunker', ['ui.router'])

(基于注释) -还有另一个重要的特性- target <div ui-view> 。这被添加到父状态'app.product'。

原因是-每个状态(包括任何子或孙子)必须被注入某个地方。默认情况下，它是它的父节点。所以父'app.product'应该包含 ui-view 目标-为它的子'app.product.new'。

还有其他技术-称为命名视图和绝对命名，可以在这里详细观察:

  • Angular UI Router -有多个布局的嵌套状态
  • Angularjs的ui-router没有到达子控制器
    • Angular ui-router:容器视图和默认视图

工作版本在这里

相关文章：