AngularJS ui-router中的多视图界面(Multiple Named Views)

AngularJS ui-router中的多视图界面(Multiple Named Views)_第1张图片
ui-router 的view在普通情况下是不需要加名字的,写成下面这样就行:

<div ui-view></div>

但是,ui-router还支持更复杂的方式,在同一个模版页面中同时采用多个ui-view,并通过命名加以区分,如下所示:

<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

这样做的好处是:

  • 提供了灵活性;
  • 很适合singleton模式的模块(比如:侧边栏sidebar、模态框modal等 );
  • 在同一个模版下拥有多个视图;

缺点嘛:

  • 大部分时候并不是必要的,如果能用嵌套的方式解决还是先用嵌套的方式;
  • 增加了复杂性;
  • 这种用法是反设计模式的;

你可能感兴趣的:(AngularJS,ui-router)