angular ui-router怎么使用

Posted 2023-05-09

参考技术A 主要是一个状态配置和一个重定向的问题，这些在百度里面都会有很详细的介绍，推荐你可以看一下，还有就是在首页，相当于你的公共页面引入所有的js文件，子页面没有body元素，用div来代替body，具体可以追问

Angular UI-Router 多视图

【中文标题】Angular UI-Router 多视图

【英文标题】：Angular UI-Router multiple views

【发布时间】：2014-04-06 05:25:06

【问题描述】：

我正在使用 Angular UI-Router。我的路线配置中有以下内容

.config(function config($stateProvider) 
  $stateProvider.state('newsFeedView', 
      url: '/newsFeed',
      controller: 'newsFeedController',
      templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',
      data: 
        pageTitle: 'News Feed'
      
    )
    .state('tradeFeedView', 
      url: '/tradeFeed',
      controller: 'tradeFeedController',
      templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',
      data: 
        pageTitle: 'Trade Feed'
      
    )
    .state('bulletinBoard', 
      url: '/bulletinBoard',
      views: 
        'tradeFeed': 
          url: "",
          controller: 'tradeFeedController',
          templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'
        ,
        'newsFeed': 
          url: "",
          controller: 'newsFeedController',
          templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'
        
      ,
      templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'
    );
)

在我的索引页面中，我只是使用以下方法调用视图：

<div class="container" ui-view></div>

在我的公告板.html 中，我想要一个嵌套视图：

<div ui-view="tradeFeed"></div>
<div ui-view="newsFeed"></div>

对于 /newsFeed 页面和 /tradeFeed 页面，这非常有效，但对于公告板，我在页面上看不到任何内容。我哪里错了？

【参考方案1】：

我发现官方 GitHub wiki 上的示例非常不直观。这是一个更好的：

https://scotch.io/tutorials/angular-routing-using-ui-router

例如：

...

.state('bulletinBoard', 
    url: '/bulletinBoard',
    views: 

        // the main template will be placed here (relatively named)
        '':  templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' ,

        // the child views will be defined here (absolutely named)
        'tradeFeed@bulletinBoard':  template: ..... ,

        // another child view
        'newsFeed@bulletinBoard':  
            templateUrl: ......
        
    

);

每个视图属性的语法为viewName@stateName。

【讨论】：

教程链接正是我想要的。谢谢！

比github.com/angular-ui/ui-router/wiki/Multiple-Named-Views 更好的例子。这简化了我从抽象状态 w/child 的配置，这似乎是 github wiki 所建议的。非常感谢！

完美，我使用它来获得两种类型的视图（单一 - 认为没有页眉，只是整页登录页面；和内容 - 带有页眉和页脚的标准页面）。 问题：这是一个 hacky 设置还是 WAD 方法？

如何在多个视图之间共享范围变量？

【参考方案2】：

使用 views 对象时，.state() 方法的 templateUrl 会被忽略。有关更多信息，请参阅 ui-router wiki： https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties