# Class StateProvider

The Angular 1 `StateProvider`

The `$stateProvider` works similar to Angular's v1 router, but it focuses purely on state.

A state corresponds to a "place" in the application in terms of the overall UI and navigation. A state describes (via the controller / template / view properties) what the UI looks like and does at that place.

States often have things in common, and the primary way of factoring out these commonalities in this model is via the state hierarchy, i.e. parent/child states aka nested states.

The `$stateProvider` provides interfaces to declare these states for your app.

- Defined in src/router/state-provider.js:23

##### Index

### Constructors

constructor

### Properties

stateRegistry
stateService

### Methods

decorator
onInvalid
state

## Constructors

### constructor

- new StateProvider(stateRegistry: any, stateService: any): StateProvider

  #### Parameters

  - stateRegistry: any
  - stateService: any

  #### Returns StateProvider

  - Defined in src/router/state-provider.js:24

## Properties

### stateRegistry

stateRegistry: any

- Defined in src/router/state-provider.js:25

### stateService

stateService: any

- Defined in src/router/state-provider.js:26

## Methods

### decorator

- decorator(name: string, func: any): any

  Decorates states when they are registered

  Allows you to extend (carefully) or override (at your own peril) the `stateBuilder` object used internally by [[StateRegistry]]. This can be used to add custom functionality to ng-router, for example inferring templateUrl based on the state name.

  When passing only a name, it returns the current (original or decorated) builder function that matches `name`.

  The builder functions that can be decorated are listed below. Though not all necessarily have a good use case for decoration, that is up to you to decide.

  In addition, users can attach custom decorators, which will generate new properties within the state's internal definition. There is currently no clear use-case for this beyond accessing internal states (i.e. $state.$current), however, expect this to become increasingly relevant as we introduce additional meta-programming features.

  Warning: Decorators should not be interdependent because the order of execution of the builder functions in non-deterministic. Builder functions should only be dependent on the state definition object and super function.

  Existing builder functions and current return values:

  - parent `{object}` - returns the parent state object.
  - data `{object}` - returns state data, including any inherited data that is not overridden by own values (if any).
  - url `{object}` - returns a ui.router.util.type:UrlMatcher UrlMatcher or `null`.
  - navigable `{object}` - returns closest ancestor state that has a URL (aka is navigable).
  - params `{object}` - returns an array of state params that are ensured to be a super-set of parent's params.
  - views `{object}` - returns a views object where each key is an absolute view name (i.e. "viewName@stateName") and each value is the config object (template, controller) for the view. Even when you don't use the views object explicitly on a state config, one is still created for you internally. So by decorating this builder function you have access to decorating template and controller properties.
  - ownParams `{object}` - returns an array of params that belong to the state, not including any params defined by ancestor states.
  - path `{string}` - returns the full path from the root down to this state. Needed for state activation.
  - includes `{object}` - returns an object that includes every state that would pass a `$state.includes()` test.

  #### Example:

  Override the internal 'views' builder with a function that takes the state definition, and a reference to the internal function being overridden:

      $stateProvider.decorator('views', function (state, parent) {
        let result = {},
            views = parent(state);

        forEach(views, function (config, name) {
          let autoName = (state.name + '.' + name).replace('.', '/');
          config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html';
          result[name] = config;
        });
        return result;
      });

      $stateProvider.state('home', {
        views: {
          'contact.list': { controller: 'ListController' },
          'contact.item': { controller: 'ItemController' }
        }
      });

      // Auto-populates list and item views with /partials/home/contact/list.html,
      // and /partials/home/contact/item.html, respectively.
      $state.go('home');

  #### Parameters

  - name: string

    The name of the builder function to decorate.

  - func: any

    A function that is responsible for decorating the original builder function. The function receives two parameters:

    - `{object}` - state - The state config object.
    - `{object}` - super - The original builder function.

  #### Returns any

  $stateProvider - $stateProvider instance

  - Defined in src/router/state-provider.js:118

### onInvalid

- onInvalid(callback: any): any

  Registers an invalid state handler

  This is a passthrough to [[StateService.onInvalid]] for ng1.

  #### Parameters

  - callback: any

  #### Returns any

  - Defined in src/router/state-provider.js:143

### state

- state(definition: any): StateProvider

  #### Parameters

  - definition: any

  #### Returns StateProvider

  - Defined in src/router/state-provider.js:127