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