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

- 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]

- Defined in router/view/view.js:21
- Defined in router/view/view.js:248

#####
Index

### Constructors

constructor

### Properties

$get
_listeners
_ngViews
_pluginapi
_rootContext
_viewConfigFactories
_viewConfigs

### Methods

_rootViewContext
_viewConfigFactory
activateViewConfig
active
available
createViewConfig
deactivateViewConfig
registerUIView
sync
matches

##
Constructors

### constructor

- new ViewService(): ViewService

- #### Returns ViewService

  - Defined in router/view/view.js:22

##
Properties

### $get

$get: (() => ViewService)[] = ...

- Defined in router/view/view.js:45

### _listeners

_listeners: any[]

- Defined in router/view/view.js:26

### _ngViews

_ngViews: any[]

- Defined in router/view/view.js:23

### _pluginapi

_pluginapi: {
_activeViewConfigs: (() => any[]);
_onSync: ((listener: any) => (() => any));
_registeredUIView: ((id: any) => undefined);
_registeredUIViews: (() => any[]);
_rootViewContext: any;
_viewConfigFactory: any;
}

- Defined in router/view/view.js:27

### _rootContext

_rootContext: any

- Defined in router/view/view.js:48

### _viewConfigFactories

_viewConfigFactories: {}

- Defined in router/view/view.js:25

### _viewConfigs

_viewConfigs: any[]

- Defined in router/view/view.js:24

##
Methods

### _rootViewContext

- _rootViewContext(context): any

- #### Parameters

  - context: any

  #### Returns any

  - Defined in router/view/view.js:47

### _viewConfigFactory

- _viewConfigFactory(viewType, factory): void

- #### Parameters

  - viewType: any
  - factory: any

  #### Returns void

  - Defined in router/view/view.js:51

### activateViewConfig

- activateViewConfig(viewConfig): void

- #### Parameters

  - viewConfig: any

  #### Returns void

  - Defined in router/view/view.js:75

### active

- active(): any[]

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

  #### Returns any[]

  Returns an array of fully-qualified view names.

  - Defined in router/view/view.js:187

### available

- available(): any[]

- 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 router/view/view.js:179

### createViewConfig

- createViewConfig(path, decl): any[]

- #### Parameters

  - path: any
  - decl: any

  #### Returns any[]

  - Defined in router/view/view.js:54

### deactivateViewConfig

- deactivateViewConfig(viewConfig): void

- 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: any

    The ViewConfig view to deregister.

  #### Returns void

  - Defined in router/view/view.js:71

### registerUIView

- registerUIView(ngView): (() => void)

- 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

  - ngView: any

    The metadata for a UIView

  #### Returns (() => void)

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

  - - (): void

    - #### Returns void

  - Defined in router/view/view.js:152

### sync

- sync(): void

- #### Returns void

  - Defined in router/view/view.js:79

### `Static` matches

- matches(ngViewsByFqn, ngView): ((viewConfig: any) => boolean)
- `Internal`

  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:

  ngViews: [ { 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: { ngViewName: "bar", ngViewContextAnchor: "A.B.C" }
  - ViewConfig2: { ngViewName: "$default.bar", ngViewContextAnchor: "A.B" }
  - ViewConfig3: { ngViewName: "foo.$default.bar", ngViewContextAnchor: "A" }
  - ViewConfig4: { ngViewName: "$default.foo.$default.bar", ngViewContextAnchor: "" }

  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

  - ngViewsByFqn: any
  - ngView: any

  #### Returns ((viewConfig: any) => boolean)

  - - (viewConfig): boolean

    - #### Parameters

      - viewConfig: any

      #### Returns boolean

  - Defined in router/view/view.js:248