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).

- After a successful Transition, the views from the newly entered states are activated via activateViewConfig. The views from exited states are deactivated via deactivateViewConfig. (See: the registerActivateViews Transition Hook)

- As `ui-view` components pop in and out of existence, they register themselves using registerUIView.

- When the sync function is called, the registered `ui-view`(s) (ActiveUIView) are configured with the matching ViewConfig(s)

### Hierarchy

- ViewService

## Index

### Constructors

- constructor

### Properties

- _listeners
- _rootContext
- _uiViews
- _viewConfigFactories
- _viewConfigs

### Methods

- _rootViewContext
- _viewConfigFactory
- activateViewConfig
- active
- available
- createViewConfig
- deactivateViewConfig
- registerUIView
- sync
- matches
- normalizeUIViewTarget

### Object literals

- _pluginapi

## Constructors

- new ViewService(): ViewService

- #### Returns ViewService

  - Defined in view/view.ts:190

## Properties

_listeners: ViewSyncListener[] = []

- Defined in view/view.ts:54

_rootContext: ViewContext

- Defined in view/view.ts:52

_uiViews: ActiveUIView[] = []

- Defined in view/view.ts:50

_viewConfigFactories: object

#### Type declaration

- ##### [key: string]: ViewConfigFactory

- Defined in view/view.ts:53

_viewConfigs: ViewConfig[] = []

- Defined in view/view.ts:51

## Methods

- _rootViewContext(context?: ViewContext): ViewContext

- #### Parameters

  - ##### context: Optional ViewContext

  #### Returns ViewContext

  - Defined in view/view.ts:194

- _viewConfigFactory(viewType: string, factory: ViewConfigFactory): void

- #### Parameters

  - ##### viewType string

  - ##### factory ViewConfigFactory

  #### Returns void

  - Defined in view/view.ts:198

- activateViewConfig(viewConfig: ViewConfig): void

- #### Parameters

  - ##### viewConfig ViewConfig

  #### Returns void

  - Defined in view/view.ts:222

- active(): any[]

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

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

  #### Returns any[]

  :

  Returns an array of fully-qualified view names.

  - Defined in view/view.ts:333

- available(): 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 any[]

  :

  Returns an array of fully-qualified view names.

  - Defined in view/view.ts:324

- createViewConfig(path: PathNode[], decl: _ViewDeclaration): ViewConfig[]

- #### Parameters

  - ##### path PathNode[]

  - ##### decl _ViewDeclaration

  #### Returns ViewConfig[]

  - Defined in view/view.ts:202

- 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

  - Defined in view/view.ts:217

- 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

  - ##### uiView ActiveUIView

    :

    The metadata for a UIView

  #### Returns (Anonymous function)

  :

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

  - Defined in view/view.ts:298

- sync(): void

- #### Returns void

  - Defined in view/view.ts:228

- matches(uiViewsByFqn: TypedMap<ActiveUIView>, uiView: ActiveUIView): (Anonymous function)

- Given a ui-view and a ViewConfig, determines if they "match".

- 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

  - ##### uiViewsByFqn TypedMap<ActiveUIView>

  - ##### uiView ActiveUIView

  #### Returns (Anonymous function)

  - Defined in view/view.ts:124

- normalizeUIViewTarget(context: ViewContext, rawViewName?: string): object

- Normalizes a view's name from a state.views configuration block.

- Normalizes a view's name from a state.views configuration block.

  This should be used by a framework implementation to calculate the values for _ViewDeclaration.$uiViewName and _ViewDeclaration.$uiViewContextAnchor.

  #### Parameters

  - ##### context ViewContext

    :

    the context object (state declaration) that the view belongs to

  - ##### rawViewName: Default value string = ""

    :

    the name of the view, as declared in the StateDeclaration.views

  #### Returns object

  :

  the normalized uiViewName and uiViewContextAnchor that the view targets

  - ##### uiViewContextAnchor: string

  - ##### uiViewName: string

  - Defined in view/view.ts:157

## Object literals

_pluginapi: object

- Defined in view/view.ts:56

_rootViewContext: any = this._rootViewContext.bind(this)

- Defined in view/view.ts:57

_viewConfigFactory: any = this._viewConfigFactory.bind(this)

- Defined in view/view.ts:58

- _activeViewConfigs(): ViewConfig[]

- #### Returns ViewConfig[]

  - Defined in view/view.ts:60

- _onSync(listener: ViewSyncListener): (Anonymous function)

- #### Parameters

  - ##### listener ViewSyncListener

  #### Returns (Anonymous function)

  - Defined in view/view.ts:61

- _registeredUIViews(): ActiveUIView[]

- #### Returns ActiveUIView[]

  - Defined in view/view.ts:59

Generated using TypeDoc