stateProvider.d.ts 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. /** @module ng1 */ /** for typedoc */
  2. import { BuilderFunction, StateRegistry, StateService, OnInvalidCallback } from "@uirouter/core";
  3. import { Ng1StateDeclaration } from "./interface";
  4. /**
  5. * The Angular 1 `StateProvider`
  6. *
  7. * The `$stateProvider` works similar to Angular's v1 router, but it focuses purely
  8. * on state.
  9. *
  10. * A state corresponds to a "place" in the application in terms of the overall UI and
  11. * navigation. A state describes (via the controller / template / view properties) what
  12. * the UI looks like and does at that place.
  13. *
  14. * States often have things in common, and the primary way of factoring out these
  15. * commonalities in this model is via the state hierarchy, i.e. parent/child states aka
  16. * nested states.
  17. *
  18. * The `$stateProvider` provides interfaces to declare these states for your app.
  19. */
  20. export declare class StateProvider {
  21. private stateRegistry;
  22. private stateService;
  23. constructor(stateRegistry: StateRegistry, stateService: StateService);
  24. /**
  25. * Decorates states when they are registered
  26. *
  27. * Allows you to extend (carefully) or override (at your own peril) the
  28. * `stateBuilder` object used internally by [[StateRegistry]].
  29. * This can be used to add custom functionality to ui-router,
  30. * for example inferring templateUrl based on the state name.
  31. *
  32. * When passing only a name, it returns the current (original or decorated) builder
  33. * function that matches `name`.
  34. *
  35. * The builder functions that can be decorated are listed below. Though not all
  36. * necessarily have a good use case for decoration, that is up to you to decide.
  37. *
  38. * In addition, users can attach custom decorators, which will generate new
  39. * properties within the state's internal definition. There is currently no clear
  40. * use-case for this beyond accessing internal states (i.e. $state.$current),
  41. * however, expect this to become increasingly relevant as we introduce additional
  42. * meta-programming features.
  43. *
  44. * **Warning**: Decorators should not be interdependent because the order of
  45. * execution of the builder functions in non-deterministic. Builder functions
  46. * should only be dependent on the state definition object and super function.
  47. *
  48. *
  49. * Existing builder functions and current return values:
  50. *
  51. * - **parent** `{object}` - returns the parent state object.
  52. * - **data** `{object}` - returns state data, including any inherited data that is not
  53. * overridden by own values (if any).
  54. * - **url** `{object}` - returns a {@link ui.router.util.type:UrlMatcher UrlMatcher}
  55. * or `null`.
  56. * - **navigable** `{object}` - returns closest ancestor state that has a URL (aka is
  57. * navigable).
  58. * - **params** `{object}` - returns an array of state params that are ensured to
  59. * be a super-set of parent's params.
  60. * - **views** `{object}` - returns a views object where each key is an absolute view
  61. * name (i.e. "viewName@stateName") and each value is the config object
  62. * (template, controller) for the view. Even when you don't use the views object
  63. * explicitly on a state config, one is still created for you internally.
  64. * So by decorating this builder function you have access to decorating template
  65. * and controller properties.
  66. * - **ownParams** `{object}` - returns an array of params that belong to the state,
  67. * not including any params defined by ancestor states.
  68. * - **path** `{string}` - returns the full path from the root down to this state.
  69. * Needed for state activation.
  70. * - **includes** `{object}` - returns an object that includes every state that
  71. * would pass a `$state.includes()` test.
  72. *
  73. * #### Example:
  74. * Override the internal 'views' builder with a function that takes the state
  75. * definition, and a reference to the internal function being overridden:
  76. * ```js
  77. * $stateProvider.decorator('views', function (state, parent) {
  78. * let result = {},
  79. * views = parent(state);
  80. *
  81. * angular.forEach(views, function (config, name) {
  82. * let autoName = (state.name + '.' + name).replace('.', '/');
  83. * config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html';
  84. * result[name] = config;
  85. * });
  86. * return result;
  87. * });
  88. *
  89. * $stateProvider.state('home', {
  90. * views: {
  91. * 'contact.list': { controller: 'ListController' },
  92. * 'contact.item': { controller: 'ItemController' }
  93. * }
  94. * });
  95. * ```
  96. *
  97. *
  98. * ```js
  99. * // Auto-populates list and item views with /partials/home/contact/list.html,
  100. * // and /partials/home/contact/item.html, respectively.
  101. * $state.go('home');
  102. * ```
  103. *
  104. * @param {string} name The name of the builder function to decorate.
  105. * @param {object} func A function that is responsible for decorating the original
  106. * builder function. The function receives two parameters:
  107. *
  108. * - `{object}` - state - The state config object.
  109. * - `{object}` - super - The original builder function.
  110. *
  111. * @return {object} $stateProvider - $stateProvider instance
  112. */
  113. decorator(name: string, func: BuilderFunction): Function | this | BuilderFunction[];
  114. /**
  115. * Registers a state
  116. *
  117. * ### This is a passthrough to [[StateRegistry.register]].
  118. *
  119. * Registers a state configuration under a given state name.
  120. * The stateConfig object has the following acceptable properties.
  121. *
  122. * <a id='template'></a>
  123. *
  124. * - **`template`** - {string|function=} - html template as a string or a function that returns
  125. * an html template as a string which should be used by the uiView directives. This property
  126. * takes precedence over templateUrl.
  127. *
  128. * If `template` is a function, it will be called with the following parameters:
  129. *
  130. * - {array.&lt;object&gt;} - state parameters extracted from the current $location.path() by
  131. * applying the current state
  132. *
  133. * <a id='templateUrl'></a>
  134. *
  135. * - **`templateUrl`** - {string|function=} - path or function that returns a path to an html
  136. * template that should be used by uiView.
  137. *
  138. * If `templateUrl` is a function, it will be called with the following parameters:
  139. *
  140. * - {array.&lt;object&gt;} - state parameters extracted from the current $location.path() by
  141. * applying the current state
  142. *
  143. * <a id='templateProvider'></a>
  144. *
  145. * - **`templateProvider`** - {function=} - Provider function that returns HTML content
  146. * string.
  147. *
  148. * <a id='controller'></a>
  149. *
  150. * - **`controller`** - {string|function=} - Controller fn that should be associated with newly
  151. * related scope or the name of a registered controller if passed as a string.
  152. *
  153. * <a id='controllerProvider'></a>
  154. *
  155. * - **`controllerProvider`** - {function=} - Injectable provider function that returns
  156. * the actual controller or string.
  157. *
  158. * <a id='controllerAs'></a>
  159. *
  160. * - **`controllerAs`** – {string=} – A controller alias name. If present the controller will be
  161. * published to scope under the controllerAs name.
  162. *
  163. * <a id='resolve'></a>
  164. *
  165. * - **`resolve`** - {object.&lt;string, function&gt;=} - An optional map of dependencies which
  166. * should be injected into the controller. If any of these dependencies are promises,
  167. * the router will wait for them all to be resolved or one to be rejected before the
  168. * controller is instantiated. If all the promises are resolved successfully, the values
  169. * of the resolved promises are injected and $stateChangeSuccess event is fired. If any
  170. * of the promises are rejected the $stateChangeError event is fired. The map object is:
  171. *
  172. * - key - {string}: name of dependency to be injected into controller
  173. * - factory - {string|function}: If string then it is alias for service. Otherwise if function,
  174. * it is injected and return value it treated as dependency. If result is a promise, it is
  175. * resolved before its value is injected into controller.
  176. *
  177. * <a id='url'></a>
  178. *
  179. * - **`url`** - {string=} - A url with optional parameters. When a state is navigated or
  180. * transitioned to, the `$stateParams` service will be populated with any
  181. * parameters that were passed.
  182. *
  183. * <a id='params'></a>
  184. *
  185. * - **`params`** - {object=} - An array of parameter names or regular expressions. Only
  186. * use this within a state if you are not using url. Otherwise you can specify your
  187. * parameters within the url. When a state is navigated or transitioned to, the
  188. * $stateParams service will be populated with any parameters that were passed.
  189. *
  190. * <a id='views'></a>
  191. *
  192. * - **`views`** - {object=} - Use the views property to set up multiple views or to target views
  193. * manually/explicitly.
  194. *
  195. * <a id='abstract'></a>
  196. *
  197. * - **`abstract`** - {boolean=} - An abstract state will never be directly activated,
  198. * but can provide inherited properties to its common children states.
  199. *
  200. * <a id='onEnter'></a>
  201. *
  202. * - **`onEnter`** - {object=} - Callback function for when a state is entered. Good way
  203. * to trigger an action or dispatch an event, such as opening a dialog.
  204. * If minifying your scripts, make sure to use the `['injection1', 'injection2', function(injection1, injection2){}]` syntax.
  205. *
  206. * <a id='onExit'></a>
  207. *
  208. * - **`onExit`** - {object=} - Callback function for when a state is exited. Good way to
  209. * trigger an action or dispatch an event, such as opening a dialog.
  210. * If minifying your scripts, make sure to use the `['injection1', 'injection2', function(injection1, injection2){}]` syntax.
  211. *
  212. * <a id='reloadOnSearch'></a>
  213. *
  214. * - **`reloadOnSearch = true`** - {boolean=} - If `false`, will not retrigger the same state
  215. * just because a search/query parameter has changed (via $location.search() or $location.hash()).
  216. * Useful for when you'd like to modify $location.search() without triggering a reload.
  217. *
  218. * <a id='data'></a>
  219. *
  220. * - **`data`** - {object=} - Arbitrary data object, useful for custom configuration.
  221. *
  222. * #### Example:
  223. * Some state name examples
  224. * ```js
  225. * // stateName can be a single top-level name (must be unique).
  226. * $stateProvider.state("home", {});
  227. *
  228. * // Or it can be a nested state name. This state is a child of the
  229. * // above "home" state.
  230. * $stateProvider.state("home.newest", {});
  231. *
  232. * // Nest states as deeply as needed.
  233. * $stateProvider.state("home.newest.abc.xyz.inception", {});
  234. *
  235. * // state() returns $stateProvider, so you can chain state declarations.
  236. * $stateProvider
  237. * .state("home", {})
  238. * .state("about", {})
  239. * .state("contacts", {});
  240. * ```
  241. *
  242. * @param {string} name A unique state name, e.g. "home", "about", "contacts".
  243. * To create a parent/child state use a dot, e.g. "about.sales", "home.newest".
  244. * @param {object} definition State configuration object.
  245. */
  246. state(name: string, definition: Ng1StateDeclaration): StateProvider;
  247. state(definition: Ng1StateDeclaration): StateProvider;
  248. /**
  249. * Registers an invalid state handler
  250. *
  251. * This is a passthrough to [[StateService.onInvalid]] for ng1.
  252. */
  253. onInvalid(callback: OnInvalidCallback): Function;
  254. }