Skip to content

Commit 558d0df

Browse files
committed
docs(): wip docs for ui.router.state
1 parent 3f06e37 commit 558d0df

File tree

1 file changed

+112
-3
lines changed

1 file changed

+112
-3
lines changed

src/state.js

+112-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
/**
2+
* @ngdoc object
3+
* @name ui.router.state.$stateProvider
4+
*
5+
* @requires ui.router.router.$urlRouterProvider
6+
* @requires ui.router.util.$urlMatcherFactoryProvider
7+
* @requires $locationProvider
8+
*
9+
* @description
10+
* The new `$stateProvider` works similar to Angular's v1 router, but it focuses purely
11+
* on state.
12+
*
13+
* A state corresponds to a "place" in the application in terms of the overall UI and
14+
* navigation. A state describes (via the controller / template / view properties) what
15+
* the UI looks like and does at that place.
16+
*
17+
* States often have things in common, and the primary way of factoring out these
18+
* commonalities in this model is via the state hierarchy, i.e. parent/child states aka
19+
* nested states.
20+
*
21+
* The `$stateProvider` provides interfaces to declare these states for your app.
22+
*/
123
$StateProvider.$inject = ['$urlRouterProvider', '$urlMatcherFactoryProvider', '$locationProvider'];
224
function $StateProvider( $urlRouterProvider, $urlMatcherFactory, $locationProvider) {
325

@@ -207,9 +229,96 @@ function $StateProvider( $urlRouterProvider, $urlMatcherFactory, $
207229
root.navigable = null;
208230

209231

210-
// .decorator()
211-
// .decorator(name)
212-
// .decorator(name, function)
232+
/**
233+
* @ngdoc function
234+
* @name ui.router.state.$stateProvider#decorator
235+
* @methodOf ui.router.state.$stateProvider
236+
*
237+
* @description
238+
* Allows you to extend (carefully) or override (at your own peril) the
239+
* `stateBuilder` object used internally by `$stateProvider`. This can be used
240+
* to add custom functionality to ui-router, for example inferring templateUrl
241+
* based on the state name.
242+
*
243+
* When passing only a name, it returns the current (original or decorated) builder
244+
* function that matches `name`.
245+
*
246+
* The builder functions that can be decorated are listed below. Though not all
247+
* necessarily have a good use case for decoration, that is up to you to decide.
248+
*
249+
* In addition, users can attach custom decorators, which will generate new
250+
* properties within the state's internal definition. There is currently no clear
251+
* use-case for this beyond accessing internal states (i.e. $state.$current),
252+
* however, expect this to become increasingly relevant as we introduce additional
253+
* meta-programming features.
254+
*
255+
* **Warning**: Decorators should not be interdependent because the order of
256+
* execution of the builder functions in nondeterministic. Builder functions
257+
* should only be dependent on the state definition object and super function.
258+
*
259+
*
260+
* Existing builder functions and current return values:
261+
*
262+
* - parent - `{object}` - returns the parent state object.
263+
* - data - `{object}` - returns state data, including any inherited data that is not
264+
* overridden by own values (if any).
265+
* - url - `{object}` - returns a UrlMatcher or null.
266+
* - navigable - returns closest ancestor state that has a URL (aka is
267+
* navigable).
268+
* - params - `{object}` - returns an array of state params that are ensured to
269+
* be a super-set of parent's params.
270+
* - views - `{object}` - returns a views object where each key is an absolute view
271+
* name (i.e. "viewName@stateName") and each value is the config object
272+
* (template, controller) for the view. Even when you don't use the views object
273+
* explicitly on a state config, one is still created for you internally.
274+
* So by decorating this builder function you have access to decorating template
275+
* and controller properties.
276+
* - ownParams - `{object}` - returns an array of params that belong to the state,
277+
* not including any params defined by ancestor states.
278+
* - path - `{string}` - returns the full path from the root down to this state.
279+
* Needed for state activation.
280+
* - includes - `{object}` - returns an object that includes every state that
281+
* would pass a '$state.includes()' test.
282+
*
283+
* @example
284+
* <pre>
285+
* // Override the internal 'views' builder with a function that takes the state
286+
* // definition, and a reference to the internal function being overridden:
287+
* $stateProvider.decorator('views', function ($state, parent) {
288+
* var result = {},
289+
* views = parent(state);
290+
*
291+
* angular.forEach(view, function (config, name) {
292+
* var autoName = (state.name + '.' + name).replace('.', '/');
293+
* config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html';
294+
* result[name] = config;
295+
* });
296+
* return result;
297+
* });
298+
*
299+
* $stateProvider.state('home', {
300+
* views: {
301+
* 'contact.list': { controller: 'ListController' },
302+
* 'contact.item': { controller: 'ItemController' }
303+
* }
304+
* });
305+
*
306+
* // ...
307+
*
308+
* $state.go('home');
309+
* // Auto-populates list and item views with /partials/home/contact/list.html,
310+
* // and /partials/home/contact/item.html, respectively.
311+
* </pre>
312+
*
313+
* @param {string} name The name of the builder function to decorate.
314+
* @param {object} func A function that is responsible for decorating the original
315+
* builder function. The function receives two parameters:
316+
*
317+
* - `{object}` - state - The state config object.
318+
* - `{object}` - super - The original builder function.
319+
*
320+
* @return {object} $stateProvider - $stateProvider instance
321+
*/
213322
this.decorator = decorator;
214323
function decorator(name, func) {
215324
/*jshint validthis: true */

0 commit comments

Comments
 (0)