角UI路由器多个命名视图所有国家 [英] Angular ui router multiple named views for all states

问题描述

我想知道是否有任何方式写入所有状态的多个命名视图，最好的例子就是，当我想要的导航栏和页脚出现在所有路由。

I want to know if there is any way to write multiple named view for all states, the best example is when i want the nav bar and footer to appear in all routes.

$stateProvider
  .state('home',{
    views: {
      'home': {
        templateUrl: 'home.html',
        controller: controller
      },
      'nav': {
        templateUrl: 'nav.html',
        controller:controller
      },
      'footer': {
        templateUrl: 'footer.html',
        controller: controller
      },
    }
  })

我不想使用NG-包括，因为资产净值和页脚显示的家乡在这种情况下得到解决之前。

I dont want to use ng-include, because the nav and the footer is showing before the home state is resolved in this case.

推荐答案

是的，你可以，自己居然写的 UI路由器指南中关于如何管理< A HREF =htt​​ps://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views> 多个命名视图 。

Yes you can, its actually written in the ui-router's guide on how to manage Multiple Named Views.

首先，您需要定义一组特定的抽象状态命名视图，包括视图，你会把你所有内容的看法，如你的 home.html的并把它放在一个无名的视图（空字符串）。

First, you need to define a specific set of named views in an abstract state, including the view where you would put all your content views such as your home.html and put it in a nameless view (empty string).

正如你可能已经注意到了，下面的演示显示了名为应用，根状态，这也是一个抽象状态（这意味着你不能在这种状态下浏览） 。它有三个观点，每个重presents对应于用户界面视图■在 index.html的。

As you may have noticed, the demo below shows a root state named app, which is also an abstract state (this means you can't navigate in this state). It has three views, each represents a name that corresponds to the ui-views defined in the index.html.

在无名的视图，包含 content.html 有一种莫名的用户界面视图将重新present的应用状态的所有子状态。通过这样做，你可以分享 nav.html 和 footer.html 您所有的州，如果你添加这些状态在应用程序在状态。对此的一个例子是 app.home 和 app.items 状态。要了解更多关于这一点，看我在上面添加的链接。

Within the nameless view, contains the content.html that has a nameless ui-view that will represent all the child states of the app state. By doing this, you can share the nav.html and footer.html to all your states if you add these states under the app state. An example to this would be the app.home and app.items state. To learn more about this, read the link I've added above.

演示

DEMO

的JavaScript 的

Javascript

$urlRouterProvider.otherwise('/home');

$stateProvider.state('app', {
  abstract: true,
  views: {
   nav: {
     templateUrl: 'nav.html',
     controller: 'NavController as Nav'
   },

   '': {
     templateUrl: 'content.html',
     controller: 'ContentController as Content'
   },

   footer: {
     templateUrl: 'footer.html',
     controller: 'FooterController as Footer'
   }

  }
})

.state('app.items', {
  url: '/items',
  templateUrl: 'items.html',
  controller: 'ItemsController as Items'
})

.state('app.home', {
  url: '/home',
  templateUrl: 'home.html',
  controller: 'HomeController as Home'
});

HTML 的

HTML

的 index.html的的

<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>

的 content.html 的

<hr>
<ui-view></ui-view>
<hr>

这篇关于角UI路由器多个命名视图所有国家的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！