UNPKG

25.1 kBSource Map (JSON)View Raw
1{
2 "version": 3,
3 "file": "interface.js",
4 "sourceRoot": "",
5 "sources": [
6 "@uirouter/angularjs/interface.ts"
7 ],
8 "names": [],
9 "mappings": "",
10 "sourcesContent": [
11 "/** @publicapi @module ng1 */ /** */\nimport { StateDeclaration, _ViewDeclaration, IInjectable, Transition, HookResult, StateRegistry } from '@uirouter/core';\n\n/**\n * The signature for Angular 1 State Transition Hooks.\n *\n * State hooks are registered as onEnter/onRetain/onExit in state declarations.\n * State hooks can additionally be injected with $transition$ and $state$ for\n * the current [[Transition]] and [[StateObject]] in the transition.\n *\n * Transition State Hooks are callback functions that hook into the lifecycle events of specific states during a transition.\n * As a transition runs, it may exit some states, retain (keep) states, and enter states.\n * As each lifecycle event occurs, the hooks which are registered for the event and that state are called (in priority order).\n *\n * #### See also:\n *\n * - [[IHookRegistry.onExit]]\n * - [[IHookRegistry.onRetain]]\n * - [[IHookRegistry.onEnter]]\n *\n * #### Example:\n * ```js\n * onEnter: function() { console.log('Entering'); }\n * ```\n *\n * Not minification-safe\n * ```js\n * onRetain: function($state$) { console.log('Retained ' + $state$.name); }\n * ```\n *\n * Annotated for minification-safety\n * ```js\n * onExit: [ '$transition$', '$state', function($transition$, $state) {\n * // always redirect to 'foo' state when being exited\n * if ($transition$.to().name !== 'foo') {\n * return $state.target('foo');\n * }\n * } ]\n * ```\n *\n * @returns an optional [[HookResult]] which may alter the transition\n */\nexport interface Ng1StateTransitionHook {\n (...injectables: any[]): HookResult;\n}\n\n/**\n * @internalapi\n * an intermediate interface.\n *\n * Used to reset [[StateDeclaration]] typings to `any` so the [[Ng1StateDeclaration]] interface can then narrow them */\nexport interface _Ng1StateDeclaration extends StateDeclaration {\n onExit?: any;\n onRetain?: any;\n onEnter?: any;\n views?: any;\n}\n\n/**\n * The StateDeclaration object is used to define a state or nested state.\n * It should be registered with the [[StateRegistry]].\n *\n * #### Example:\n * ```js\n * // StateDeclaration object\n * var foldersState = {\n * name: 'folders',\n * url: '/folders',\n * resolve: {\n * allfolders: function(FolderService) {\n * return FolderService.list();\n * }\n * },\n * template: \"<ul><li ng-repeat='folder in allfolders'>{{folder.name}}</li></ul>\",\n * controller: function(allfolders, $scope) {\n * $scope.allfolders = allfolders;\n * }\n * }\n * ```\n *\n * Since this interface extends [[Ng1ViewDeclaration]], any view declaration properties can be set directly\n * on the state declaration and they will be applied to the view with the name `$default`. For example:\n *\n * ```js\n * var state = {\n * name: 'foo',\n * url: '/foo',\n * template: '<h1>foo</h1>',\n * controller: 'FooController'\n * }\n * ```\n *\n * is simply syntactic sugar for:\n *\n * ```js\n * var state = {\n * name: 'foo',\n * url: '/foo',\n * views: {\n * $default: {\n * template: '<h1>foo</h1>',\n * controller: 'FooController'\n * }\n * }\n * }\n * ```\n *\n * If a state definition contains a `views:` object, any view properties set directly on the state are ignored.\n * Thus, this is an invalid state defintion:\n *\n * ```js\n * var state = {\n * name: 'foo',\n * url: '/foo',\n * controller: 'FooController', // invalid because views: exists\n * views: {\n * header: {\n * template: '<h1>header</h1>'\n * }\n * }\n * }\n * ```\n */\nexport interface Ng1StateDeclaration extends _Ng1StateDeclaration, Ng1ViewDeclaration {\n /**\n * An optional object which defines multiple named views.\n *\n * Each key is the name of a view, and each value is a [[Ng1ViewDeclaration]].\n * Unnamed views are internally renamed to `$default`.\n *\n * A view's name is used to match an active `<ui-view>` directive in the DOM. When the state\n * is entered, the state's views are activated and matched with active `<ui-view>` directives:\n *\n * - The view's name is processed into a ui-view target:\n * - ui-view address: an address to a ui-view\n * - state anchor: the state to anchor the address to\n *\n * Examples:\n *\n * Targets three named ui-views in the parent state's template\n *\n * #### Example:\n * ```js\n * views: {\n * header: {\n * controller: \"headerCtrl\",\n * templateUrl: \"header.html\"\n * },\n * body: {\n * controller: \"bodyCtrl\",\n * templateUrl: \"body.html\"\n * },\n * footer: \"footerComponent\"\n * }\n * ```\n *\n * #### Example:\n * ```js\n * // Targets named ui-view=\"header\" in the template of the ancestor state 'top'\n * // and the named `ui-view=\"body\" from the parent state's template.\n * views: {\n * 'header@top': {\n * controller: \"msgHeaderCtrl\",\n * templateUrl: \"msgHeader.html\"\n * },\n * 'body': {\n * controller: \"messagesCtrl\",\n * templateUrl: \"messages.html\"\n * }\n * }\n * ```\n *\n * ## View targeting details\n *\n * There are a few styles of view addressing/targeting.\n * The most common is a simple `ui-view` name\n *\n * #### Simple ui-view name\n *\n * Addresses without an `@` are anchored to the parent state.\n *\n * #### Example:\n * ```js\n * // target the `<div ui-view='foo'></div>` created in the parent state's view\n * views: {\n * foo: {...}\n * }\n * ```\n *\n * #### View name anchored to a state\n *\n * You can anchor the `ui-view` name to a specific state by including an `@`\n *\n * #### Example:\n * targets the `<div ui-view='foo'></div>` which was created in a view owned by the state `bar.baz`\n * ```js\n * views: {\n * 'foo@bar.baz': {...}\n * }\n * ```\n *\n * #### Absolute addressing\n *\n * You can address a `ui-view` absolutely, using dotted notation, by prefixing the address with a `!`.\n * Dotted addresses traverse the hierarchy of `ui-view`s active in the DOM:\n *\n * #### Example:\n * absolutely targets the `<div ui-view='nested'></div>`\n * ... which was created in the unnamed/$default root `<ui-view></ui-view>`\n * ```js\n * views: {\n * '!$default.nested': {...}\n * }\n * ```\n *\n * #### Relative addressing\n *\n * Absolute addressing is actually relative addressing, anchored to the unnamed root state (`\"\"`).\n * You can also use relative addressing anchored to *any state*, in order to target a target deeply nested `ui-views`:\n * The `ui-view` is targeted relative to the anchored state by traversing the nested `ui-view` names.\n *\n * #### Example:\n * targets the `<div ui-view='bar'></div>`\n * ... which was created inside the\n * `<div ui-view='foo'></div>`\n * ... which was created inside the parent state's template.\n * ```js\n * views: {\n * 'foo.bar': {...}\n * }\n * ```\n *\n * #### Example:\n * targets the `<div ui-view='bar'></div>`\n * ... which was created in `<div ui-view='foo'></div>`\n * ... which was created in a template from the state `baz.qux`\n * ```js\n * views: {\n * 'foo.bar@baz.qux': {...}\n * }\n * ```\n *\n * #### Example:\n * a view can relatively target a named `ui-view` defined on an ancestor using `^` (meaning \"parent\")\n * ```js\n * views: {\n * 'foo@^': {...}, // foo@(parent state) (same as simply 'foo')\n * 'bar@^.^': {...}, // bar@(grandparent state)\n * 'baz@^.^.^': {...}, // baz@(great-grandparent state)\n * }\n * ```\n *\n * For additional in-depth details about how `ui-view` addressing works, see the internal api [[ViewService.match]].\n *\n * ---\n *\n * ## State template+controller and `views:` incompatiblity\n *\n * If a state has a `views` object, any state-level view properties ([[Ng1ViewDeclaration]]) are ignored. Therefore,\n * if _any view_ for a state is declared in the `views` object, then _all of the state's views_ must be defined in\n * the `views` object. The state declaration must not have any of the following fields:\n * - component\n * - bindings\n * - resolveAs\n * - template\n * - templateUrl\n * - templateProvider\n * - controller\n * - controllerAs\n * - controllerProvider\n */\n views?: { [key: string]: string | Ng1ViewDeclaration };\n\n /**\n * A state hook invoked when a state is being entered.\n *\n * The hook can inject global services.\n * It can also inject `$transition$` or `$state$` (from the current transition).\n *\n * ### Example:\n * ```js\n * $stateProvider.state({\n * name: 'mystate',\n * onEnter: (MyService, $transition$, $state$) => {\n * return MyService.doSomething($state$.name, $transition$.params());\n * }\n * });\n * ```\n *\n * #### Example:`\n * ```js\n * $stateProvider.state({\n * name: 'mystate',\n * onEnter: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) {\n * return MyService.doSomething($state$.name, $transition$.params());\n * } ]\n * });\n * ```\n */\n onEnter?: Ng1StateTransitionHook | IInjectable;\n\n /**\n * A state hook invoked when a state is being exited.\n *\n * The hook can inject global services.\n * It can also inject `$transition$` or `$state$` (from the current transition).\n *\n * ### Example:\n * ```js\n * $stateProvider.state({\n * name: 'mystate',\n * onExit: (MyService, $transition$, $state$) => {\n * return MyService.doSomething($state$.name, $transition$.params());\n * }\n * });\n * ```\n *\n * #### Example:`\n * ```js\n * $stateProvider.state({\n * name: 'mystate',\n * onExit: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) {\n * return MyService.doSomething($state$.name, $transition$.params());\n * } ]\n * });\n * ```\n */\n onExit?: Ng1StateTransitionHook | IInjectable;\n\n /**\n * A state hook invoked when a state is being retained.\n *\n * The hook can inject global services.\n * It can also inject `$transition$` or `$state$` (from the current transition).\n *\n * #### Example:\n * ```js\n * $stateProvider.state({\n * name: 'mystate',\n * onRetain: (MyService, $transition$, $state$) => {\n * return MyService.doSomething($state$.name, $transition$.params());\n * }\n * });\n * ```\n *\n * #### Example:`\n * ```js\n * $stateProvider.state({\n * name: 'mystate',\n * onRetain: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) {\n * return MyService.doSomething($state$.name, $transition$.params());\n * } ]\n * });\n * ```\n */\n onRetain?: Ng1StateTransitionHook | IInjectable;\n\n /**\n * Makes all search/query parameters `dynamic`\n *\n * ### Deprecation warning: use [[ParamDeclaration.dynamic]] instead\n *\n * @deprecated\n */\n reloadOnSearch?: boolean;\n}\n\nexport interface Ng1ViewDeclaration extends _ViewDeclaration {\n /**\n * The name of the component to use for this view.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * The name of an [angular 1.5+ `.component()`](https://docs.angularjs.org/guide/component) (or directive with\n * bindToController and/or scope declaration) which will be used for this view.\n *\n * Resolve data can be provided to the component via the component's `bindings` object (for 1.3+ directives, the\n * `bindToController` is used; for other directives, the `scope` declaration is used). For each binding declared\n * on the component, any resolve with the same name is set on the component's controller instance. The binding\n * is provided to the component as a one-time-binding. In general, components should likewise declare their\n * input bindings as [one-way (\"&lt;\")](https://docs.angularjs.org/api/ng/service/$compile#-scope-).\n *\n * Note: inside a \"views:\" block, a bare string `\"foo\"` is shorthand for `{ component: \"foo\" }`\n *\n * Note: Mapping from resolve names to component inputs may be specified using [[bindings]].\n *\n * #### Example:\n * ```js\n * .state('profile', {\n * // Use the <my-profile></my-profile> component for the Unnamed view\n * component: 'MyProfile',\n * }\n *\n * .state('messages', {\n * // use the <nav-bar></nav-bar> component for the view named 'header'\n * // use the <message-list></message-list> component for the view named 'content'\n * views: {\n * header: { component: 'NavBar' },\n * content: { component: 'MessageList' }\n * }\n * }\n *\n * .state('contacts', {\n * // Inside a \"views:\" block, a bare string \"NavBar\" is shorthand for { component: \"NavBar\" }\n * // use the <nav-bar></nav-bar> component for the view named 'header'\n * // use the <contact-list></contact-list> component for the view named 'content'\n * views: {\n * header: 'NavBar',\n * content: 'ContactList'\n * }\n * }\n * ```\n *\n *\n * Note: When using `component` to define a view, you may _not_ use any of: `template`, `templateUrl`,\n * `templateProvider`, `controller`, `controllerProvider`, `controllerAs`.\n *\n *\n * See also: Todd Motto's angular 1.3 and 1.4 [backport of .component()](https://github.com/toddmotto/angular-component)\n */\n component?: string;\n\n /**\n * An object which maps `resolve`s to [[component]] `bindings`.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * When using a [[component]] declaration (`component: 'myComponent'`), each input binding for the component is supplied\n * data from a resolve of the same name, by default. You may supply data from a different resolve name by mapping it here.\n *\n * Each key in this object is the name of one of the component's input bindings.\n * Each value is the name of the resolve that should be provided to that binding.\n *\n * Any component bindings that are omitted from this map get the default behavior of mapping to a resolve of the\n * same name.\n *\n * #### Example:\n * ```js\n * $stateProvider.state('foo', {\n * resolve: {\n * foo: function(FooService) { return FooService.get(); },\n * bar: function(BarService) { return BarService.get(); }\n * },\n * component: 'Baz',\n * // The component's `baz` binding gets data from the `bar` resolve\n * // The component's `foo` binding gets data from the `foo` resolve (default behavior)\n * bindings: {\n * baz: 'bar'\n * }\n * });\n *\n * app.component('Baz', {\n * templateUrl: 'baz.html',\n * controller: 'BazController',\n * bindings: {\n * foo: '<', // foo binding\n * baz: '<' // baz binding\n * }\n * });\n * ```\n *\n */\n bindings?: { [key: string]: string };\n\n /**\n * Dynamic component provider function.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * This is an injectable provider function which returns the name of the component to use.\n * The provider will invoked during a Transition in which the view's state is entered.\n * The provider is called after the resolve data is fetched.\n *\n * #### Example:\n * ```js\n * componentProvider: function(MyResolveData, $transition$) {\n * if (MyResolveData.foo) {\n * return \"fooComponent\"\n * } else if ($transition$.to().name === 'bar') {\n * return \"barComponent\";\n * }\n * }\n * ```\n */\n componentProvider?: IInjectable;\n\n /**\n * The view's controller function or name\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * The controller function, or the name of a registered controller. The controller function will be used\n * to control the contents of the [[directives.uiView]] directive.\n *\n * If specified as a string, controllerAs can be declared here, i.e., \"FooController as foo\" instead of in\n * a separate [[controllerAs]] property.\n *\n * See: [[Ng1Controller]] for information about component-level router hooks.\n */\n controller?: IInjectable | string;\n\n /**\n * A controller alias name.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * If present, the controller will be published to scope under the `controllerAs` name.\n * See: https://docs.angularjs.org/api/ng/directive/ngController\n */\n controllerAs?: string;\n\n /**\n * Dynamic controller provider function.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * This is an injectable provider function which returns the actual controller function, or the name\n * of a registered controller. The provider will invoked during a Transition in which the view's state is\n * entered. The provider is called after the resolve data is fetched.\n *\n * #### Example:\n * ```js\n * controllerProvider: function(MyResolveData, $transition$) {\n * if (MyResolveData.foo) {\n * return \"FooCtrl\"\n * } else if ($transition$.to().name === 'bar') {\n * return \"BarCtrl\";\n * } else {\n * return function($scope) {\n * $scope.baz = \"Qux\";\n * }\n * }\n * }\n * ```\n */\n controllerProvider?: IInjectable;\n\n /**\n * The scope variable name to use for resolve data.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * When a view is activated, the resolved data for the state which the view belongs to is put on the scope.\n * This property sets the name of the scope variable to use for the resolved data.\n *\n * Defaults to `$resolve`.\n */\n resolveAs?: string;\n\n /**\n * The HTML template for the view.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * HTML template as a string, or a function which returns an html template as a string.\n * This template will be used to render the corresponding [[directives.uiView]] directive.\n *\n * This property takes precedence over templateUrl.\n *\n * If `template` is a function, it will be called with the Transition parameters as the first argument.\n *\n * #### Example:\n * ```js\n * template: \"<h1>inline template definition</h1><div ui-view></div>\"\n * ```\n *\n * #### Example:\n * ```js\n * template: function(params) {\n * return \"<h1>generated template</h1>\";\n * }\n * ```\n */\n template?: Function | string;\n\n /**\n * The URL for the HTML template for the view.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * A path or a function that returns a path to an html template.\n * The template will be fetched and used to render the corresponding [[directives.uiView]] directive.\n *\n * If `templateUrl` is a function, it will be called with the Transition parameters as the first argument.\n *\n * #### Example:\n * ```js\n * templateUrl: \"/templates/home.html\"\n * ```\n *\n * #### Example:\n * ```js\n * templateUrl: function(params) {\n * return myTemplates[params.pageId];\n * }\n * ```\n */\n templateUrl?: string | Function;\n\n /**\n * Injected function which returns the HTML template.\n *\n * A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:\n *\n * Injected function which returns the HTML template.\n * The template will be used to render the corresponding [[directives.uiView]] directive.\n *\n * #### Example:\n * ```js\n * templateProvider: function(MyTemplateService, $transition$) {\n * return MyTemplateService.getTemplate($transition$.params().pageId);\n * }\n * ```\n */\n templateProvider?: IInjectable;\n}\n\n/**\n * The shape of a controller for a view (and/or component), defining the controller callbacks.\n *\n * A view in UI-Router is comprised of either a `component` ([[Ng1ViewDeclaration.component]]) or a combination of a\n * `template` (or `templateProvider`) and a `controller` (or `controllerProvider`).\n *\n * The `controller` object (or the `component`'s controller object) can define component-level controller callbacks,\n * which UI-Router will call at the appropriate times. These callbacks are similar to Transition Hooks\n * ([[IHookRegistry]]), but are only called if the view is currently active.\n *\n * This interface defines the UI-Router component callbacks.\n *\n */\nexport interface Ng1Controller {\n /** @hidden */\n $onInit(): void;\n /**\n * This callback is called when parameter values have changed.\n *\n * This callback can be used to respond to changing parameter values in the current state, or in parent/child states.\n * This callback is especially handy when using dynamic parameters ([[ParamDeclaration.dynamic]])\n *\n * Called when:\n * - The view is still active\n * - A new transition has completed successfully\n * - The state for the view (controller) was not reloaded\n * - At least one parameter value was changed\n *\n * Called with:\n * @param newValues an object containing the changed parameter values\n * @param $transition$ the new Transition which triggered this callback\n *\n * #### Example:\n * ```js\n * angular.module('foo').controller('FancyCtrl', function() {\n * this.uiOnParamsChanged = function(newParams) {\n * console.log(\"new params: \", newParams);\n * }\n * });\n * ```\n */\n uiOnParamsChanged(newValues: any, $transition$: Transition): void;\n\n /**\n * This callback is called when the view's state is about to be exited.\n *\n * This callback is used to inform a view that it is about to be exited, due to a new [[Transition]].\n * The callback can ask for user confirmation, and cancel or alter the new Transition. The callback should\n * return a value, or a promise for a value. If a promise is returned, the new Transition waits until the\n * promise settles.\n *\n *\n * Called when:\n * - The view is still active\n * - A new Transition is about to run\n * - The new Transition will exit the view's state\n *\n * Called with:\n * - The new Transition\n *\n * Relevant return Values:\n * - `false`: The transition is cancelled.\n * - A rejected promise: The transition is cancelled.\n * - [[TargetState]]: The transition is redirected to the new target state.\n * - Anything else: the transition will continue normally (the state and view will be deactivated)\n *\n * #### Example:\n * ```js\n * app.component('myComponent', {\n * template: '<input ng-model=\"$ctrl.data\" type=\"text\">',\n * bindings: { 'data': '<' },\n * controller: function() {\n *\n * this.originalData = angular.copy(this.data);\n *\n * this.uiCanExit = function() {\n * if (!angular.equals(this.data, this.originalData)) {\n * // Note: This could also return a Promise and request async\n * // confirmation using something like ui-bootstrap $modal\n * return window.confirm(\"Data has changed. Exit anyway and lose changes?\");\n * }\n * }\n * }\n * }\n * ```\n *\n * @param transition the new Transition that is about to exit the component's state\n * @return a HookResult, or a promise for a HookResult\n */\n uiCanExit(transition: Transition): HookResult;\n}\n\n/**\n * Manages which template-loading mechanism to use.\n *\n * Defaults to `$templateRequest` on Angular versions starting from 1.3, `$http` otherwise.\n */\nexport interface TemplateFactoryProvider {\n /**\n * Forces $templateFactory to use $http instead of $templateRequest.\n *\n * UI-Router uses `$templateRequest` by default on angular 1.3+.\n * Use this method to choose to use `$http` instead.\n *\n * ---\n *\n * ## Security warning\n *\n * This might cause XSS, as $http doesn't enforce the regular security checks for\n * templates that have been introduced in Angular 1.3.\n *\n * See the $sce documentation, section\n * <a href=\"https://docs.angularjs.org/api/ng/service/$sce#impact-on-loading-templates\">\n * Impact on loading templates</a> for more details about this mechanism.\n *\n * *Note: forcing this to `false` on Angular 1.2.x will crash, because `$templateRequest` is not implemented.*\n *\n * @param useUnsafeHttpService `true` to use `$http` to fetch templates\n */\n useHttpService(useUnsafeHttpService: boolean);\n}\n\ndeclare module '@uirouter/core/lib/state/stateRegistry' {\n interface StateRegistry {\n register(state: Ng1StateDeclaration | { new (): Ng1StateDeclaration });\n }\n}\n"
12 ]
13}
\No newline at end of file