138 lines
5.9 KiB
JavaScript
138 lines
5.9 KiB
JavaScript
/** @publicapi @module ng1 */ /** */
|
|
import { val, isObject, createProxyFunctions, } from '@uirouter/core';
|
|
/**
|
|
* 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.
|
|
*/
|
|
var StateProvider = /** @class */ (function () {
|
|
function StateProvider(stateRegistry, stateService) {
|
|
this.stateRegistry = stateRegistry;
|
|
this.stateService = stateService;
|
|
createProxyFunctions(val(StateProvider.prototype), this, val(this));
|
|
}
|
|
/**
|
|
* 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 ui-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 {@link 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:
|
|
* ```js
|
|
* $stateProvider.decorator('views', function (state, parent) {
|
|
* let result = {},
|
|
* views = parent(state);
|
|
*
|
|
* angular.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' }
|
|
* }
|
|
* });
|
|
* ```
|
|
*
|
|
*
|
|
* ```js
|
|
* // Auto-populates list and item views with /partials/home/contact/list.html,
|
|
* // and /partials/home/contact/item.html, respectively.
|
|
* $state.go('home');
|
|
* ```
|
|
*
|
|
* @param {string} name The name of the builder function to decorate.
|
|
* @param {object} func 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.
|
|
*
|
|
* @return {object} $stateProvider - $stateProvider instance
|
|
*/
|
|
StateProvider.prototype.decorator = function (name, func) {
|
|
return this.stateRegistry.decorator(name, func) || this;
|
|
};
|
|
StateProvider.prototype.state = function (name, definition) {
|
|
if (isObject(name)) {
|
|
definition = name;
|
|
}
|
|
else {
|
|
definition.name = name;
|
|
}
|
|
this.stateRegistry.register(definition);
|
|
return this;
|
|
};
|
|
/**
|
|
* Registers an invalid state handler
|
|
*
|
|
* This is a passthrough to [[StateService.onInvalid]] for ng1.
|
|
*/
|
|
StateProvider.prototype.onInvalid = function (callback) {
|
|
return this.stateService.onInvalid(callback);
|
|
};
|
|
return StateProvider;
|
|
}());
|
|
export { StateProvider };
|
|
//# sourceMappingURL=stateProvider.js.map
|