ViewService | angular-ui-router
Options
Menu

Class ViewService

The View service

This service pairs existing ui-view components (which live in the DOM) with view configs (from the state declaration objects: StateDeclaration.views).

Hierarchy

  • ViewService

Index

Constructors

Properties

_rootContext: ViewContext
_uiViews: ActiveUIView[] = []
_viewConfigFactories: object

Type declaration

_viewConfigs: ViewConfig[] = []

Methods

  • activateViewConfig(viewConfig: ViewConfig): void
  • active(): Array<any>
  • Returns the list of views on the page containing loaded content.

  • Returns the list of views on the page containing loaded content.

    Returns Array<any>

    :

    Returns an array of fully-qualified view names.


  • available(): Array<any>
  • Returns the list of views currently available on the page, by fully-qualified name.

  • Returns the list of views currently available on the page, by fully-qualified name.

    Returns Array<any>

    :

    Returns an array of fully-qualified view names.


  • deactivateViewConfig(viewConfig: ViewConfig): void
  • Deactivates a ViewConfig.

  • Deactivates a ViewConfig.

    This function deactivates a ViewConfig. After calling sync, it will un-pair from any ui-view with which it is currently paired.

    Parameters

    • viewConfig ViewConfig
      :

      The ViewConfig view to deregister.

    Returns void


  • registerUIView(uiView: ActiveUIView): (Anonymous function)
  • Registers a ui-view component

  • Registers a ui-view component

    When a ui-view component is created, it uses this method to register itself. After registration the sync method is used to ensure all ui-view are configured with the proper ViewConfig.

    Note: the ui-view component uses the ViewConfig to determine what view should be loaded inside the ui-view, and what the view's state context is.

    Note: There is no corresponding deregisterUIView. A ui-view should hang on to the return value of registerUIView and invoke it to deregister itself.

    Parameters

    Returns (Anonymous function)

    :

    a de-registration function used when the view is destroyed.


  • sync(): void
  • Given a ui-view and a ViewConfig, determines if they "match".

    A ui-view has a fully qualified name (fqn) and a context object. The fqn is built from its overall location in the DOM, describing its nesting relationship to any parent ui-view tags it is nested inside of.

    A ViewConfig has a target ui-view name and a context anchor. The ui-view name can be a simple name, or can be a segmented ui-view path, describing a portion of a ui-view fqn.

    In order for a ui-view to match ViewConfig, ui-view's $type must match the ViewConfig's $type

    If the ViewConfig's target ui-view name is a simple name (no dots), then a ui-view matches if:

    • the ui-view's name matches the ViewConfig's target name
    • the ui-view's context matches the ViewConfig's anchor

    If the ViewConfig's target ui-view name is a segmented name (with dots), then a ui-view matches if:

    • There exists a parent ui-view where:
      • the parent ui-view's name matches the first segment (index 0) of the ViewConfig's target name
      • the parent ui-view's context matches the ViewConfig's anchor
    • And the remaining segments (index 1..n) of the ViewConfig's target name match the tail of the ui-view's fqn

    Example:

    DOM:

    uiViews: [ { fqn: "$default", creationContext: { name: "" } }, { fqn: "$default.foo", creationContext: { name: "A" } }, { fqn: "$default.foo.$default", creationContext: { name: "A.B" } } { fqn: "$default.foo.$default.bar", creationContext: { name: "A.B.C" } } ]

    These four view configs all match the ui-view with the fqn: "$default.foo.$default.bar":

    • ViewConfig1: { uiViewName: "bar", uiViewContextAnchor: "A.B.C" }
    • ViewConfig2: { uiViewName: "$default.bar", uiViewContextAnchor: "A.B" }
    • ViewConfig3: { uiViewName: "foo.$default.bar", uiViewContextAnchor: "A" }
    • ViewConfig4: { uiViewName: "$default.foo.$default.bar", uiViewContextAnchor: "" }

    Using ViewConfig3 as an example, it matches the ui-view with fqn "$default.foo.$default.bar" because:

    • The ViewConfig's segmented target name is: [ "foo", "$default", "bar" ]
    • There exists a parent ui-view (which has fqn: "$default.foo") where:
      • the parent ui-view's name "foo" matches the first segment "foo" of the ViewConfig's target name
      • the parent ui-view's context "A" matches the ViewConfig's anchor context "A"
    • And the remaining segments [ "$default", "bar" ].join("."_ of the ViewConfig's target name match the tail of the ui-view's fqn "default.bar"

    Parameters

    Returns (Anonymous function)


  • normalizeUIViewTarget(context: ViewContext, rawViewName?: string): object
  • Normalizes a view's name from a state.views configuration block.

Object literals

_pluginapi: object
_rootViewContext: any = this._rootViewContext.bind(this)
_viewConfigFactory: any = this._viewConfigFactory.bind(this)

Generated using TypeDoc