Allow view targeting to specify view on the current state

[christopherthielen]

Named views currently target the parent state

views: {
  "foo": SomeComponent
}

The above is sugar for targeting foo at the parent state, i.e.:

views: {
  "foo@^": SomeComponent
}

We can also relatively target ui-views in the ancestors by adding on additional carets ^.^

views: {
  "foo@^.^": SomeComponent
}

---

Layout states

Consider a LayoutComponent that renders like:

<div id="layout">
  <ui-view name="header"></ui-view>
  <ui-view name="body"></ui-view>
  <ui-view name="footer"></ui-view>
</div>

Sometimes it may be useful to define a layout in a state, and also fill in the layout in that same state. However, a config like this will target the header@^ (at the parent state):

views: {
  $default: LayoutComponent,
  header: HeaderComponent,
}

Of course, you could target the ui-view using fully qualified state name

views: {
  $default: LayoutComponent,
  "header@fully.qualified.state": HeaderComponent,
}

But it might be nice to have a shorthand for "target a view on the current state":

views: {
  $default: LayoutComponent,
  "header@.": HeaderComponent,
  "body@.": BodyComponent,
  "footer@.": FooterComponent,
}

[scipper]

"viewName@." saved my day. Did not know that this one exists! 🤷‍♂️ thanks for the hint @christopherthielen 😊