|
| 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 | + */ |
1 | 23 | $StateProvider.$inject = ['$urlRouterProvider', '$urlMatcherFactoryProvider', '$locationProvider'];
|
2 | 24 | function $StateProvider( $urlRouterProvider, $urlMatcherFactory, $locationProvider) {
|
3 | 25 |
|
@@ -207,9 +229,96 @@ function $StateProvider( $urlRouterProvider, $urlMatcherFactory, $
|
207 | 229 | root.navigable = null;
|
208 | 230 |
|
209 | 231 |
|
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 | + */ |
213 | 322 | this.decorator = decorator;
|
214 | 323 | function decorator(name, func) {
|
215 | 324 | /*jshint validthis: true */
|
|
0 commit comments