|
|
/** * State-based routing for AngularJS * @version v0.2.13 * @link http://angular-ui.github.com/
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
/* commonjs package manager support (eg componentjs) */ if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){ module.exports = 'ui.router'; }
(function (window, angular, undefined) { /*jshint globalstrict:true*/ /*global angular:false*/ 'use strict';
var isDefined = angular.isDefined, isFunction = angular.isFunction, isString = angular.isString, isObject = angular.isObject, isArray = angular.isArray, forEach = angular.forEach, extend = angular.extend, copy = angular.copy;
function inherit(parent, extra) { return extend(new (extend(function() {}, { prototype: parent }))(), extra); }
function merge(dst) { forEach(arguments, function(obj) { if (obj !== dst) { forEach(obj, function(value, key) { if (!dst.hasOwnProperty(key)) dst[key] = value; }); } }); return dst; }
/** * Finds the common ancestor path between two states. * * @param {Object} first The first state. * @param {Object} second The second state. * @return {Array} Returns an array of state names in descending order, not including the root. */ function ancestors(first, second) { var path = [];
for (var n in first.path) { if (first.path[n] !== second.path[n]) break; path.push(first.path[n]); } return path; }
/** * IE8-safe wrapper for `Object.keys()`. * * @param {Object} object A JavaScript object. * @return {Array} Returns the keys of the object as an array. */ function objectKeys(object) { if (Object.keys) { return Object.keys(object); } var result = [];
angular.forEach(object, function(val, key) { result.push(key); }); return result; }
/** * IE8-safe wrapper for `Array.prototype.indexOf()`. * * @param {Array} array A JavaScript array. * @param {*} value A value to search the array for. * @return {Number} Returns the array index value of `value`, or `-1` if not present. */ function indexOf(array, value) { if (Array.prototype.indexOf) { return array.indexOf(value, Number(arguments[2]) || 0); } var len = array.length >>> 0, from = Number(arguments[2]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from);
if (from < 0) from += len;
for (; from < len; from++) { if (from in array && array[from] === value) return from; } return -1; }
/** * Merges a set of parameters with all parameters inherited between the common parents of the * current state and a given destination state. * * @param {Object} currentParams The value of the current state parameters ($stateParams). * @param {Object} newParams The set of parameters which will be composited with inherited params. * @param {Object} $current Internal definition of object representing the current state. * @param {Object} $to Internal definition of object representing state to transition to. */ function inheritParams(currentParams, newParams, $current, $to) { var parents = ancestors($current, $to), parentParams, inherited = {}, inheritList = [];
for (var i in parents) { if (!parents[i].params) continue; parentParams = objectKeys(parents[i].params); if (!parentParams.length) continue;
for (var j in parentParams) { if (indexOf(inheritList, parentParams[j]) >= 0) continue; inheritList.push(parentParams[j]); inherited[parentParams[j]] = currentParams[parentParams[j]]; } } return extend({}, inherited, newParams); }
/** * Performs a non-strict comparison of the subset of two objects, defined by a list of keys. * * @param {Object} a The first object. * @param {Object} b The second object. * @param {Array} keys The list of keys within each object to compare. If the list is empty or not specified, * it defaults to the list of keys in `a`. * @return {Boolean} Returns `true` if the keys match, otherwise `false`. */ function equalForKeys(a, b, keys) { if (!keys) { keys = []; for (var n in a) keys.push(n); // Used instead of Object.keys() for IE8 compatibility
}
for (var i=0; i<keys.length; i++) { var k = keys[i]; if (a[k] != b[k]) return false; // Not '===', values aren't necessarily normalized
} return true; }
/** * Returns the subset of an object, based on a list of keys. * * @param {Array} keys * @param {Object} values * @return {Boolean} Returns a subset of `values`. */ function filterByKeys(keys, values) { var filtered = {};
forEach(keys, function (name) { filtered[name] = values[name]; }); return filtered; }
// like _.indexBy
// when you know that your index values will be unique, or you want last-one-in to win
function indexBy(array, propName) { var result = {}; forEach(array, function(item) { result[item[propName]] = item; }); return result; }
// extracted from underscore.js
// Return a copy of the object only containing the whitelisted properties.
function pick(obj) { var copy = {}; var keys = Array.prototype.concat.apply(Array.prototype, Array.prototype.slice.call(arguments, 1)); forEach(keys, function(key) { if (key in obj) copy[key] = obj[key]; }); return copy; }
// extracted from underscore.js
// Return a copy of the object omitting the blacklisted properties.
function omit(obj) { var copy = {}; var keys = Array.prototype.concat.apply(Array.prototype, Array.prototype.slice.call(arguments, 1)); for (var key in obj) { if (indexOf(keys, key) == -1) copy[key] = obj[key]; } return copy; }
function pluck(collection, key) { var result = isArray(collection) ? [] : {};
forEach(collection, function(val, i) { result[i] = isFunction(key) ? key(val) : val[key]; }); return result; }
function filter(collection, callback) { var array = isArray(collection); var result = array ? [] : {}; forEach(collection, function(val, i) { if (callback(val, i)) { result[array ? result.length : i] = val; } }); return result; }
function map(collection, callback) { var result = isArray(collection) ? [] : {};
forEach(collection, function(val, i) { result[i] = callback(val, i); }); return result; }
/** * @ngdoc overview * @name ui.router.util * * @description * # ui.router.util sub-module * * This module is a dependency of other sub-modules. Do not include this module as a dependency * in your angular app (use {@link ui.router} module instead). * */ angular.module('ui.router.util', ['ng']);
/** * @ngdoc overview * @name ui.router.router * * @requires ui.router.util * * @description * # ui.router.router sub-module * * This module is a dependency of other sub-modules. Do not include this module as a dependency * in your angular app (use {@link ui.router} module instead). */ angular.module('ui.router.router', ['ui.router.util']);
/** * @ngdoc overview * @name ui.router.state * * @requires ui.router.router * @requires ui.router.util * * @description * # ui.router.state sub-module * * This module is a dependency of the main ui.router module. Do not include this module as a dependency * in your angular app (use {@link ui.router} module instead). * */ angular.module('ui.router.state', ['ui.router.router', 'ui.router.util']);
/** * @ngdoc overview * @name ui.router * * @requires ui.router.state * * @description * # ui.router * * ## The main module for ui.router * There are several sub-modules included with the ui.router module, however only this module is needed * as a dependency within your angular app. The other modules are for organization purposes. * * The modules are: * * ui.router - the main "umbrella" module * * ui.router.router - * * *You'll need to include **only** this module as the dependency within your angular app.* * * <pre> * <!doctype html> * <html ng-app="myApp"> * <head> * <script src="js/angular.js"></script> * <!-- Include the ui-router script --> * <script src="js/angular-ui-router.min.js"></script> * <script> * // ...and add 'ui.router' as a dependency
* var myApp = angular.module('myApp', ['ui.router']); * </script> * </head> * <body> * </body> * </html> * </pre> */ angular.module('ui.router', ['ui.router.state']);
angular.module('ui.router.compat', ['ui.router']);
/** * @ngdoc object * @name ui.router.util.$resolve * * @requires $q * @requires $injector * * @description * Manages resolution of (acyclic) graphs of promises. */ $Resolve.$inject = ['$q', '$injector']; function $Resolve( $q, $injector) { var VISIT_IN_PROGRESS = 1, VISIT_DONE = 2, NOTHING = {}, NO_DEPENDENCIES = [], NO_LOCALS = NOTHING, NO_PARENT = extend($q.when(NOTHING), { $$promises: NOTHING, $$values: NOTHING });
/** * @ngdoc function * @name ui.router.util.$resolve#study * @methodOf ui.router.util.$resolve * * @description * Studies a set of invocables that are likely to be used multiple times. * <pre> * $resolve.study(invocables)(locals, parent, self) * </pre> * is equivalent to * <pre> * $resolve.resolve(invocables, locals, parent, self) * </pre> * but the former is more efficient (in fact `resolve` just calls `study` * internally). * * @param {object} invocables Invocable objects * @return {function} a function to pass in locals, parent and self */ this.study = function (invocables) { if (!isObject(invocables)) throw new Error("'invocables' must be an object"); var invocableKeys = objectKeys(invocables || {}); // Perform a topological sort of invocables to build an ordered plan
var plan = [], cycle = [], visited = {}; function visit(value, key) { if (visited[key] === VISIT_DONE) return; cycle.push(key); if (visited[key] === VISIT_IN_PROGRESS) { cycle.splice(0, indexOf(cycle, key)); throw new Error("Cyclic dependency: " + cycle.join(" -> ")); } visited[key] = VISIT_IN_PROGRESS; if (isString(value)) { plan.push(key, [ function() { return $injector.get(value); }], NO_DEPENDENCIES); } else { var params = $injector.annotate(value); forEach(params, function (param) { if (param !== key && invocables.hasOwnProperty(param)) visit(invocables[param], param); }); plan.push(key, value, params); } cycle.pop(); visited[key] = VISIT_DONE; } forEach(invocables, visit); invocables = cycle = visited = null; // plan is all that's required
function isResolve(value) { return isObject(value) && value.then && value.$$promises; } return function (locals, parent, self) { if (isResolve(locals) && self === undefined) { self = parent; parent = locals; locals = null; } if (!locals) locals = NO_LOCALS; else if (!isObject(locals)) { throw new Error("'locals' must be an object"); } if (!parent) parent = NO_PARENT; else if (!isResolve(parent)) { throw new Error("'parent' must be a promise returned by $resolve.resolve()"); } // To complete the overall resolution, we have to wait for the parent
// promise and for the promise for each invokable in our plan.
var resolution = $q.defer(), result = resolution.promise, promises = result.$$promises = {}, values = extend({}, locals), wait = 1 + plan.length/3, merged = false; function done() { // Merge parent values we haven't got yet and publish our own $$values
if (!--wait) { if (!merged) merge(values, parent.$$values); result.$$values = values; result.$$promises = result.$$promises || true; // keep for isResolve()
delete result.$$inheritedValues; resolution.resolve(values); } } function fail(reason) { result.$$failure = reason; resolution.reject(reason); }
// Short-circuit if parent has already failed
if (isDefined(parent.$$failure)) { fail(parent.$$failure); return result; } if (parent.$$inheritedValues) { merge(values, omit(parent.$$inheritedValues, invocableKeys)); }
// Merge parent values if the parent has already resolved, or merge
// parent promises and wait if the parent resolve is still in progress.
extend(promises, parent.$$promises); if (parent.$$values) { merged = merge(values, omit(parent.$$values, invocableKeys)); result.$$inheritedValues = omit(parent.$$values, invocableKeys); done(); } else { if (parent.$$inheritedValues) { result.$$inheritedValues = omit(parent.$$inheritedValues, invocableKeys); } parent.then(done, fail); } // Process each invocable in the plan, but ignore any where a local of the same name exists.
for (var i=0, ii=plan.length; i<ii; i+=3) { if (locals.hasOwnProperty(plan[i])) done(); else invoke(plan[i], plan[i+1], plan[i+2]); } function invoke(key, invocable, params) { // Create a deferred for this invocation. Failures will propagate to the resolution as well.
var invocation = $q.defer(), waitParams = 0; function onfailure(reason) { invocation.reject(reason); fail(reason); } // Wait for any parameter that we have a promise for (either from parent or from this
// resolve; in that case study() will have made sure it's ordered before us in the plan).
forEach(params, function (dep) { if (promises.hasOwnProperty(dep) && !locals.hasOwnProperty(dep)) { waitParams++; promises[dep].then(function (result) { values[dep] = result; if (!(--waitParams)) proceed(); }, onfailure); } }); if (!waitParams) proceed(); function proceed() { if (isDefined(result.$$failure)) return; try { invocation.resolve($injector.invoke(invocable, self, values)); invocation.promise.then(function (result) { values[key] = result; done(); }, onfailure); } catch (e) { onfailure(e); } } // Publish promise synchronously; invocations further down in the plan may depend on it.
promises[key] = invocation.promise; } return result; }; }; /** * @ngdoc function * @name ui.router.util.$resolve#resolve * @methodOf ui.router.util.$resolve * * @description * Resolves a set of invocables. An invocable is a function to be invoked via * `$injector.invoke()`, and can have an arbitrary number of dependencies. * An invocable can either return a value directly, * or a `$q` promise. If a promise is returned it will be resolved and the * resulting value will be used instead. Dependencies of invocables are resolved * (in this order of precedence) * * - from the specified `locals` * - from another invocable that is part of this `$resolve` call * - from an invocable that is inherited from a `parent` call to `$resolve` * (or recursively * - from any ancestor `$resolve` of that parent). * * The return value of `$resolve` is a promise for an object that contains * (in this order of precedence) * * - any `locals` (if specified) * - the resolved return values of all injectables * - any values inherited from a `parent` call to `$resolve` (if specified) * * The promise will resolve after the `parent` promise (if any) and all promises * returned by injectables have been resolved. If any invocable * (or `$injector.invoke`) throws an exception, or if a promise returned by an * invocable is rejected, the `$resolve` promise is immediately rejected with the * same error. A rejection of a `parent` promise (if specified) will likewise be * propagated immediately. Once the `$resolve` promise has been rejected, no * further invocables will be called. * * Cyclic dependencies between invocables are not permitted and will caues `$resolve` * to throw an error. As a special case, an injectable can depend on a parameter * with the same name as the injectable, which will be fulfilled from the `parent` * injectable of the same name. This allows inherited values to be decorated. * Note that in this case any other injectable in the same `$resolve` with the same * dependency would see the decorated value, not the inherited value. * * Note that missing dependencies -- unlike cyclic dependencies -- will cause an * (asynchronous) rejection of the `$resolve` promise rather than a (synchronous) * exception. * * Invocables are invoked eagerly as soon as all dependencies are available. * This is true even for dependencies inherited from a `parent` call to `$resolve`. * * As a special case, an invocable can be a string, in which case it is taken to * be a service name to be passed to `$injector.get()`. This is supported primarily * for backwards-compatibility with the `resolve` property of `$routeProvider` * routes. * * @param {object} invocables functions to invoke or * `$injector` services to fetch. * @param {object} locals values to make available to the injectables * @param {object} parent a promise returned by another call to `$resolve`. * @param {object} self the `this` for the invoked methods * @return {object} Promise for an object that contains the resolved return value * of all invocables, as well as any inherited and local values. */ this.resolve = function (invocables, locals, parent, self) { return this.study(invocables)(locals, parent, self); }; }
angular.module('ui.router.util').service('$resolve', $Resolve);
/** * @ngdoc object * @name ui.router.util.$templateFactory * * @requires $http * @requires $templateCache * @requires $injector * * @description * Service. Manages loading of templates. */ $TemplateFactory.$inject = ['$http', '$templateCache', '$injector']; function $TemplateFactory( $http, $templateCache, $injector) {
/** * @ngdoc function * @name ui.router.util.$templateFactory#fromConfig * @methodOf ui.router.util.$templateFactory * * @description * Creates a template from a configuration object. * * @param {object} config Configuration object for which to load a template. * The following properties are search in the specified order, and the first one * that is defined is used to create the template: * * @param {string|object} config.template html string template or function to * load via {@link ui.router.util.$templateFactory#fromString fromString}. * @param {string|object} config.templateUrl url to load or a function returning * the url to load via {@link ui.router.util.$templateFactory#fromUrl fromUrl}. * @param {Function} config.templateProvider function to invoke via * {@link ui.router.util.$templateFactory#fromProvider fromProvider}. * @param {object} params Parameters to pass to the template function. * @param {object} locals Locals to pass to `invoke` if the template is loaded * via a `templateProvider`. Defaults to `{ params: params }`. * * @return {string|object} The template html as a string, or a promise for * that string,or `null` if no template is configured. */ this.fromConfig = function (config, params, locals) { return ( isDefined(config.template) ? this.fromString(config.template, params) : isDefined(config.templateUrl) ? this.fromUrl(config.templateUrl, params) : isDefined(config.templateProvider) ? this.fromProvider(config.templateProvider, params, locals) : null ); };
/** * @ngdoc function * @name ui.router.util.$templateFactory#fromString * @methodOf ui.router.util.$templateFactory * * @description * Creates a template from a string or a function returning a string. * * @param {string|object} template html template as a string or function that * returns an html template as a string. * @param {object} params Parameters to pass to the template function. * * @return {string|object} The template html as a string, or a promise for that * string. */ this.fromString = function (template, params) { return isFunction(template) ? template(params) : template; };
/** * @ngdoc function * @name ui.router.util.$templateFactory#fromUrl * @methodOf ui.router.util.$templateFactory * * @description * Loads a template from the a URL via `$http` and `$templateCache`. * * @param {string|Function} url url of the template to load, or a function * that returns a url. * @param {Object} params Parameters to pass to the url function. * @return {string|Promise.<string>} The template html as a string, or a promise * for that string. */ this.fromUrl = function (url, params) { if (isFunction(url)) url = url(params); if (url == null) return null; else return $http .get(url, { cache: $templateCache, headers: { Accept: 'text/html' }}) .then(function(response) { return response.data; }); };
/** * @ngdoc function * @name ui.router.util.$templateFactory#fromProvider * @methodOf ui.router.util.$templateFactory * * @description * Creates a template by invoking an injectable provider function. * * @param {Function} provider Function to invoke via `$injector.invoke` * @param {Object} params Parameters for the template. * @param {Object} locals Locals to pass to `invoke`. Defaults to * `{ params: params }`. * @return {string|Promise.<string>} The template html as a string, or a promise * for that string. */ this.fromProvider = function (provider, params, locals) { return $injector.invoke(provider, null, locals || { params: params }); }; }
angular.module('ui.router.util').service('$templateFactory', $TemplateFactory);
var $$UMFP; // reference to $UrlMatcherFactoryProvider
/** * @ngdoc object * @name ui.router.util.type:UrlMatcher * * @description * Matches URLs against patterns and extracts named parameters from the path or the search * part of the URL. A URL pattern consists of a path pattern, optionally followed by '?' and a list * of search parameters. Multiple search parameter names are separated by '&'. Search parameters * do not influence whether or not a URL is matched, but their values are passed through into * the matched parameters returned by {@link ui.router.util.type:UrlMatcher#methods_exec exec}. * * Path parameter placeholders can be specified using simple colon/catch-all syntax or curly brace * syntax, which optionally allows a regular expression for the parameter to be specified: * * * `':'` name - colon placeholder * * `'*'` name - catch-all placeholder * * `'{' name '}'` - curly placeholder * * `'{' name ':' regexp|type '}'` - curly placeholder with regexp or type name. Should the * regexp itself contain curly braces, they must be in matched pairs or escaped with a backslash. * * Parameter names may contain only word characters (latin letters, digits, and underscore) and * must be unique within the pattern (across both path and search parameters). For colon * placeholders or curly placeholders without an explicit regexp, a path parameter matches any * number of characters other than '/'. For catch-all placeholders the path parameter matches * any number of characters. * * Examples: * * * `'/hello/'` - Matches only if the path is exactly '/hello/'. There is no special treatment for * trailing slashes, and patterns have to match the entire path, not just a prefix. * * `'/user/:id'` - Matches '/user/bob' or '/user/1234!!!' or even '/user/' but not '/user' or * '/user/bob/details'. The second path segment will be captured as the parameter 'id'. * * `'/user/{id}'` - Same as the previous example, but using curly brace syntax. * * `'/user/{id:[^/]*}'` - Same as the previous example. * * `'/user/{id:[0-9a-fA-F]{1,8}}'` - Similar to the previous example, but only matches if the id * parameter consists of 1 to 8 hex digits. * * `'/files/{path:.*}'` - Matches any URL starting with '/files/' and captures the rest of the * path into the parameter 'path'. * * `'/files/*path'` - ditto. * * `'/calendar/{start:date}'` - Matches "/calendar/2014-11-12" (because the pattern defined * in the built-in `date` Type matches `2014-11-12`) and provides a Date object in $stateParams.start * * @param {string} pattern The pattern to compile into a matcher. * @param {Object} config A configuration object hash: * @param {Object=} parentMatcher Used to concatenate the pattern/config onto * an existing UrlMatcher * * * `caseInsensitive` - `true` if URL matching should be case insensitive, otherwise `false`, the default value (for backward compatibility) is `false`. * * `strict` - `false` if matching against a URL with a trailing slash should be treated as equivalent to a URL without a trailing slash, the default value is `true`. * * @property {string} prefix A static prefix of this pattern. The matcher guarantees that any * URL matching this matcher (i.e. any string for which {@link ui.router.util.type:UrlMatcher#methods_exec exec()} returns * non-null) will start with this prefix. * * @property {string} source The pattern that was passed into the constructor * * @property {string} sourcePath The path portion of the source property * * @property {string} sourceSearch The search portion of the source property * * @property {string} regex The constructed regex that will be used to match against the url when * it is time to determine which url will match. * * @returns {Object} New `UrlMatcher` object */ function UrlMatcher(pattern, config, parentMatcher) { config = extend({ params: {} }, isObject(config) ? config : {});
// Find all placeholders and create a compiled pattern, using either classic or curly syntax:
// '*' name
// ':' name
// '{' name '}'
// '{' name ':' regexp '}'
// The regular expression is somewhat complicated due to the need to allow curly braces
// inside the regular expression. The placeholder regexp breaks down as follows:
// ([:*])([\w\[\]]+) - classic placeholder ($1 / $2) (search version has - for snake-case)
// \{([\w\[\]]+)(?:\:( ... ))?\} - curly brace placeholder ($3) with optional regexp/type ... ($4) (search version has - for snake-case
// (?: ... | ... | ... )+ - the regexp consists of any number of atoms, an atom being either
// [^{}\\]+ - anything other than curly braces or backslash
// \\. - a backslash escape
// \{(?:[^{}\\]+|\\.)*\} - a matched set of curly braces containing other atoms
var placeholder = /([:*])([\w\[\]]+)|\{([\w\[\]]+)(?:\:((?:[^{}\\]+|\\.|\{(?:[^{}\\]+|\\.)*\})+))?\}/g, searchPlaceholder = /([:]?)([\w\[\]-]+)|\{([\w\[\]-]+)(?:\:((?:[^{}\\]+|\\.|\{(?:[^{}\\]+|\\.)*\})+))?\}/g, compiled = '^', last = 0, m, segments = this.segments = [], parentParams = parentMatcher ? parentMatcher.params : {}, params = this.params = parentMatcher ? parentMatcher.params.$$new() : new $$UMFP.ParamSet(), paramNames = [];
function addParameter(id, type, config, location) { paramNames.push(id); if (parentParams[id]) return parentParams[id]; if (!/^\w+(-+\w+)*(?:\[\])?$/.test(id)) throw new Error("Invalid parameter name '" + id + "' in pattern '" + pattern + "'"); if (params[id]) throw new Error("Duplicate parameter name '" + id + "' in pattern '" + pattern + "'"); params[id] = new $$UMFP.Param(id, type, config, location); return params[id]; }
function quoteRegExp(string, pattern, squash) { var surroundPattern = ['',''], result = string.replace(/[\\\[\]\^$*+?.()|{}]/g, "\\$&"); if (!pattern) return result; switch(squash) { case false: surroundPattern = ['(', ')']; break; case true: surroundPattern = ['?(', ')?']; break; default: surroundPattern = ['(' + squash + "|", ')?']; break; } return result + surroundPattern[0] + pattern + surroundPattern[1]; }
this.source = pattern;
// Split into static segments separated by path parameter placeholders.
// The number of segments is always 1 more than the number of parameters.
function matchDetails(m, isSearch) { var id, regexp, segment, type, cfg, arrayMode; id = m[2] || m[3]; // IE[78] returns '' for unmatched groups instead of null
cfg = config.params[id]; segment = pattern.substring(last, m.index); regexp = isSearch ? m[4] : m[4] || (m[1] == '*' ? '.*' : null); type = $$UMFP.type(regexp || "string") || inherit($$UMFP.type("string"), { pattern: new RegExp(regexp) }); return { id: id, regexp: regexp, segment: segment, type: type, cfg: cfg }; }
var p, param, segment; while ((m = placeholder.exec(pattern))) { p = matchDetails(m, false); if (p.segment.indexOf('?') >= 0) break; // we're into the search part
param = addParameter(p.id, p.type, p.cfg, "path"); compiled += quoteRegExp(p.segment, param.type.pattern.source, param.squash); segments.push(p.segment); last = placeholder.lastIndex; } segment = pattern.substring(last);
// Find any search parameter names and remove them from the last segment
var i = segment.indexOf('?');
if (i >= 0) { var search = this.sourceSearch = segment.substring(i); segment = segment.substring(0, i); this.sourcePath = pattern.substring(0, last + i);
if (search.length > 0) { last = 0; while ((m = searchPlaceholder.exec(search))) { p = matchDetails(m, true); param = addParameter(p.id, p.type, p.cfg, "search"); last = placeholder.lastIndex; // check if ?&
} } } else { this.sourcePath = pattern; this.sourceSearch = ''; }
compiled += quoteRegExp(segment) + (config.strict === false ? '\/?' : '') + '$'; segments.push(segment);
this.regexp = new RegExp(compiled, config.caseInsensitive ? 'i' : undefined); this.prefix = segments[0]; this.$$paramNames = paramNames; }
/** * @ngdoc function * @name ui.router.util.type:UrlMatcher#concat * @methodOf ui.router.util.type:UrlMatcher * * @description * Returns a new matcher for a pattern constructed by appending the path part and adding the * search parameters of the specified pattern to this pattern. The current pattern is not * modified. This can be understood as creating a pattern for URLs that are relative to (or * suffixes of) the current pattern. * * @example * The following two matchers are equivalent: * <pre> * new UrlMatcher('/user/{id}?q').concat('/details?date'); * new UrlMatcher('/user/{id}/details?q&date'); * </pre> * * @param {string} pattern The pattern to append. * @param {Object} config An object hash of the configuration for the matcher. * @returns {UrlMatcher} A matcher for the concatenated pattern. */ UrlMatcher.prototype.concat = function (pattern, config) { // Because order of search parameters is irrelevant, we can add our own search
// parameters to the end of the new pattern. Parse the new pattern by itself
// and then join the bits together, but it's much easier to do this on a string level.
var defaultConfig = { caseInsensitive: $$UMFP.caseInsensitive(), strict: $$UMFP.strictMode(), squash: $$UMFP.defaultSquashPolicy() }; return new UrlMatcher(this.sourcePath + pattern + this.sourceSearch, extend(defaultConfig, config), this); };
UrlMatcher.prototype.toString = function () { return this.source; };
/** * @ngdoc function * @name ui.router.util.type:UrlMatcher#exec * @methodOf ui.router.util.type:UrlMatcher * * @description * Tests the specified path against this matcher, and returns an object containing the captured * parameter values, or null if the path does not match. The returned object contains the values * of any search parameters that are mentioned in the pattern, but their value may be null if * they are not present in `searchParams`. This means that search parameters are always treated * as optional. * * @example * <pre> * new UrlMatcher('/user/{id}?q&r').exec('/user/bob', { * x: '1', q: 'hello' * }); * // returns { id: 'bob', q: 'hello', r: null }
* </pre> * * @param {string} path The URL path to match, e.g. `$location.path()`. * @param {Object} searchParams URL search parameters, e.g. `$location.search()`. * @returns {Object} The captured parameter values. */ UrlMatcher.prototype.exec = function (path, searchParams) { var m = this.regexp.exec(path); if (!m) return null; searchParams = searchParams || {};
var paramNames = this.parameters(), nTotal = paramNames.length, nPath = this.segments.length - 1, values = {}, i, j, cfg, paramName;
if (nPath !== m.length - 1) throw new Error("Unbalanced capture group in route '" + this.source + "'");
function decodePathArray(string) { function reverseString(str) { return str.split("").reverse().join(""); } function unquoteDashes(str) { return str.replace(/\\-/, "-"); }
var split = reverseString(string).split(/-(?!\\)/); var allReversed = map(split, reverseString); return map(allReversed, unquoteDashes).reverse(); }
for (i = 0; i < nPath; i++) { paramName = paramNames[i]; var param = this.params[paramName]; var paramVal = m[i+1]; // if the param value matches a pre-replace pair, replace the value before decoding.
for (j = 0; j < param.replace; j++) { if (param.replace[j].from === paramVal) paramVal = param.replace[j].to; } if (paramVal && param.array === true) paramVal = decodePathArray(paramVal); values[paramName] = param.value(paramVal); } for (/**/; i < nTotal; i++) { paramName = paramNames[i]; values[paramName] = this.params[paramName].value(searchParams[paramName]); }
return values; };
/** * @ngdoc function * @name ui.router.util.type:UrlMatcher#parameters * @methodOf ui.router.util.type:UrlMatcher * * @description * Returns the names of all path and search parameters of this pattern in an unspecified order. * * @returns {Array.<string>} An array of parameter names. Must be treated as read-only. If the * pattern has no parameters, an empty array is returned. */ UrlMatcher.prototype.parameters = function (param) { if (!isDefined(param)) return this.$$paramNames; return this.params[param] || null; };
/** * @ngdoc function * @name ui.router.util.type:UrlMatcher#validate * @methodOf ui.router.util.type:UrlMatcher * * @description * Checks an object hash of parameters to validate their correctness according to the parameter * types of this `UrlMatcher`. * * @param {Object} params The object hash of parameters to validate. * @returns {boolean} Returns `true` if `params` validates, otherwise `false`. */ UrlMatcher.prototype.validates = function (params) { return this.params.$$validates(params); };
/** * @ngdoc function * @name ui.router.util.type:UrlMatcher#format * @methodOf ui.router.util.type:UrlMatcher * * @description * Creates a URL that matches this pattern by substituting the specified values * for the path and search parameters. Null values for path parameters are * treated as empty strings. * * @example * <pre> * new UrlMatcher('/user/{id}?q').format({ id:'bob', q:'yes' }); * // returns '/user/bob?q=yes'
* </pre> * * @param {Object} values the values to substitute for the parameters in this pattern. * @returns {string} the formatted URL (path and optionally search part). */ UrlMatcher.prototype.format = function (values) { values = values || {}; var segments = this.segments, params = this.parameters(), paramset = this.params; if (!this.validates(values)) return null;
var i, search = false, nPath = segments.length - 1, nTotal = params.length, result = segments[0];
function encodeDashes(str) { // Replace dashes with encoded "\-"
return encodeURIComponent(str).replace(/-/g, function(c) { return '%5C%' + c.charCodeAt(0).toString(16).toUpperCase(); }); }
for (i = 0; i < nTotal; i++) { var isPathParam = i < nPath; var name = params[i], param = paramset[name], value = param.value(values[name]); var isDefaultValue = param.isOptional && param.type.equals(param.value(), value); var squash = isDefaultValue ? param.squash : false; var encoded = param.type.encode(value);
if (isPathParam) { var nextSegment = segments[i + 1]; if (squash === false) { if (encoded != null) { if (isArray(encoded)) { result += map(encoded, encodeDashes).join("-"); } else { result += encodeURIComponent(encoded); } } result += nextSegment; } else if (squash === true) { var capture = result.match(/\/$/) ? /\/?(.*)/ : /(.*)/; result += nextSegment.match(capture)[1]; } else if (isString(squash)) { result += squash + nextSegment; } } else { if (encoded == null || (isDefaultValue && squash !== false)) continue; if (!isArray(encoded)) encoded = [ encoded ]; encoded = map(encoded, encodeURIComponent).join('&' + name + '='); result += (search ? '&' : '?') + (name + '=' + encoded); search = true; } }
return result; };
/** * @ngdoc object * @name ui.router.util.type:Type * * @description * Implements an interface to define custom parameter types that can be decoded from and encoded to * string parameters matched in a URL. Used by {@link ui.router.util.type:UrlMatcher `UrlMatcher`} * objects when matching or formatting URLs, or comparing or validating parameter values. * * See {@link ui.router.util.$urlMatcherFactory#methods_type `$urlMatcherFactory#type()`} for more * information on registering custom types. * * @param {Object} config A configuration object which contains the custom type definition. The object's * properties will override the default methods and/or pattern in `Type`'s public interface. * @example * <pre> * { * decode: function(val) { return parseInt(val, 10); }, * encode: function(val) { return val && val.toString(); }, * equals: function(a, b) { return this.is(a) && a === b; }, * is: function(val) { return angular.isNumber(val) isFinite(val) && val % 1 === 0; }, * pattern: /\d+/ * } * </pre> * * @property {RegExp} pattern The regular expression pattern used to match values of this type when * coming from a substring of a URL. * * @returns {Object} Returns a new `Type` object. */ function Type(config) { extend(this, config); }
/** * @ngdoc function * @name ui.router.util.type:Type#is * @methodOf ui.router.util.type:Type * * @description * Detects whether a value is of a particular type. Accepts a native (decoded) value * and determines whether it matches the current `Type` object. * * @param {*} val The value to check. * @param {string} key Optional. If the type check is happening in the context of a specific * {@link ui.router.util.type:UrlMatcher `UrlMatcher`} object, this is the name of the * parameter in which `val` is stored. Can be used for meta-programming of `Type` objects. * @returns {Boolean} Returns `true` if the value matches the type, otherwise `false`. */ Type.prototype.is = function(val, key) { return true; };
/** * @ngdoc function * @name ui.router.util.type:Type#encode * @methodOf ui.router.util.type:Type * * @description * Encodes a custom/native type value to a string that can be embedded in a URL. Note that the * return value does *not* need to be URL-safe (i.e. passed through `encodeURIComponent()`), it * only needs to be a representation of `val` that has been coerced to a string. * * @param {*} val The value to encode. * @param {string} key The name of the parameter in which `val` is stored. Can be used for * meta-programming of `Type` objects. * @returns {string} Returns a string representation of `val` that can be encoded in a URL. */ Type.prototype.encode = function(val, key) { return val; };
/** * @ngdoc function * @name ui.router.util.type:Type#decode * @methodOf ui.router.util.type:Type * * @description * Converts a parameter value (from URL string or transition param) to a custom/native value. * * @param {string} val The URL parameter value to decode. * @param {string} key The name of the parameter in which `val` is stored. Can be used for * meta-programming of `Type` objects. * @returns {*} Returns a custom representation of the URL parameter value. */ Type.prototype.decode = function(val, key) { return val; };
/** * @ngdoc function * @name ui.router.util.type:Type#equals * @methodOf ui.router.util.type:Type * * @description * Determines whether two decoded values are equivalent. * * @param {*} a A value to compare against. * @param {*} b A value to compare against. * @returns {Boolean} Returns `true` if the values are equivalent/equal, otherwise `false`. */ Type.prototype.equals = function(a, b) { return a == b; };
Type.prototype.$subPattern = function() { var sub = this.pattern.toString(); return sub.substr(1, sub.length - 2); };
Type.prototype.pattern = /.*/;
Type.prototype.toString = function() { return "{Type:" + this.name + "}"; };
/* * Wraps an existing custom Type as an array of Type, depending on 'mode'. * e.g.: * - urlmatcher pattern "/path?{queryParam[]:int}" * - url: "/path?queryParam=1&queryParam=2 * - $stateParams.queryParam will be [1, 2] * if `mode` is "auto", then * - url: "/path?queryParam=1 will create $stateParams.queryParam: 1 * - url: "/path?queryParam=1&queryParam=2 will create $stateParams.queryParam: [1, 2] */ Type.prototype.$asArray = function(mode, isSearch) { if (!mode) return this; if (mode === "auto" && !isSearch) throw new Error("'auto' array mode is for query parameters only"); return new ArrayType(this, mode);
function ArrayType(type, mode) { function bindTo(type, callbackName) { return function() { return type[callbackName].apply(type, arguments); }; }
// Wrap non-array value as array
function arrayWrap(val) { return isArray(val) ? val : (isDefined(val) ? [ val ] : []); } // Unwrap array value for "auto" mode. Return undefined for empty array.
function arrayUnwrap(val) { switch(val.length) { case 0: return undefined; case 1: return mode === "auto" ? val[0] : val; default: return val; } } function falsey(val) { return !val; }
// Wraps type (.is/.encode/.decode) functions to operate on each value of an array
function arrayHandler(callback, allTruthyMode) { return function handleArray(val) { val = arrayWrap(val); var result = map(val, callback); if (allTruthyMode === true) return filter(result, falsey).length === 0; return arrayUnwrap(result); }; }
// Wraps type (.equals) functions to operate on each value of an array
function arrayEqualsHandler(callback) { return function handleArray(val1, val2) { var left = arrayWrap(val1), right = arrayWrap(val2); if (left.length !== right.length) return false; for (var i = 0; i < left.length; i++) { if (!callback(left[i], right[i])) return false; } return true; }; }
this.encode = arrayHandler(bindTo(type, 'encode')); this.decode = arrayHandler(bindTo(type, 'decode')); this.is = arrayHandler(bindTo(type, 'is'), true); this.equals = arrayEqualsHandler(bindTo(type, 'equals')); this.pattern = type.pattern; this.$arrayMode = mode; } };
/** * @ngdoc object * @name ui.router.util.$urlMatcherFactory * * @description * Factory for {@link ui.router.util.type:UrlMatcher `UrlMatcher`} instances. The factory * is also available to providers under the name `$urlMatcherFactoryProvider`. */ function $UrlMatcherFactory() { $$UMFP = this;
var isCaseInsensitive = false, isStrictMode = true, defaultSquashPolicy = false;
function valToString(val) { return val != null ? val.toString().replace(/\//g, "%2F") : val; } function valFromString(val) { return val != null ? val.toString().replace(/%2F/g, "/") : val; } // TODO: in 1.0, make string .is() return false if value is undefined by default.
// function regexpMatches(val) { /*jshint validthis:true */ return isDefined(val) && this.pattern.test(val); }
function regexpMatches(val) { /*jshint validthis:true */ return this.pattern.test(val); }
var $types = {}, enqueue = true, typeQueue = [], injector, defaultTypes = { string: { encode: valToString, decode: valFromString, is: regexpMatches, pattern: /[^/]*/ }, int: { encode: valToString, decode: function(val) { return parseInt(val, 10); }, is: function(val) { return isDefined(val) && this.decode(val.toString()) === val; }, pattern: /\d+/ }, bool: { encode: function(val) { return val ? 1 : 0; }, decode: function(val) { return parseInt(val, 10) !== 0; }, is: function(val) { return val === true || val === false; }, pattern: /0|1/ }, date: { encode: function (val) { if (!this.is(val)) return undefined; return [ val.getFullYear(), ('0' + (val.getMonth() + 1)).slice(-2), ('0' + val.getDate()).slice(-2) ].join("-"); }, decode: function (val) { if (this.is(val)) return val; var match = this.capture.exec(val); return match ? new Date(match[1], match[2] - 1, match[3]) : undefined; }, is: function(val) { return val instanceof Date && !isNaN(val.valueOf()); }, equals: function (a, b) { return this.is(a) && this.is(b) && a.toISOString() === b.toISOString(); }, pattern: /[0-9]{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[1-2][0-9]|3[0-1])/, capture: /([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])/ }, json: { encode: angular.toJson, decode: angular.fromJson, is: angular.isObject, equals: angular.equals, pattern: /[^/]*/ }, any: { // does not encode/decode
encode: angular.identity, decode: angular.identity, is: angular.identity, equals: angular.equals, pattern: /.*/ } };
function getDefaultConfig() { return { strict: isStrictMode, caseInsensitive: isCaseInsensitive }; }
function isInjectable(value) { return (isFunction(value) || (isArray(value) && isFunction(value[value.length - 1]))); }
/** * [Internal] Get the default value of a parameter, which may be an injectable function. */ $UrlMatcherFactory.$$getDefaultValue = function(config) { if (!isInjectable(config.value)) return config.value; if (!injector) throw new Error("Injectable functions cannot be called at configuration time"); return injector.invoke(config.value); };
/** * @ngdoc function * @name ui.router.util.$urlMatcherFactory#caseInsensitive * @methodOf ui.router.util.$urlMatcherFactory * * @description * Defines whether URL matching should be case sensitive (the default behavior), or not. * * @param {boolean} value `false` to match URL in a case sensitive manner; otherwise `true`; * @returns {boolean} the current value of caseInsensitive */ this.caseInsensitive = function(value) { if (isDefined(value)) isCaseInsensitive = value; return isCaseInsensitive; };
/** * @ngdoc function * @name ui.router.util.$urlMatcherFactory#strictMode * @methodOf ui.router.util.$urlMatcherFactory * * @description * Defines whether URLs should match trailing slashes, or not (the default behavior). * * @param {boolean=} value `false` to match trailing slashes in URLs, otherwise `true`. * @returns {boolean} the current value of strictMode */ this.strictMode = function(value) { if (isDefined(value)) isStrictMode = value; return isStrictMode; };
/** * @ngdoc function * @name ui.router.util.$urlMatcherFactory#defaultSquashPolicy * @methodOf ui.router.util.$urlMatcherFactory * * @description * Sets the default behavior when generating or matching URLs with default parameter values. * * @param {string} value A string that defines the default parameter URL squashing behavior. * `nosquash`: When generating an href with a default parameter value, do not squash the parameter value from the URL * `slash`: When generating an href with a default parameter value, squash (remove) the parameter value, and, if the * parameter is surrounded by slashes, squash (remove) one slash from the URL * any other string, e.g. "~": When generating an href with a default parameter value, squash (remove) * the parameter value from the URL and replace it with this string. */ this.defaultSquashPolicy = function(value) { if (!isDefined(value)) return defaultSquashPolicy; if (value !== true && value !== false && !isString(value)) throw new Error("Invalid squash policy: " + value + ". Valid policies: false, true, arbitrary-string"); defaultSquashPolicy = value; return value; };
/** * @ngdoc function * @name ui.router.util.$urlMatcherFactory#compile * @methodOf ui.router.util.$urlMatcherFactory * * @description * Creates a {@link ui.router.util.type:UrlMatcher `UrlMatcher`} for the specified pattern. * * @param {string} pattern The URL pattern. * @param {Object} config The config object hash. * @returns {UrlMatcher} The UrlMatcher. */ this.compile = function (pattern, config) { return new UrlMatcher(pattern, extend(getDefaultConfig(), config)); };
/** * @ngdoc function * @name ui.router.util.$urlMatcherFactory#isMatcher * @methodOf ui.router.util.$urlMatcherFactory * * @description * Returns true if the specified object is a `UrlMatcher`, or false otherwise. * * @param {Object} object The object to perform the type check against. * @returns {Boolean} Returns `true` if the object matches the `UrlMatcher` interface, by * implementing all the same methods. */ this.isMatcher = function (o) { if (!isObject(o)) return false; var result = true;
forEach(UrlMatcher.prototype, function(val, name) { if (isFunction(val)) { result = result && (isDefined(o[name]) && isFunction(o[name])); } }); return result; };
/** * @ngdoc function * @name ui.router.util.$urlMatcherFactory#type * @methodOf ui.router.util.$urlMatcherFactory * * @description * Registers a custom {@link ui.router.util.type:Type `Type`} object that can be used to * generate URLs with typed parameters. * * @param {string} name The type name. * @param {Object|Function} definition The type definition. See * {@link ui.router.util.type:Type `Type`} for information on the values accepted. * @param {Object|Function} definitionFn (optional) A function that is injected before the app * runtime starts. The result of this function is merged into the existing `definition`. * See {@link ui.router.util.type:Type `Type`} for information on the values accepted. * * @returns {Object} Returns `$urlMatcherFactoryProvider`. * * @example * This is a simple example of a custom type that encodes and decodes items from an * array, using the array index as the URL-encoded value: * * <pre> * var list = ['John', 'Paul', 'George', 'Ringo']; * * $urlMatcherFactoryProvider.type('listItem', { * encode: function(item) { * // Represent the list item in the URL using its corresponding index
* return list.indexOf(item); * }, * decode: function(item) { * // Look up the list item by index
* return list[parseInt(item, 10)]; * }, * is: function(item) { * // Ensure the item is valid by checking to see that it appears
* // in the list
* return list.indexOf(item) > -1; * } * }); * * $stateProvider.state('list', { * url: "/list/{item:listItem}", * controller: function($scope, $stateParams) { * console.log($stateParams.item); * } * }); * * // ...
* * // Changes URL to '/list/3', logs "Ringo" to the console
* $state.go('list', { item: "Ringo" }); * </pre> * * This is a more complex example of a type that relies on dependency injection to * interact with services, and uses the parameter name from the URL to infer how to * handle encoding and decoding parameter values: * * <pre> * // Defines a custom type that gets a value from a service,
* // where each service gets different types of values from
* // a backend API:
* $urlMatcherFactoryProvider.type('dbObject', {}, function(Users, Posts) { * * // Matches up services to URL parameter names
* var services = { * user: Users, * post: Posts * }; * * return { * encode: function(object) { * // Represent the object in the URL using its unique ID
* return object.id; * }, * decode: function(value, key) { * // Look up the object by ID, using the parameter
* // name (key) to call the correct service
* return services[key].findById(value); * }, * is: function(object, key) { * // Check that object is a valid dbObject
* return angular.isObject(object) && object.id && services[key]; * } * equals: function(a, b) { * // Check the equality of decoded objects by comparing
* // their unique IDs
* return a.id === b.id; * } * }; * }); * * // In a config() block, you can then attach URLs with
* // type-annotated parameters:
* $stateProvider.state('users', { * url: "/users", * // ...
* }).state('users.item', { * url: "/{user:dbObject}", * controller: function($scope, $stateParams) { * // $stateParams.user will now be an object returned from
* // the Users service
* }, * // ...
* }); * </pre> */ this.type = function (name, definition, definitionFn) { if (!isDefined(definition)) return $types[name]; if ($types.hasOwnProperty(name)) throw new Error("A type named '" + name + "' has already been defined.");
$types[name] = new Type(extend({ name: name }, definition)); if (definitionFn) { typeQueue.push({ name: name, def: definitionFn }); if (!enqueue) flushTypeQueue(); } return this; };
// `flushTypeQueue()` waits until `$urlMatcherFactory` is injected before invoking the queued `definitionFn`s
function flushTypeQueue() { while(typeQueue.length) { var type = typeQueue.shift(); if (type.pattern) throw new Error("You cannot override a type's .pattern at runtime."); angular.extend($types[type.name], injector.invoke(type.def)); } }
// Register default types. Store them in the prototype of $types.
forEach(defaultTypes, function(type, name) { $types[name] = new Type(extend({name: name}, type)); }); $types = inherit($types, {});
/* No need to document $get, since it returns this */ this.$get = ['$injector', function ($injector) { injector = $injector; enqueue = false; flushTypeQueue();
forEach(defaultTypes, function(type, name) { if (!$types[name]) $types[name] = new Type(type); }); return this; }];
this.Param = function Param(id, type, config, location) { var self = this; config = unwrapShorthand(config); type = getType(config, type, location); var arrayMode = getArrayMode(); type = arrayMode ? type.$asArray(arrayMode, location === "search") : type; if (type.name === "string" && !arrayMode && location === "path" && config.value === undefined) config.value = ""; // for 0.2.x; in 0.3.0+ do not automatically default to ""
var isOptional = config.value !== undefined; var squash = getSquashPolicy(config, isOptional); var replace = getReplace(config, arrayMode, isOptional, squash);
function unwrapShorthand(config) { var keys = isObject(config) ? objectKeys(config) : []; var isShorthand = indexOf(keys, "value") === -1 && indexOf(keys, "type") === -1 && indexOf(keys, "squash") === -1 && indexOf(keys, "array") === -1; if (isShorthand) config = { value: config }; config.$$fn = isInjectable(config.value) ? config.value : function () { return config.value; }; return config; }
function getType(config, urlType, location) { if (config.type && urlType) throw new Error("Param '"+id+"' has two type configurations."); if (urlType) return urlType; if (!config.type) return (location === "config" ? $types.any : $types.string); return config.type instanceof Type ? config.type : new Type(config.type); }
// array config: param name (param[]) overrides default settings. explicit config overrides param name.
function getArrayMode() { var arrayDefaults = { array: (location === "search" ? "auto" : false) }; var arrayParamNomenclature = id.match(/\[\]$/) ? { array: true } : {}; return extend(arrayDefaults, arrayParamNomenclature, config).array; }
/** * returns false, true, or the squash value to indicate the "default parameter url squash policy". */ function getSquashPolicy(config, isOptional) { var squash = config.squash; if (!isOptional || squash === false) return false; if (!isDefined(squash) || squash == null) return defaultSquashPolicy; if (squash === true || isString(squash)) return squash; throw new Error("Invalid squash policy: '" + squash + "'. Valid policies: false, true, or arbitrary string"); }
function getReplace(config, arrayMode, isOptional, squash) { var replace, configuredKeys, defaultPolicy = [ { from: "", to: (isOptional || arrayMode ? undefined : "") }, { from: null, to: (isOptional || arrayMode ? undefined : "") } ]; replace = isArray(config.replace) ? config.replace : []; if (isString(squash)) replace.push({ from: squash, to: undefined }); configuredKeys = map(replace, function(item) { return item.from; } ); return filter(defaultPolicy, function(item) { return indexOf(configuredKeys, item.from) === -1; }).concat(replace); }
/** * [Internal] Get the default value of a parameter, which may be an injectable function. */ function $$getDefaultValue() { if (!injector) throw new Error("Injectable functions cannot be called at configuration time"); return injector.invoke(config.$$fn); }
/** * [Internal] Gets the decoded representation of a value if the value is defined, otherwise, returns the * default value, which may be the result of an injectable function. */ function $value(value) { function hasReplaceVal(val) { return function(obj) { return obj.from === val; }; } function $replace(value) { var replacement = map(filter(self.replace, hasReplaceVal(value)), function(obj) { return obj.to; }); return replacement.length ? replacement[0] : value; } value = $replace(value); return isDefined(value) ? self.type.decode(value) : $$getDefaultValue(); }
function toString() { return "{Param:" + id + " " + type + " squash: '" + squash + "' optional: " + isOptional + "}"; }
extend(this, { id: id, type: type, location: location, array: arrayMode, squash: squash, replace: replace, isOptional: isOptional, value: $value, dynamic: undefined, config: config, toString: toString }); };
function ParamSet(params) { extend(this, params || {}); }
ParamSet.prototype = { $$new: function() { return inherit(this, extend(new ParamSet(), { $$parent: this})); }, $$keys: function () { var keys = [], chain = [], parent = this, ignore = objectKeys(ParamSet.prototype); while (parent) { chain.push(parent); parent = parent.$$parent; } chain.reverse(); forEach(chain, function(paramset) { forEach(objectKeys(paramset), function(key) { if (indexOf(keys, key) === -1 && indexOf(ignore, key) === -1) keys.push(key); }); }); return keys; }, $$values: function(paramValues) { var values = {}, self = this; forEach(self.$$keys(), function(key) { values[key] = self[key].value(paramValues && paramValues[key]); }); return values; }, $$equals: function(paramValues1, paramValues2) { var equal = true, self = this; forEach(self.$$keys(), function(key) { var left = paramValues1 && paramValues1[key], right = paramValues2 && paramValues2[key]; if (!self[key].type.equals(left, right)) equal = false; }); return equal; }, $$validates: function $$validate(paramValues) { var result = true, isOptional, val, param, self = this;
forEach(this.$$keys(), function(key) { param = self[key]; val = paramValues[key]; isOptional = !val && param.isOptional; result = result && (isOptional || !!param.type.is(val)); }); return result; }, $$parent: undefined };
this.ParamSet = ParamSet; }
// Register as a provider so it's available to other providers
angular.module('ui.router.util').provider('$urlMatcherFactory', $UrlMatcherFactory); angular.module('ui.router.util').run(['$urlMatcherFactory', function($urlMatcherFactory) { }]);
/** * @ngdoc object * @name ui.router.router.$urlRouterProvider * * @requires ui.router.util.$urlMatcherFactoryProvider * @requires $locationProvider * * @description * `$urlRouterProvider` has the responsibility of watching `$location`. * When `$location` changes it runs through a list of rules one by one until a * match is found. `$urlRouterProvider` is used behind the scenes anytime you specify * a url in a state configuration. All urls are compiled into a UrlMatcher object. * * There are several methods on `$urlRouterProvider` that make it useful to use directly * in your module config. */ $UrlRouterProvider.$inject = ['$locationProvider', '$urlMatcherFactoryProvider']; function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) { var rules = [], otherwise = null, interceptDeferred = false, listener;
// Returns a string that is a prefix of all strings matching the RegExp
function regExpPrefix(re) { var prefix = /^\^((?:\\[^a-zA-Z0-9]|[^\\\[\]\^$*+?.()|{}]+)*)/.exec(re.source); return (prefix != null) ? prefix[1].replace(/\\(.)/g, "$1") : ''; }
// Interpolates matched values into a String.replace()-style pattern
function interpolate(pattern, match) { return pattern.replace(/\$(\$|\d{1,2})/, function (m, what) { return match[what === '$' ? 0 : Number(what)]; }); }
/** * @ngdoc function * @name ui.router.router.$urlRouterProvider#rule * @methodOf ui.router.router.$urlRouterProvider * * @description * Defines rules that are used by `$urlRouterProvider` to find matches for * specific URLs. * * @example * <pre> * var app = angular.module('app', ['ui.router.router']); * * app.config(function ($urlRouterProvider) { * // Here's an example of how you might allow case insensitive urls
* $urlRouterProvider.rule(function ($injector, $location) { * var path = $location.path(), * normalized = path.toLowerCase(); * * if (path !== normalized) { * return normalized; * } * }); * }); * </pre> * * @param {object} rule Handler function that takes `$injector` and `$location` * services as arguments. You can use them to return a valid path as a string. * * @return {object} `$urlRouterProvider` - `$urlRouterProvider` instance */ this.rule = function (rule) { if (!isFunction(rule)) throw new Error("'rule' must be a function"); rules.push(rule); return this; };
/** * @ngdoc object * @name ui.router.router.$urlRouterProvider#otherwise * @methodOf ui.router.router.$urlRouterProvider * * @description * Defines a path that is used when an invalid route is requested. * * @example * <pre> * var app = angular.module('app', ['ui.router.router']); * * app.config(function ($urlRouterProvider) { * // if the path doesn't match any of the urls you configured
* // otherwise will take care of routing the user to the
* // specified url
* $urlRouterProvider.otherwise('/index'); * * // Example of using function rule as param
* $urlRouterProvider.otherwise(function ($injector, $location) { * return '/a/valid/url'; * }); * }); * </pre> * * @param {string|object} rule The url path you want to redirect to or a function * rule that returns the url path. The function version is passed two params: * `$injector` and `$location` services, and must return a url string. * * @return {object} `$urlRouterProvider` - `$urlRouterProvider` instance */ this.otherwise = function (rule) { if (isString(rule)) { var redirect = rule; rule = function () { return redirect; }; } else if (!isFunction(rule)) throw new Error("'rule' must be a function"); otherwise = rule; return this; };
function handleIfMatch($injector, handler, match) { if (!match) return false; var result = $injector.invoke(handler, handler, { $match: match }); return isDefined(result) ? result : true; }
/** * @ngdoc function * @name ui.router.router.$urlRouterProvider#when * @methodOf ui.router.router.$urlRouterProvider * * @description * Registers a handler for a given url matching. if handle is a string, it is * treated as a redirect, and is interpolated according to the syntax of match * (i.e. like `String.replace()` for `RegExp`, or like a `UrlMatcher` pattern otherwise). * * If the handler is a function, it is injectable. It gets invoked if `$location` * matches. You have the option of inject the match object as `$match`. * * The handler can return * * - **falsy** to indicate that the rule didn't match after all, then `$urlRouter` * will continue trying to find another one that matches. * - **string** which is treated as a redirect and passed to `$location.url()` * - **void** or any **truthy** value tells `$urlRouter` that the url was handled. * * @example * <pre> * var app = angular.module('app', ['ui.router.router']); * * app.config(function ($urlRouterProvider) { * $urlRouterProvider.when($state.url, function ($match, $stateParams) { * if ($state.$current.navigable !== state || * !equalForKeys($match, $stateParams) { * $state.transitionTo(state, $match, false); * } * }); * }); * </pre> * * @param {string|object} what The incoming path that you want to redirect. * @param {string|object} handler The path you want to redirect your user to. */ this.when = function (what, handler) { var redirect, handlerIsString = isString(handler); if (isString(what)) what = $urlMatcherFactory.compile(what);
if (!handlerIsString && !isFunction(handler) && !isArray(handler)) throw new Error("invalid 'handler' in when()");
var strategies = { matcher: function (what, handler) { if (handlerIsString) { redirect = $urlMatcherFactory.compile(handler); handler = ['$match', function ($match) { return redirect.format($match); }]; } return extend(function ($injector, $location) { return handleIfMatch($injector, handler, what.exec($location.path(), $location.search())); }, { prefix: isString(what.prefix) ? what.prefix : '' }); }, regex: function (what, handler) { if (what.global || what.sticky) throw new Error("when() RegExp must not be global or sticky");
if (handlerIsString) { redirect = handler; handler = ['$match', function ($match) { return interpolate(redirect, $match); }]; } return extend(function ($injector, $location) { return handleIfMatch($injector, handler, what.exec($location.path())); }, { prefix: regExpPrefix(what) }); } };
var check = { matcher: $urlMatcherFactory.isMatcher(what), regex: what instanceof RegExp };
for (var n in check) { if (check[n]) return this.rule(strategies[n](what, handler)); }
throw new Error("invalid 'what' in when()"); };
/** * @ngdoc function * @name ui.router.router.$urlRouterProvider#deferIntercept * @methodOf ui.router.router.$urlRouterProvider * * @description * Disables (or enables) deferring location change interception. * * If you wish to customize the behavior of syncing the URL (for example, if you wish to * defer a transition but maintain the current URL), call this method at configuration time. * Then, at run time, call `$urlRouter.listen()` after you have configured your own * `$locationChangeSuccess` event handler. * * @example * <pre> * var app = angular.module('app', ['ui.router.router']); * * app.config(function ($urlRouterProvider) { * * // Prevent $urlRouter from automatically intercepting URL changes;
* // this allows you to configure custom behavior in between
* // location changes and route synchronization:
* $urlRouterProvider.deferIntercept(); * * }).run(function ($rootScope, $urlRouter, UserService) { * * $rootScope.$on('$locationChangeSuccess', function(e) { * // UserService is an example service for managing user state
* if (UserService.isLoggedIn()) return; * * // Prevent $urlRouter's default handler from firing
* e.preventDefault(); * * UserService.handleLogin().then(function() { * // Once the user has logged in, sync the current URL
* // to the router:
* $urlRouter.sync(); * }); * }); * * // Configures $urlRouter's listener *after* your custom listener
* $urlRouter.listen(); * }); * </pre> * * @param {boolean} defer Indicates whether to defer location change interception. Passing no parameter is equivalent to `true`. */ this.deferIntercept = function (defer) { if (defer === undefined) defer = true; interceptDeferred = defer; };
/** * @ngdoc object * @name ui.router.router.$urlRouter * * @requires $location * @requires $rootScope * @requires $injector * @requires $browser * * @description * */ this.$get = $get; $get.$inject = ['$location', '$rootScope', '$injector', '$browser']; function $get( $location, $rootScope, $injector, $browser) {
var baseHref = $browser.baseHref(), location = $location.url(), lastPushedUrl;
function appendBasePath(url, isHtml5, absolute) { if (baseHref === '/') return url; if (isHtml5) return baseHref.slice(0, -1) + url; if (absolute) return baseHref.slice(1) + url; return url; }
// TODO: Optimize groups of rules with non-empty prefix into some sort of decision tree
function update(evt) { if (evt && evt.defaultPrevented) return; var ignoreUpdate = lastPushedUrl && $location.url() === lastPushedUrl; lastPushedUrl = undefined; if (ignoreUpdate) return true;
function check(rule) { var handled = rule($injector, $location);
if (!handled) return false; if (isString(handled)) $location.replace().url(handled); return true; } var n = rules.length, i;
for (i = 0; i < n; i++) { if (check(rules[i])) return; } // always check otherwise last to allow dynamic updates to the set of rules
if (otherwise) check(otherwise); }
function listen() { listener = listener || $rootScope.$on('$locationChangeSuccess', update); return listener; }
if (!interceptDeferred) listen();
return { /** * @ngdoc function * @name ui.router.router.$urlRouter#sync * @methodOf ui.router.router.$urlRouter * * @description * Triggers an update; the same update that happens when the address bar url changes, aka `$locationChangeSuccess`. * This method is useful when you need to use `preventDefault()` on the `$locationChangeSuccess` event, * perform some custom logic (route protection, auth, config, redirection, etc) and then finally proceed * with the transition by calling `$urlRouter.sync()`. * * @example * <pre> * angular.module('app', ['ui.router']) * .run(function($rootScope, $urlRouter) { * $rootScope.$on('$locationChangeSuccess', function(evt) { * // Halt state change from even starting
* evt.preventDefault(); * // Perform custom logic
* var meetsRequirement = ... * // Continue with the update and state transition if logic allows
* if (meetsRequirement) $urlRouter.sync(); * }); * }); * </pre> */ sync: function() { update(); },
listen: function() { return listen(); },
update: function(read) { if (read) { location = $location.url(); return; } if ($location.url() === location) return;
$location.url(location); $location.replace(); },
push: function(urlMatcher, params, options) { $location.url(urlMatcher.format(params || {})); lastPushedUrl = options && options.$$avoidResync ? $location.url() : undefined; if (options && options.replace) $location.replace(); },
/** * @ngdoc function * @name ui.router.router.$urlRouter#href * @methodOf ui.router.router.$urlRouter * * @description * A URL generation method that returns the compiled URL for a given * {@link ui.router.util.type:UrlMatcher `UrlMatcher`}, populated with the provided parameters. * * @example * <pre> * $bob = $urlRouter.href(new UrlMatcher("/about/:person"), { * person: "bob" * }); * // $bob == "/about/bob";
* </pre> * * @param {UrlMatcher} urlMatcher The `UrlMatcher` object which is used as the template of the URL to generate. * @param {object=} params An object of parameter values to fill the matcher's required parameters. * @param {object=} options Options object. The options are: * * - **`absolute`** - {boolean=false}, If true will generate an absolute url, e.g. "http://www.example.com/fullurl". * * @returns {string} Returns the fully compiled URL, or `null` if `params` fail validation against `urlMatcher` */ href: function(urlMatcher, params, options) { if (!urlMatcher.validates(params)) return null;
var isHtml5 = $locationProvider.html5Mode(); if (angular.isObject(isHtml5)) { isHtml5 = isHtml5.enabled; } var url = urlMatcher.format(params); options = options || {};
if (!isHtml5 && url !== null) { url = "#" + $locationProvider.hashPrefix() + url; } url = appendBasePath(url, isHtml5, options.absolute);
if (!options.absolute || !url) { return url; }
var slash = (!isHtml5 && url ? '/' : ''), port = $location.port(); port = (port === 80 || port === 443 ? '' : ':' + port);
return [$location.protocol(), '://', $location.host(), port, slash, url].join(''); } }; } }
angular.module('ui.router.router').provider('$urlRouter', $UrlRouterProvider);
/** * @ngdoc object * @name ui.router.state.$stateProvider * * @requires ui.router.router.$urlRouterProvider * @requires ui.router.util.$urlMatcherFactoryProvider * * @description * The new `$stateProvider` works similar to Angular's v1 router, but it focuses purely * on state. * * A state corresponds to a "place" in the application in terms of the overall UI and * navigation. A state describes (via the controller / template / view properties) what * the UI looks like and does at that place. * * States often have things in common, and the primary way of factoring out these * commonalities in this model is via the state hierarchy, i.e. parent/child states aka * nested states. * * The `$stateProvider` provides interfaces to declare these states for your app. */ $StateProvider.$inject = ['$urlRouterProvider', '$urlMatcherFactoryProvider']; function $StateProvider( $urlRouterProvider, $urlMatcherFactory) {
var root, states = {}, $state, queue = {}, abstractKey = 'abstract';
// Builds state properties from definition passed to registerState()
var stateBuilder = {
// Derive parent state from a hierarchical name only if 'parent' is not explicitly defined.
// state.children = [];
// if (parent) parent.children.push(state);
parent: function(state) { if (isDefined(state.parent) && state.parent) return findState(state.parent); // regex matches any valid composite state name
// would match "contact.list" but not "contacts"
var compositeName = /^(.+)\.[^.]+$/.exec(state.name); return compositeName ? findState(compositeName[1]) : root; },
// inherit 'data' from parent and override by own values (if any)
data: function(state) { if (state.parent && state.parent.data) { state.data = state.self.data = extend({}, state.parent.data, state.data); } return state.data; },
// Build a URLMatcher if necessary, either via a relative or absolute URL
url: function(state) { var url = state.url, config = { params: state.params || {} };
if (isString(url)) { if (url.charAt(0) == '^') return $urlMatcherFactory.compile(url.substring(1), config); return (state.parent.navigable || root).url.concat(url, config); }
if (!url || $urlMatcherFactory.isMatcher(url)) return url; throw new Error("Invalid url '" + url + "' in state '" + state + "'"); },
// Keep track of the closest ancestor state that has a URL (i.e. is navigable)
navigable: function(state) { return state.url ? state : (state.parent ? state.parent.navigable : null); },
// Own parameters for this state. state.url.params is already built at this point. Create and add non-url params
ownParams: function(state) { var params = state.url && state.url.params || new $$UMFP.ParamSet(); forEach(state.params || {}, function(config, id) { if (!params[id]) params[id] = new $$UMFP.Param(id, null, config, "config"); }); return params; },
// Derive parameters for this state and ensure they're a super-set of parent's parameters
params: function(state) { return state.parent && state.parent.params ? extend(state.parent.params.$$new(), state.ownParams) : new $$UMFP.ParamSet(); },
// If there is no explicit multi-view configuration, make one up so we don't have
// to handle both cases in the view directive later. Note that having an explicit
// 'views' property will mean the default unnamed view properties are ignored. This
// is also a good time to resolve view names to absolute names, so everything is a
// straight lookup at link time.
views: function(state) { var views = {};
forEach(isDefined(state.views) ? state.views : { '': state }, function (view, name) { if (name.indexOf('@') < 0) name += '@' + state.parent.name; views[name] = view; }); return views; },
// Keep a full path from the root down to this state as this is needed for state activation.
path: function(state) { return state.parent ? state.parent.path.concat(state) : []; // exclude root from path
},
// Speed up $state.contains() as it's used a lot
includes: function(state) { var includes = state.parent ? extend({}, state.parent.includes) : {}; includes[state.name] = true; return includes; },
$delegates: {} };
function isRelative(stateName) { return stateName.indexOf(".") === 0 || stateName.indexOf("^") === 0; }
function findState(stateOrName, base) { if (!stateOrName) return undefined;
var isStr = isString(stateOrName), name = isStr ? stateOrName : stateOrName.name, path = isRelative(name);
if (path) { if (!base) throw new Error("No reference point given for path '" + name + "'"); base = findState(base); var rel = name.split("."), i = 0, pathLength = rel.length, current = base;
for (; i < pathLength; i++) { if (rel[i] === "" && i === 0) { current = base; continue; } if (rel[i] === "^") { if (!current.parent) throw new Error("Path '" + name + "' not valid for state '" + base.name + "'"); current = current.parent; continue; } break; } rel = rel.slice(i).join("."); name = current.name + (current.name && rel ? "." : "") + rel; } var state = states[name];
if (state && (isStr || (!isStr && (state === stateOrName || state.self === stateOrName)))) { return state; } return undefined; }
function queueState(parentName, state) { if (!queue[parentName]) { queue[parentName] = []; } queue[parentName].push(state); }
function flushQueuedChildren(parentName) { var queued = queue[parentName] || []; while(queued.length) { registerState(queued.shift()); } }
function registerState(state) { // Wrap a new object around the state so we can store our private details easily.
state = inherit(state, { self: state, resolve: state.resolve || {}, toString: function() { return this.name; } });
var name = state.name; if (!isString(name) || name.indexOf('@') >= 0) throw new Error("State must have a valid name"); if (states.hasOwnProperty(name)) throw new Error("State '" + name + "'' is already defined");
// Get parent name
var parentName = (name.indexOf('.') !== -1) ? name.substring(0, name.lastIndexOf('.')) : (isString(state.parent)) ? state.parent : (isObject(state.parent) && isString(state.parent.name)) ? state.parent.name : '';
// If parent is not registered yet, add state to queue and register later
if (parentName && !states[parentName]) { return queueState(parentName, state.self); }
for (var key in stateBuilder) { if (isFunction(stateBuilder[key])) state[key] = stateBuilder[key](state, stateBuilder.$delegates[key]); } states[name] = state;
// Register the state in the global state list and with $urlRouter if necessary.
if (!state[abstractKey] && state.url) { $urlRouterProvider.when(state.url, ['$match', '$stateParams', function ($match, $stateParams) { if ($state.$current.navigable != state || !equalForKeys($match, $stateParams)) { $state.transitionTo(state, $match, { inherit: true, location: false }); } }]); }
// Register any queued children
flushQueuedChildren(name);
return state; }
// Checks text to see if it looks like a glob.
function isGlob (text) { return text.indexOf('*') > -1; }
// Returns true if glob matches current $state name.
function doesStateMatchGlob (glob) { var globSegments = glob.split('.'), segments = $state.$current.name.split('.');
//match greedy starts
if (globSegments[0] === '**') { segments = segments.slice(indexOf(segments, globSegments[1])); segments.unshift('**'); } //match greedy ends
if (globSegments[globSegments.length - 1] === '**') { segments.splice(indexOf(segments, globSegments[globSegments.length - 2]) + 1, Number.MAX_VALUE); segments.push('**'); }
if (globSegments.length != segments.length) { return false; }
//match single stars
for (var i = 0, l = globSegments.length; i < l; i++) { if (globSegments[i] === '*') { segments[i] = '*'; } }
return segments.join('') === globSegments.join(''); }
// Implicit root state that is always active
root = registerState({ name: '', url: '^', views: null, 'abstract': true }); root.navigable = null;
/** * @ngdoc function * @name ui.router.state.$stateProvider#decorator * @methodOf ui.router.state.$stateProvider * * @description * Allows you to extend (carefully) or override (at your own peril) the * `stateBuilder` object used internally by `$stateProvider`. This can be used * to add custom functionality to ui-router, for example inferring templateUrl * based on the state name. * * When passing only a name, it returns the current (original or decorated) builder * function that matches `name`. * * The builder functions that can be decorated are listed below. Though not all * necessarily have a good use case for decoration, that is up to you to decide. * * In addition, users can attach custom decorators, which will generate new * properties within the state's internal definition. There is currently no clear * use-case for this beyond accessing internal states (i.e. $state.$current), * however, expect this to become increasingly relevant as we introduce additional * meta-programming features. * * **Warning**: Decorators should not be interdependent because the order of * execution of the builder functions in non-deterministic. Builder functions * should only be dependent on the state definition object and super function. * * * Existing builder functions and current return values: * * - **parent** `{object}` - returns the parent state object. * - **data** `{object}` - returns state data, including any inherited data that is not * overridden by own values (if any). * - **url** `{object}` - returns a {@link ui.router.util.type:UrlMatcher UrlMatcher} * or `null`. * - **navigable** `{object}` - returns closest ancestor state that has a URL (aka is * navigable). * - **params** `{object}` - returns an array of state params that are ensured to * be a super-set of parent's params. * - **views** `{object}` - returns a views object where each key is an absolute view * name (i.e. "viewName@stateName") and each value is the config object * (template, controller) for the view. Even when you don't use the views object * explicitly on a state config, one is still created for you internally. * So by decorating this builder function you have access to decorating template * and controller properties. * - **ownParams** `{object}` - returns an array of params that belong to the state, * not including any params defined by ancestor states. * - **path** `{string}` - returns the full path from the root down to this state. * Needed for state activation. * - **includes** `{object}` - returns an object that includes every state that * would pass a `$state.includes()` test. * * @example * <pre> * // Override the internal 'views' builder with a function that takes the state
* // definition, and a reference to the internal function being overridden:
* $stateProvider.decorator('views', function (state, parent) { * var result = {}, * views = parent(state); * * angular.forEach(views, function (config, name) { * var autoName = (state.name + '.' + name).replace('.', '/'); * config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html'; * result[name] = config; * }); * return result; * }); * * $stateProvider.state('home', { * views: { * 'contact.list': { controller: 'ListController' }, * 'contact.item': { controller: 'ItemController' } * } * }); * * // ...
* * $state.go('home'); * // Auto-populates list and item views with /partials/home/contact/list.html,
* // and /partials/home/contact/item.html, respectively.
* </pre> * * @param {string} name The name of the builder function to decorate. * @param {object} func A function that is responsible for decorating the original * builder function. The function receives two parameters: * * - `{object}` - state - The state config object. * - `{object}` - super - The original builder function. * * @return {object} $stateProvider - $stateProvider instance */ this.decorator = decorator; function decorator(name, func) { /*jshint validthis: true */ if (isString(name) && !isDefined(func)) { return stateBuilder[name]; } if (!isFunction(func) || !isString(name)) { return this; } if (stateBuilder[name] && !stateBuilder.$delegates[name]) { stateBuilder.$delegates[name] = stateBuilder[name]; } stateBuilder[name] = func; return this; }
/** * @ngdoc function * @name ui.router.state.$stateProvider#state * @methodOf ui.router.state.$stateProvider * * @description * Registers a state configuration under a given state name. The stateConfig object * has the following acceptable properties. * * @param {string} name A unique state name, e.g. "home", "about", "contacts". * To create a parent/child state use a dot, e.g. "about.sales", "home.newest". * @param {object} stateConfig State configuration object. * @param {string|function=} stateConfig.template * <a id='template'></a> * html template as a string or a function that returns * an html template as a string which should be used by the uiView directives. This property * takes precedence over templateUrl. * * If `template` is a function, it will be called with the following parameters: * * - {array.<object>} - state parameters extracted from the current $location.path() by * applying the current state * * <pre>template: * "<h1>inline template definition</h1>" + * "<div ui-view></div>"</pre> * <pre>template: function(params) { * return "<h1>generated template</h1>"; }</pre> * </div> * * @param {string|function=} stateConfig.templateUrl * <a id='templateUrl'></a> * * path or function that returns a path to an html * template that should be used by uiView. * * If `templateUrl` is a function, it will be called with the following parameters: * * - {array.<object>} - state parameters extracted from the current $location.path() by * applying the current state * * <pre>templateUrl: "home.html"</pre> * <pre>templateUrl: function(params) { * return myTemplates[params.pageId]; }</pre> * * @param {function=} stateConfig.templateProvider * <a id='templateProvider'></a> * Provider function that returns HTML content string. * <pre> templateProvider: * function(MyTemplateService, params) { * return MyTemplateService.getTemplate(params.pageId); * }</pre> * * @param {string|function=} stateConfig.controller * <a id='controller'></a> * * Controller fn that should be associated with newly * related scope or the name of a registered controller if passed as a string. * Optionally, the ControllerAs may be declared here. * <pre>controller: "MyRegisteredController"</pre> * <pre>controller: * "MyRegisteredController as fooCtrl"}</pre> * <pre>controller: function($scope, MyService) { * $scope.data = MyService.getData(); }</pre> * * @param {function=} stateConfig.controllerProvider * <a id='controllerProvider'></a> * * Injectable provider function that returns the actual controller or string. * <pre>controllerProvider: * function(MyResolveData) { * if (MyResolveData.foo) * return "FooCtrl" * else if (MyResolveData.bar) * return "BarCtrl"; * else return function($scope) { * $scope.baz = "Qux"; * } * }</pre> * * @param {string=} stateConfig.controllerAs * <a id='controllerAs'></a> * * A controller alias name. If present the controller will be * published to scope under the controllerAs name. * <pre>controllerAs: "myCtrl"</pre> * * @param {object=} stateConfig.resolve * <a id='resolve'></a> * * An optional map<string, function> of dependencies which * should be injected into the controller. If any of these dependencies are promises, * the router will wait for them all to be resolved before the controller is instantiated. * If all the promises are resolved successfully, the $stateChangeSuccess event is fired * and the values of the resolved promises are injected into any controllers that reference them. * If any of the promises are rejected the $stateChangeError event is fired. * * The map object is: * * - key - {string}: name of dependency to be injected into controller * - factory - {string|function}: If string then it is alias for service. Otherwise if function, * it is injected and return value it treated as dependency. If result is a promise, it is * resolved before its value is injected into controller. * * <pre>resolve: { * myResolve1: * function($http, $stateParams) { * return $http.get("/api/foos/"+stateParams.fooID); * } * }</pre> * * @param {string=} stateConfig.url * <a id='url'></a> * * A url fragment with optional parameters. When a state is navigated or * transitioned to, the `$stateParams` service will be populated with any * parameters that were passed. * * examples: * <pre>url: "/home" * url: "/users/:userid" * url: "/books/{bookid:[a-zA-Z_-]}" * url: "/books/{categoryid:int}" * url: "/books/{publishername:string}/{categoryid:int}" * url: "/messages?before&after" * url: "/messages?{before:date}&{after:date}"</pre> * url: "/messages/:mailboxid?{before:date}&{after:date}" * * @param {object=} stateConfig.views * <a id='views'></a> * an optional map<string, object> which defined multiple views, or targets views * manually/explicitly. * * Examples: * * Targets three named `ui-view`s in the parent state's template * <pre>views: { * header: { * controller: "headerCtrl", * templateUrl: "header.html" * }, body: { * controller: "bodyCtrl", * templateUrl: "body.html" * }, footer: { * controller: "footCtrl", * templateUrl: "footer.html" * } * }</pre> * * Targets named `ui-view="header"` from grandparent state 'top''s template, and named `ui-view="body" from parent state's template. * <pre>views: { * 'header@top': { * controller: "msgHeaderCtrl", * templateUrl: "msgHeader.html" * }, 'body': { * controller: "messagesCtrl", * templateUrl: "messages.html" * } * }</pre> * * @param {boolean=} [stateConfig.abstract=false] * <a id='abstract'></a> * An abstract state will never be directly activated, * but can provide inherited properties to its common children states. * <pre>abstract: true</pre> * * @param {function=} stateConfig.onEnter * <a id='onEnter'></a> * * Callback function for when a state is entered. Good way * to trigger an action or dispatch an event, such as opening a dialog. * If minifying your scripts, make sure to explictly annotate this function, * because it won't be automatically annotated by your build tools. * * <pre>onEnter: function(MyService, $stateParams) { * MyService.foo($stateParams.myParam); * }</pre> * * @param {function=} stateConfig.onExit * <a id='onExit'></a> * * Callback function for when a state is exited. Good way to * trigger an action or dispatch an event, such as opening a dialog. * If minifying your scripts, make sure to explictly annotate this function, * because it won't be automatically annotated by your build tools. * * <pre>onExit: function(MyService, $stateParams) { * MyService.cleanup($stateParams.myParam); * }</pre> * * @param {boolean=} [stateConfig.reloadOnSearch=true] * <a id='reloadOnSearch'></a> * * If `false`, will not retrigger the same state * just because a search/query parameter has changed (via $location.search() or $location.hash()). * Useful for when you'd like to modify $location.search() without triggering a reload. * <pre>reloadOnSearch: false</pre> * * @param {object=} stateConfig.data * <a id='data'></a> * * Arbitrary data object, useful for custom configuration. The parent state's `data` is * prototypally inherited. In other words, adding a data property to a state adds it to * the entire subtree via prototypal inheritance. * * <pre>data: { * requiredRole: 'foo' * } </pre> * * @param {object=} stateConfig.params * <a id='params'></a> * * A map which optionally configures parameters declared in the `url`, or * defines additional non-url parameters. For each parameter being * configured, add a configuration object keyed to the name of the parameter. * * Each parameter configuration object may contain the following properties: * * - ** value ** - {object|function=}: specifies the default value for this * parameter. This implicitly sets this parameter as optional. * * When UI-Router routes to a state and no value is * specified for this parameter in the URL or transition, the * default value will be used instead. If `value` is a function, * it will be injected and invoked, and the return value used. * * *Note*: `undefined` is treated as "no default value" while `null` * is treated as "the default value is `null`". * * *Shorthand*: If you only need to configure the default value of the * parameter, you may use a shorthand syntax. In the **`params`** * map, instead mapping the param name to a full parameter configuration * object, simply set map it to the default parameter value, e.g.: * * <pre>// define a parameter's default value
* params: { * param1: { value: "defaultValue" } * } * // shorthand default values
* params: { * param1: "defaultValue", * param2: "param2Default" * }</pre> * * - ** array ** - {boolean=}: *(default: false)* If true, the param value will be * treated as an array of values. If you specified a Type, the value will be * treated as an array of the specified Type. Note: query parameter values * default to a special `"auto"` mode. * * For query parameters in `"auto"` mode, if multiple values for a single parameter * are present in the URL (e.g.: `/foo?bar=1&bar=2&bar=3`) then the values * are mapped to an array (e.g.: `{ foo: [ '1', '2', '3' ] }`). However, if * only one value is present (e.g.: `/foo?bar=1`) then the value is treated as single * value (e.g.: `{ foo: '1' }`). * * <pre>params: { * param1: { array: true } * }</pre> * * - ** squash ** - {bool|string=}: `squash` configures how a default parameter value is represented in the URL when * the current parameter value is the same as the default value. If `squash` is not set, it uses the * configured default squash policy. * (See {@link ui.router.util.$urlMatcherFactory#methods_defaultSquashPolicy `defaultSquashPolicy()`}) * * There are three squash settings: * * - false: The parameter's default value is not squashed. It is encoded and included in the URL * - true: The parameter's default value is omitted from the URL. If the parameter is preceeded and followed * by slashes in the state's `url` declaration, then one of those slashes are omitted. * This can allow for cleaner looking URLs. * - `"<arbitrary string>"`: The parameter's default value is replaced with an arbitrary placeholder of your choice. * * <pre>params: { * param1: { * value: "defaultId", * squash: true * } } * // squash "defaultValue" to "~"
* params: { * param1: { * value: "defaultValue", * squash: "~" * } } * </pre> * * * @example * <pre> * // Some state name examples
* * // stateName can be a single top-level name (must be unique).
* $stateProvider.state("home", {}); * * // Or it can be a nested state name. This state is a child of the
* // above "home" state.
* $stateProvider.state("home.newest", {}); * * // Nest states as deeply as needed.
* $stateProvider.state("home.newest.abc.xyz.inception", {}); * * // state() returns $stateProvider, so you can chain state declarations.
* $stateProvider * .state("home", {}) * .state("about", {}) * .state("contacts", {}); * </pre> * */ this.state = state; function state(name, definition) { /*jshint validthis: true */ if (isObject(name)) definition = name; else definition.name = name; registerState(definition); return this; }
/** * @ngdoc object * @name ui.router.state.$state * * @requires $rootScope * @requires $q * @requires ui.router.state.$view * @requires $injector * @requires ui.router.util.$resolve * @requires ui.router.state.$stateParams * @requires ui.router.router.$urlRouter * * @property {object} params A param object, e.g. {sectionId: section.id)}, that * you'd like to test against the current active state. * @property {object} current A reference to the state's config object. However * you passed it in. Useful for accessing custom data. * @property {object} transition Currently pending transition. A promise that'll * resolve or reject. * * @description * `$state` service is responsible for representing states as well as transitioning * between them. It also provides interfaces to ask for current state or even states * you're coming from. */ this.$get = $get; $get.$inject = ['$rootScope', '$q', '$view', '$injector', '$resolve', '$stateParams', '$urlRouter', '$location', '$urlMatcherFactory']; function $get( $rootScope, $q, $view, $injector, $resolve, $stateParams, $urlRouter, $location, $urlMatcherFactory) {
var TransitionSuperseded = $q.reject(new Error('transition superseded')); var TransitionPrevented = $q.reject(new Error('transition prevented')); var TransitionAborted = $q.reject(new Error('transition aborted')); var TransitionFailed = $q.reject(new Error('transition failed'));
// Handles the case where a state which is the target of a transition is not found, and the user
// can optionally retry or defer the transition
function handleRedirect(redirect, state, params, options) { /** * @ngdoc event * @name ui.router.state.$state#$stateNotFound * @eventOf ui.router.state.$state * @eventType broadcast on root scope * @description * Fired when a requested state **cannot be found** using the provided state name during transition. * The event is broadcast allowing any handlers a single chance to deal with the error (usually by * lazy-loading the unfound state). A special `unfoundState` object is passed to the listener handler, * you can see its three properties in the example. You can use `event.preventDefault()` to abort the * transition and the promise returned from `go` will be rejected with a `'transition aborted'` value. * * @param {Object} event Event object. * @param {Object} unfoundState Unfound State information. Contains: `to, toParams, options` properties. * @param {State} fromState Current state object. * @param {Object} fromParams Current state params. * * @example * * <pre> * // somewhere, assume lazy.state has not been defined
* $state.go("lazy.state", {a:1, b:2}, {inherit:false}); * * // somewhere else
* $scope.$on('$stateNotFound', * function(event, unfoundState, fromState, fromParams){ * console.log(unfoundState.to); // "lazy.state"
* console.log(unfoundState.toParams); // {a:1, b:2}
* console.log(unfoundState.options); // {inherit:false} + default options
* }) * </pre> */ var evt = $rootScope.$broadcast('$stateNotFound', redirect, state, params);
if (evt.defaultPrevented) { $urlRouter.update(); return TransitionAborted; }
if (!evt.retry) { return null; }
// Allow the handler to return a promise to defer state lookup retry
if (options.$retry) { $urlRouter.update(); return TransitionFailed; } var retryTransition = $state.transition = $q.when(evt.retry);
retryTransition.then(function() { if (retryTransition !== $state.transition) return TransitionSuperseded; redirect.options.$retry = true; return $state.transitionTo(redirect.to, redirect.toParams, redirect.options); }, function() { return TransitionAborted; }); $urlRouter.update();
return retryTransition; }
root.locals = { resolve: null, globals: { $stateParams: {} } };
$state = { params: {}, current: root.self, $current: root, transition: null };
/** * @ngdoc function * @name ui.router.state.$state#reload * @methodOf ui.router.state.$state * * @description * A method that force reloads the current state. All resolves are re-resolved, events are not re-fired, * and controllers reinstantiated (bug with controllers reinstantiating right now, fixing soon). * * @example * <pre> * var app angular.module('app', ['ui.router']); * * app.controller('ctrl', function ($scope, $state) { * $scope.reload = function(){ * $state.reload(); * } * }); * </pre> * * `reload()` is just an alias for: * <pre> * $state.transitionTo($state.current, $stateParams, { * reload: true, inherit: false, notify: true * }); * </pre> * * @returns {promise} A promise representing the state of the new transition. See * {@link ui.router.state.$state#methods_go $state.go}. */ $state.reload = function reload() { return $state.transitionTo($state.current, $stateParams, { reload: true, inherit: false, notify: true }); };
/** * @ngdoc function * @name ui.router.state.$state#go * @methodOf ui.router.state.$state * * @description * Convenience method for transitioning to a new state. `$state.go` calls * `$state.transitionTo` internally but automatically sets options to * `{ location: true, inherit: true, relative: $state.$current, notify: true }`. * This allows you to easily use an absolute or relative to path and specify * only the parameters you'd like to update (while letting unspecified parameters * inherit from the currently active ancestor states). * * @example * <pre> * var app = angular.module('app', ['ui.router']); * * app.controller('ctrl', function ($scope, $state) { * $scope.changeState = function () { * $state.go('contact.detail'); * }; * }); * </pre> * <img src='../ngdoc_assets/StateGoExamples.png'/> * * @param {string} to Absolute state name or relative state path. Some examples: * * - `$state.go('contact.detail')` - will go to the `contact.detail` state * - `$state.go('^')` - will go to a parent state * - `$state.go('^.sibling')` - will go to a sibling state * - `$state.go('.child.grandchild')` - will go to grandchild state * * @param {object=} params A map of the parameters that will be sent to the state, * will populate $stateParams. Any parameters that are not specified will be inherited from currently * defined parameters. This allows, for example, going to a sibling state that shares parameters * specified in a parent state. Parameter inheritance only works between common ancestor states, I.e. * transitioning to a sibling will get you the parameters for all parents, transitioning to a child * will get you all current parameters, etc. * @param {object=} options Options object. The options are: * * - **`location`** - {boolean=true|string=} - If `true` will update the url in the location bar, if `false` * will not. If string, must be `"replace"`, which will update url and also replace last history record. * - **`inherit`** - {boolean=true}, If `true` will inherit url parameters from current url. * - **`relative`** - {object=$state.$current}, When transitioning with relative path (e.g '^'), * defines which state to be relative from. * - **`notify`** - {boolean=true}, If `true` will broadcast $stateChangeStart and $stateChangeSuccess events. * - **`reload`** (v0.2.5) - {boolean=false}, If `true` will force transition even if the state or params * have not changed, aka a reload of the same state. It differs from reloadOnSearch because you'd * use this when you want to force a reload when *everything* is the same, including search params. * * @returns {promise} A promise representing the state of the new transition. * * Possible success values: * * - $state.current * * <br/>Possible rejection values: * * - 'transition superseded' - when a newer transition has been started after this one * - 'transition prevented' - when `event.preventDefault()` has been called in a `$stateChangeStart` listener * - 'transition aborted' - when `event.preventDefault()` has been called in a `$stateNotFound` listener or * when a `$stateNotFound` `event.retry` promise errors. * - 'transition failed' - when a state has been unsuccessfully found after 2 tries. * - *resolve error* - when an error has occurred with a `resolve` * */ $state.go = function go(to, params, options) { return $state.transitionTo(to, params, extend({ inherit: true, relative: $state.$current }, options)); };
/** * @ngdoc function * @name ui.router.state.$state#transitionTo * @methodOf ui.router.state.$state * * @description * Low-level method for transitioning to a new state. {@link ui.router.state.$state#methods_go $state.go} * uses `transitionTo` internally. `$state.go` is recommended in most situations. * * @example * <pre> * var app = angular.module('app', ['ui.router']); * * app.controller('ctrl', function ($scope, $state) { * $scope.changeState = function () { * $state.transitionTo('contact.detail'); * }; * }); * </pre> * * @param {string} to State name. * @param {object=} toParams A map of the parameters that will be sent to the state, * will populate $stateParams. * @param {object=} options Options object. The options are: * * - **`location`** - {boolean=true|string=} - If `true` will update the url in the location bar, if `false` * will not. If string, must be `"replace"`, which will update url and also replace last history record. * - **`inherit`** - {boolean=false}, If `true` will inherit url parameters from current url. * - **`relative`** - {object=}, When transitioning with relative path (e.g '^'), * defines which state to be relative from. * - **`notify`** - {boolean=true}, If `true` will broadcast $stateChangeStart and $stateChangeSuccess events. * - **`reload`** (v0.2.5) - {boolean=false}, If `true` will force transition even if the state or params * have not changed, aka a reload of the same state. It differs from reloadOnSearch because you'd * use this when you want to force a reload when *everything* is the same, including search params. * * @returns {promise} A promise representing the state of the new transition. See * {@link ui.router.state.$state#methods_go $state.go}. */ $state.transitionTo = function transitionTo(to, toParams, options) { toParams = toParams || {}; options = extend({ location: true, inherit: false, relative: null, notify: true, reload: false, $retry: false }, options || {});
var from = $state.$current, fromParams = $state.params, fromPath = from.path; var evt, toState = findState(to, options.relative);
if (!isDefined(toState)) { var redirect = { to: to, toParams: toParams, options: options }; var redirectResult = handleRedirect(redirect, from.self, fromParams, options);
if (redirectResult) { return redirectResult; }
// Always retry once if the $stateNotFound was not prevented
// (handles either redirect changed or state lazy-definition)
to = redirect.to; toParams = redirect.toParams; options = redirect.options; toState = findState(to, options.relative);
if (!isDefined(toState)) { if (!options.relative) throw new Error("No such state '" + to + "'"); throw new Error("Could not resolve '" + to + "' from state '" + options.relative + "'"); } } if (toState[abstractKey]) throw new Error("Cannot transition to abstract state '" + to + "'"); if (options.inherit) toParams = inheritParams($stateParams, toParams || {}, $state.$current, toState); if (!toState.params.$$validates(toParams)) return TransitionFailed;
toParams = toState.params.$$values(toParams); to = toState;
var toPath = to.path;
// Starting from the root of the path, keep all levels that haven't changed
var keep = 0, state = toPath[keep], locals = root.locals, toLocals = [];
if (!options.reload) { while (state && state === fromPath[keep] && state.ownParams.$$equals(toParams, fromParams)) { locals = toLocals[keep] = state.locals; keep++; state = toPath[keep]; } }
// If we're going to the same state and all locals are kept, we've got nothing to do.
// But clear 'transition', as we still want to cancel any other pending transitions.
// TODO: We may not want to bump 'transition' if we're called from a location change
// that we've initiated ourselves, because we might accidentally abort a legitimate
// transition initiated from code?
if (shouldTriggerReload(to, from, locals, options)) { if (to.self.reloadOnSearch !== false) $urlRouter.update(); $state.transition = null; return $q.when($state.current); }
// Filter parameters before we pass them to event handlers etc.
toParams = filterByKeys(to.params.$$keys(), toParams || {});
// Broadcast start event and cancel the transition if requested
if (options.notify) { /** * @ngdoc event * @name ui.router.state.$state#$stateChangeStart * @eventOf ui.router.state.$state * @eventType broadcast on root scope * @description * Fired when the state transition **begins**. You can use `event.preventDefault()` * to prevent the transition from happening and then the transition promise will be * rejected with a `'transition prevented'` value. * * @param {Object} event Event object. * @param {State} toState The state being transitioned to. * @param {Object} toParams The params supplied to the `toState`. * @param {State} fromState The current state, pre-transition. * @param {Object} fromParams The params supplied to the `fromState`. * * @example * * <pre> * $rootScope.$on('$stateChangeStart', * function(event, toState, toParams, fromState, fromParams){ * event.preventDefault(); * // transitionTo() promise will be rejected with
* // a 'transition prevented' error
* }) * </pre> */ if ($rootScope.$broadcast('$stateChangeStart', to.self, toParams, from.self, fromParams).defaultPrevented) { $urlRouter.update(); return TransitionPrevented; } }
// Resolve locals for the remaining states, but don't update any global state just
// yet -- if anything fails to resolve the current state needs to remain untouched.
// We also set up an inheritance chain for the locals here. This allows the view directive
// to quickly look up the correct definition for each view in the current state. Even
// though we create the locals object itself outside resolveState(), it is initially
// empty and gets filled asynchronously. We need to keep track of the promise for the
// (fully resolved) current locals, and pass this down the chain.
var resolved = $q.when(locals);
for (var l = keep; l < toPath.length; l++, state = toPath[l]) { locals = toLocals[l] = inherit(locals); resolved = resolveState(state, toParams, state === to, resolved, locals, options); }
// Once everything is resolved, we are ready to perform the actual transition
// and return a promise for the new state. We also keep track of what the
// current promise is, so that we can detect overlapping transitions and
// keep only the outcome of the last transition.
var transition = $state.transition = resolved.then(function () { var l, entering, exiting;
if ($state.transition !== transition) return TransitionSuperseded;
// Exit 'from' states not kept
for (l = fromPath.length - 1; l >= keep; l--) { exiting = fromPath[l]; if (exiting.self.onExit) { $injector.invoke(exiting.self.onExit, exiting.self, exiting.locals.globals); } exiting.locals = null; }
// Enter 'to' states not kept
for (l = keep; l < toPath.length; l++) { entering = toPath[l]; entering.locals = toLocals[l]; if (entering.self.onEnter) { $injector.invoke(entering.self.onEnter, entering.self, entering.locals.globals); } }
// Run it again, to catch any transitions in callbacks
if ($state.transition !== transition) return TransitionSuperseded;
// Update globals in $state
$state.$current = to; $state.current = to.self; $state.params = toParams; copy($state.params, $stateParams); $state.transition = null;
if (options.location && to.navigable) { $urlRouter.push(to.navigable.url, to.navigable.locals.globals.$stateParams, { $$avoidResync: true, replace: options.location === 'replace' }); }
if (options.notify) { /** * @ngdoc event * @name ui.router.state.$state#$stateChangeSuccess * @eventOf ui.router.state.$state * @eventType broadcast on root scope * @description * Fired once the state transition is **complete**. * * @param {Object} event Event object. * @param {State} toState The state being transitioned to. * @param {Object} toParams The params supplied to the `toState`. * @param {State} fromState The current state, pre-transition. * @param {Object} fromParams The params supplied to the `fromState`. */ $rootScope.$broadcast('$stateChangeSuccess', to.self, toParams, from.self, fromParams); } $urlRouter.update(true);
return $state.current; }, function (error) { if ($state.transition !== transition) return TransitionSuperseded;
$state.transition = null; /** * @ngdoc event * @name ui.router.state.$state#$stateChangeError * @eventOf ui.router.state.$state * @eventType broadcast on root scope * @description * Fired when an **error occurs** during transition. It's important to note that if you * have any errors in your resolve functions (javascript errors, non-existent services, etc) * they will not throw traditionally. You must listen for this $stateChangeError event to * catch **ALL** errors. * * @param {Object} event Event object. * @param {State} toState The state being transitioned to. * @param {Object} toParams The params supplied to the `toState`. * @param {State} fromState The current state, pre-transition. * @param {Object} fromParams The params supplied to the `fromState`. * @param {Error} error The resolve error object. */ evt = $rootScope.$broadcast('$stateChangeError', to.self, toParams, from.self, fromParams, error);
if (!evt.defaultPrevented) { $urlRouter.update(); }
return $q.reject(error); });
return transition; };
/** * @ngdoc function * @name ui.router.state.$state#is * @methodOf ui.router.state.$state * * @description * Similar to {@link ui.router.state.$state#methods_includes $state.includes}, * but only checks for the full state name. If params is supplied then it will be * tested for strict equality against the current active params object, so all params * must match with none missing and no extras. * * @example * <pre> * $state.$current.name = 'contacts.details.item'; * * // absolute name
* $state.is('contact.details.item'); // returns true
* $state.is(contactDetailItemStateObject); // returns true
* * // relative name (. and ^), typically from a template
* // E.g. from the 'contacts.details' template
* <div ng-class="{highlighted: $state.is('.item')}">Item</div> * </pre> * * @param {string|object} stateOrName The state name (absolute or relative) or state object you'd like to check. * @param {object=} params A param object, e.g. `{sectionId: section.id}`, that you'd like * to test against the current active state. * @param {object=} options An options object. The options are: * * - **`relative`** - {string|object} - If `stateOrName` is a relative state name and `options.relative` is set, .is will * test relative to `options.relative` state (or name). * * @returns {boolean} Returns true if it is the state. */ $state.is = function is(stateOrName, params, options) { options = extend({ relative: $state.$current }, options || {}); var state = findState(stateOrName, options.relative);
if (!isDefined(state)) { return undefined; } if ($state.$current !== state) { return false; } return params ? equalForKeys(state.params.$$values(params), $stateParams) : true; };
/** * @ngdoc function * @name ui.router.state.$state#includes * @methodOf ui.router.state.$state * * @description * A method to determine if the current active state is equal to or is the child of the * state stateName. If any params are passed then they will be tested for a match as well. * Not all the parameters need to be passed, just the ones you'd like to test for equality. * * @example * Partial and relative names * <pre> * $state.$current.name = 'contacts.details.item'; * * // Using partial names
* $state.includes("contacts"); // returns true
* $state.includes("contacts.details"); // returns true
* $state.includes("contacts.details.item"); // returns true
* $state.includes("contacts.list"); // returns false
* $state.includes("about"); // returns false
* * // Using relative names (. and ^), typically from a template
* // E.g. from the 'contacts.details' template
* <div ng-class="{highlighted: $state.includes('.item')}">Item</div> * </pre> * * Basic globbing patterns * <pre> * $state.$current.name = 'contacts.details.item.url'; * * $state.includes("*.details.*.*"); // returns true
* $state.includes("*.details.**"); // returns true
* $state.includes("**.item.**"); // returns true
* $state.includes("*.details.item.url"); // returns true
* $state.includes("*.details.*.url"); // returns true
* $state.includes("*.details.*"); // returns false
* $state.includes("item.**"); // returns false
* </pre> * * @param {string} stateOrName A partial name, relative name, or glob pattern * to be searched for within the current state name. * @param {object=} params A param object, e.g. `{sectionId: section.id}`, * that you'd like to test against the current active state. * @param {object=} options An options object. The options are: * * - **`relative`** - {string|object=} - If `stateOrName` is a relative state reference and `options.relative` is set, * .includes will test relative to `options.relative` state (or name). * * @returns {boolean} Returns true if it does include the state */ $state.includes = function includes(stateOrName, params, options) { options = extend({ relative: $state.$current }, options || {}); if (isString(stateOrName) && isGlob(stateOrName)) { if (!doesStateMatchGlob(stateOrName)) { return false; } stateOrName = $state.$current.name; }
var state = findState(stateOrName, options.relative); if (!isDefined(state)) { return undefined; } if (!isDefined($state.$current.includes[state.name])) { return false; } return params ? equalForKeys(state.params.$$values(params), $stateParams, objectKeys(params)) : true; };
/** * @ngdoc function * @name ui.router.state.$state#href * @methodOf ui.router.state.$state * * @description * A url generation method that returns the compiled url for the given state populated with the given params. * * @example * <pre> * expect($state.href("about.person", { person: "bob" })).toEqual("/about/bob"); * </pre> * * @param {string|object} stateOrName The state name or state object you'd like to generate a url from. * @param {object=} params An object of parameter values to fill the state's required parameters. * @param {object=} options Options object. The options are: * * - **`lossy`** - {boolean=true} - If true, and if there is no url associated with the state provided in the * first parameter, then the constructed href url will be built from the first navigable ancestor (aka * ancestor with a valid url). * - **`inherit`** - {boolean=true}, If `true` will inherit url parameters from current url. * - **`relative`** - {object=$state.$current}, When transitioning with relative path (e.g '^'), * defines which state to be relative from. * - **`absolute`** - {boolean=false}, If true will generate an absolute url, e.g. "http://www.example.com/fullurl". * * @returns {string} compiled state url */ $state.href = function href(stateOrName, params, options) { options = extend({ lossy: true, inherit: true, absolute: false, relative: $state.$current }, options || {});
var state = findState(stateOrName, options.relative);
if (!isDefined(state)) return null; if (options.inherit) params = inheritParams($stateParams, params || {}, $state.$current, state); var nav = (state && options.lossy) ? state.navigable : state;
if (!nav || nav.url === undefined || nav.url === null) { return null; } return $urlRouter.href(nav.url, filterByKeys(state.params.$$keys(), params || {}), { absolute: options.absolute }); };
/** * @ngdoc function * @name ui.router.state.$state#get * @methodOf ui.router.state.$state * * @description * Returns the state configuration object for any specific state or all states. * * @param {string|object=} stateOrName (absolute or relative) If provided, will only get the config for * the requested state. If not provided, returns an array of ALL state configs. * @param {string|object=} context When stateOrName is a relative state reference, the state will be retrieved relative to context. * @returns {Object|Array} State configuration object or array of all objects. */ $state.get = function (stateOrName, context) { if (arguments.length === 0) return map(objectKeys(states), function(name) { return states[name].self; }); var state = findState(stateOrName, context || $state.$current); return (state && state.self) ? state.self : null; };
function resolveState(state, params, paramsAreFiltered, inherited, dst, options) { // Make a restricted $stateParams with only the parameters that apply to this state if
// necessary. In addition to being available to the controller and onEnter/onExit callbacks,
// we also need $stateParams to be available for any $injector calls we make during the
// dependency resolution process.
var $stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params.$$keys(), params); var locals = { $stateParams: $stateParams };
// Resolve 'global' dependencies for the state, i.e. those not specific to a view.
// We're also including $stateParams in this; that way the parameters are restricted
// to the set that should be visible to the state, and are independent of when we update
// the global $state and $stateParams values.
dst.resolve = $resolve.resolve(state.resolve, locals, dst.resolve, state); var promises = [dst.resolve.then(function (globals) { dst.globals = globals; })]; if (inherited) promises.push(inherited);
// Resolve template and dependencies for all views.
forEach(state.views, function (view, name) { var injectables = (view.resolve && view.resolve !== state.resolve ? view.resolve : {}); injectables.$template = [ function () { return $view.load(name, { view: view, locals: locals, params: $stateParams, notify: options.notify }) || ''; }];
promises.push($resolve.resolve(injectables, locals, dst.resolve, state).then(function (result) { // References to the controller (only instantiated at link time)
if (isFunction(view.controllerProvider) || isArray(view.controllerProvider)) { var injectLocals = angular.extend({}, injectables, locals); result.$$controller = $injector.invoke(view.controllerProvider, null, injectLocals); } else { result.$$controller = view.controller; } // Provide access to the state itself for internal use
result.$$state = state; result.$$controllerAs = view.controllerAs; dst[name] = result; })); });
// Wait for all the promises and then return the activation object
return $q.all(promises).then(function (values) { return dst; }); }
return $state; }
function shouldTriggerReload(to, from, locals, options) { if (to === from && ((locals === from.locals && !options.reload) || (to.self.reloadOnSearch === false))) { return true; } } }
angular.module('ui.router.state') .value('$stateParams', {}) .provider('$state', $StateProvider);
$ViewProvider.$inject = []; function $ViewProvider() {
this.$get = $get; /** * @ngdoc object * @name ui.router.state.$view * * @requires ui.router.util.$templateFactory * @requires $rootScope * * @description * */ $get.$inject = ['$rootScope', '$templateFactory']; function $get( $rootScope, $templateFactory) { return { // $view.load('full.viewName', { template: ..., controller: ..., resolve: ..., async: false, params: ... })
/** * @ngdoc function * @name ui.router.state.$view#load * @methodOf ui.router.state.$view * * @description * * @param {string} name name * @param {object} options option object. */ load: function load(name, options) { var result, defaults = { template: null, controller: null, view: null, locals: null, notify: true, async: true, params: {} }; options = extend(defaults, options);
if (options.view) { result = $templateFactory.fromConfig(options.view, options.params, options.locals); } if (result && options.notify) { /** * @ngdoc event * @name ui.router.state.$state#$viewContentLoading * @eventOf ui.router.state.$view * @eventType broadcast on root scope * @description * * Fired once the view **begins loading**, *before* the DOM is rendered. * * @param {Object} event Event object. * @param {Object} viewConfig The view config properties (template, controller, etc). * * @example * * <pre> * $scope.$on('$viewContentLoading', * function(event, viewConfig){ * // Access to all the view config properties.
* // and one special property 'targetView'
* // viewConfig.targetView
* }); * </pre> */ $rootScope.$broadcast('$viewContentLoading', options); } return result; } }; } }
angular.module('ui.router.state').provider('$view', $ViewProvider);
/** * @ngdoc object * @name ui.router.state.$uiViewScrollProvider * * @description * Provider that returns the {@link ui.router.state.$uiViewScroll} service function. */ function $ViewScrollProvider() {
var useAnchorScroll = false;
/** * @ngdoc function * @name ui.router.state.$uiViewScrollProvider#useAnchorScroll * @methodOf ui.router.state.$uiViewScrollProvider * * @description * Reverts back to using the core [`$anchorScroll`](http://docs.angularjs.org/api/ng.$anchorScroll) service for
* scrolling based on the url anchor. */ this.useAnchorScroll = function () { useAnchorScroll = true; };
/** * @ngdoc object * @name ui.router.state.$uiViewScroll * * @requires $anchorScroll * @requires $timeout * * @description * When called with a jqLite element, it scrolls the element into view (after a * `$timeout` so the DOM has time to refresh). * * If you prefer to rely on `$anchorScroll` to scroll the view to the anchor, * this can be enabled by calling {@link ui.router.state.$uiViewScrollProvider#methods_useAnchorScroll `$uiViewScrollProvider.useAnchorScroll()`}. */ this.$get = ['$anchorScroll', '$timeout', function ($anchorScroll, $timeout) { if (useAnchorScroll) { return $anchorScroll; }
return function ($element) { $timeout(function () { $element[0].scrollIntoView(); }, 0, false); }; }]; }
angular.module('ui.router.state').provider('$uiViewScroll', $ViewScrollProvider);
/** * @ngdoc directive * @name ui.router.state.directive:ui-view * * @requires ui.router.state.$state * @requires $compile * @requires $controller * @requires $injector * @requires ui.router.state.$uiViewScroll * @requires $document * * @restrict ECA * * @description * The ui-view directive tells $state where to place your templates. * * @param {string=} name A view name. The name should be unique amongst the other views in the * same state. You can have views of the same name that live in different states. * * @param {string=} autoscroll It allows you to set the scroll behavior of the browser window * when a view is populated. By default, $anchorScroll is overridden by ui-router's custom scroll * service, {@link ui.router.state.$uiViewScroll}. This custom service let's you * scroll ui-view elements into view when they are populated during a state activation. * * *Note: To revert back to old [`$anchorScroll`](http://docs.angularjs.org/api/ng.$anchorScroll)
* functionality, call `$uiViewScrollProvider.useAnchorScroll()`.* * * @param {string=} onload Expression to evaluate whenever the view updates. * * @example * A view can be unnamed or named. * <pre> * <!-- Unnamed --> * <div ui-view></div> * * <!-- Named --> * <div ui-view="viewName"></div> * </pre> * * You can only have one unnamed view within any template (or root html). If you are only using a * single view and it is unnamed then you can populate it like so: * <pre> * <div ui-view></div> * $stateProvider.state("home", { * template: "<h1>HELLO!</h1>" * }) * </pre> * * The above is a convenient shortcut equivalent to specifying your view explicitly with the {@link ui.router.state.$stateProvider#views `views`} * config property, by name, in this case an empty name: * <pre> * $stateProvider.state("home", { * views: { * "": { * template: "<h1>HELLO!</h1>" * } * } * }) * </pre> * * But typically you'll only use the views property if you name your view or have more than one view * in the same template. There's not really a compelling reason to name a view if its the only one, * but you could if you wanted, like so: * <pre> * <div ui-view="main"></div> * </pre> * <pre> * $stateProvider.state("home", { * views: { * "main": { * template: "<h1>HELLO!</h1>" * } * } * }) * </pre> * * Really though, you'll use views to set up multiple views: * <pre> * <div ui-view></div> * <div ui-view="chart"></div> * <div ui-view="data"></div> * </pre> * * <pre> * $stateProvider.state("home", { * views: { * "": { * template: "<h1>HELLO!</h1>" * }, * "chart": { * template: "<chart_thing/>" * }, * "data": { * template: "<data_thing/>" * } * } * }) * </pre> * * Examples for `autoscroll`: * * <pre> * <!-- If autoscroll present with no expression, * then scroll ui-view into view --> * <ui-view autoscroll/> * * <!-- If autoscroll present with valid expression, * then scroll ui-view into view if expression evaluates to true --> * <ui-view autoscroll='true'/> * <ui-view autoscroll='false'/> * <ui-view autoscroll='scopeVariable'/> * </pre> */ $ViewDirective.$inject = ['$state', '$injector', '$uiViewScroll', '$interpolate']; function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate) {
function getService() { return ($injector.has) ? function(service) { return $injector.has(service) ? $injector.get(service) : null; } : function(service) { try { return $injector.get(service); } catch (e) { return null; } }; }
var service = getService(), $animator = service('$animator'), $animate = service('$animate');
// Returns a set of DOM manipulation functions based on which Angular version
// it should use
function getRenderer(attrs, scope) { var statics = function() { return { enter: function (element, target, cb) { target.after(element); cb(); }, leave: function (element, cb) { element.remove(); cb(); } }; };
if ($animate) { return { enter: function(element, target, cb) { var promise = $animate.enter(element, null, target, cb); if (promise && promise.then) promise.then(cb); }, leave: function(element, cb) { var promise = $animate.leave(element, cb); if (promise && promise.then) promise.then(cb); } }; }
if ($animator) { var animate = $animator && $animator(scope, attrs);
return { enter: function(element, target, cb) {animate.enter(element, null, target); cb(); }, leave: function(element, cb) { animate.leave(element); cb(); } }; }
return statics(); }
var directive = { restrict: 'ECA', terminal: true, priority: 400, transclude: 'element', compile: function (tElement, tAttrs, $transclude) { return function (scope, $element, attrs) { var previousEl, currentEl, currentScope, latestLocals, onloadExp = attrs.onload || '', autoScrollExp = attrs.autoscroll, renderer = getRenderer(attrs, scope);
scope.$on('$stateChangeSuccess', function() { updateView(false); }); scope.$on('$viewContentLoading', function() { updateView(false); });
updateView(true);
function cleanupLastView() { if (previousEl) { previousEl.remove(); previousEl = null; }
if (currentScope) { currentScope.$destroy(); currentScope = null; }
if (currentEl) { renderer.leave(currentEl, function() { previousEl = null; });
previousEl = currentEl; currentEl = null; } }
function updateView(firstTime) { var newScope, name = getUiViewName(scope, attrs, $element, $interpolate), previousLocals = name && $state.$current && $state.$current.locals[name];
if (!firstTime && previousLocals === latestLocals) return; // nothing to do
newScope = scope.$new(); latestLocals = $state.$current.locals[name];
var clone = $transclude(newScope, function(clone) { renderer.enter(clone, $element, function onUiViewEnter() { if(currentScope) { currentScope.$emit('$viewContentAnimationEnded'); }
if (angular.isDefined(autoScrollExp) && !autoScrollExp || scope.$eval(autoScrollExp)) { $uiViewScroll(clone); } }); cleanupLastView(); });
currentEl = clone; currentScope = newScope; /** * @ngdoc event * @name ui.router.state.directive:ui-view#$viewContentLoaded * @eventOf ui.router.state.directive:ui-view * @eventType emits on ui-view directive scope * @description * * Fired once the view is **loaded**, *after* the DOM is rendered. * * @param {Object} event Event object. */ currentScope.$emit('$viewContentLoaded'); currentScope.$eval(onloadExp); } }; } };
return directive; }
$ViewDirectiveFill.$inject = ['$compile', '$controller', '$state', '$interpolate']; function $ViewDirectiveFill ( $compile, $controller, $state, $interpolate) { return { restrict: 'ECA', priority: -400, compile: function (tElement) { var initial = tElement.html(); return function (scope, $element, attrs) { var current = $state.$current, name = getUiViewName(scope, attrs, $element, $interpolate), locals = current && current.locals[name];
if (! locals) { return; }
$element.data('$uiView', { name: name, state: locals.$$state }); $element.html(locals.$template ? locals.$template : initial);
var link = $compile($element.contents());
if (locals.$$controller) { locals.$scope = scope; var controller = $controller(locals.$$controller, locals); if (locals.$$controllerAs) { scope[locals.$$controllerAs] = controller; } $element.data('$ngControllerController', controller); $element.children().data('$ngControllerController', controller); }
link(scope); }; } }; }
/** * Shared ui-view code for both directives: * Given scope, element, and its attributes, return the view's name */ function getUiViewName(scope, attrs, element, $interpolate) { var name = $interpolate(attrs.uiView || attrs.name || '')(scope); var inherited = element.inheritedData('$uiView'); return name.indexOf('@') >= 0 ? name : (name + '@' + (inherited ? inherited.state.name : '')); }
angular.module('ui.router.state').directive('uiView', $ViewDirective); angular.module('ui.router.state').directive('uiView', $ViewDirectiveFill);
function parseStateRef(ref, current) { var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed; if (preparsed) ref = current + '(' + preparsed[1] + ')'; parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/); if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'"); return { state: parsed[1], paramExpr: parsed[3] || null }; }
function stateContext(el) { var stateData = el.parent().inheritedData('$uiView');
if (stateData && stateData.state && stateData.state.name) { return stateData.state; } }
/** * @ngdoc directive * @name ui.router.state.directive:ui-sref * * @requires ui.router.state.$state * @requires $timeout * * @restrict A * * @description * A directive that binds a link (`<a>` tag) to a state. If the state has an associated * URL, the directive will automatically generate & update the `href` attribute via * the {@link ui.router.state.$state#methods_href $state.href()} method. Clicking * the link will trigger a state transition with optional parameters. * * Also middle-clicking, right-clicking, and ctrl-clicking on the link will be * handled natively by the browser. * * You can also use relative state paths within ui-sref, just like the relative * paths passed to `$state.go()`. You just need to be aware that the path is relative * to the state that the link lives in, in other words the state that loaded the * template containing the link. * * You can specify options to pass to {@link ui.router.state.$state#go $state.go()} * using the `ui-sref-opts` attribute. Options are restricted to `location`, `inherit`, * and `reload`. * * @example * Here's an example of how you'd use ui-sref and how it would compile. If you have the * following template: * <pre> * <a ui-sref="home">Home</a> | <a ui-sref="about">About</a> | <a ui-sref="{page: 2}">Next page</a> * * <ul> * <li ng-repeat="contact in contacts"> * <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a> * </li> * </ul> * </pre> * * Then the compiled html would be (assuming Html5Mode is off and current state is contacts): * <pre> * <a href="#/home" ui-sref="home">Home</a> | <a href="#/about" ui-sref="about">About</a> | <a href="#/contacts?page=2" ui-sref="{page: 2}">Next page</a> * * <ul> * <li ng-repeat="contact in contacts"> * <a href="#/contacts/1" ui-sref="contacts.detail({ id: contact.id })">Joe</a> * </li> * <li ng-repeat="contact in contacts"> * <a href="#/contacts/2" ui-sref="contacts.detail({ id: contact.id })">Alice</a> * </li> * <li ng-repeat="contact in contacts"> * <a href="#/contacts/3" ui-sref="contacts.detail({ id: contact.id })">Bob</a> * </li> * </ul> * * <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a> * </pre> * * @param {string} ui-sref 'stateName' can be any valid absolute or relative state * @param {Object} ui-sref-opts options to pass to {@link ui.router.state.$state#go $state.go()} */ $StateRefDirective.$inject = ['$state', '$timeout']; function $StateRefDirective($state, $timeout) { var allowedOptions = ['location', 'inherit', 'reload'];
return { restrict: 'A', require: ['?^uiSrefActive', '?^uiSrefActiveEq'], link: function(scope, element, attrs, uiSrefActive) { var ref = parseStateRef(attrs.uiSref, $state.current.name); var params = null, url = null, base = stateContext(element) || $state.$current; var newHref = null, isAnchor = element.prop("tagName") === "A"; var isForm = element[0].nodeName === "FORM"; var attr = isForm ? "action" : "href", nav = true;
var options = { relative: base, inherit: true }; var optionsOverride = scope.$eval(attrs.uiSrefOpts) || {};
angular.forEach(allowedOptions, function(option) { if (option in optionsOverride) { options[option] = optionsOverride[option]; } });
var update = function(newVal) { if (newVal) params = angular.copy(newVal); if (!nav) return;
newHref = $state.href(ref.state, params, options);
var activeDirective = uiSrefActive[1] || uiSrefActive[0]; if (activeDirective) { activeDirective.$$setStateInfo(ref.state, params); } if (newHref === null) { nav = false; return false; } attrs.$set(attr, newHref); };
if (ref.paramExpr) { scope.$watch(ref.paramExpr, function(newVal, oldVal) { if (newVal !== params) update(newVal); }, true); params = angular.copy(scope.$eval(ref.paramExpr)); } update();
if (isForm) return;
element.bind("click", function(e) { var button = e.which || e.button; if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) { // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
var transition = $timeout(function() { $state.go(ref.state, params, options); }); e.preventDefault();
// if the state has no URL, ignore one preventDefault from the <a> directive.
var ignorePreventDefaultCount = isAnchor && !newHref ? 1: 0; e.preventDefault = function() { if (ignorePreventDefaultCount-- <= 0) $timeout.cancel(transition); }; } }); } }; }
/** * @ngdoc directive * @name ui.router.state.directive:ui-sref-active * * @requires ui.router.state.$state * @requires ui.router.state.$stateParams * @requires $interpolate * * @restrict A * * @description * A directive working alongside ui-sref to add classes to an element when the * related ui-sref directive's state is active, and removing them when it is inactive. * The primary use-case is to simplify the special appearance of navigation menus * relying on `ui-sref`, by having the "active" state's menu button appear different, * distinguishing it from the inactive menu items. * * ui-sref-active can live on the same element as ui-sref or on a parent element. The first * ui-sref-active found at the same level or above the ui-sref will be used. * * Will activate when the ui-sref's target state or any child state is active. If you * need to activate only when the ui-sref target state is active and *not* any of * it's children, then you will use * {@link ui.router.state.directive:ui-sref-active-eq ui-sref-active-eq} * * @example * Given the following template: * <pre> * <ul> * <li ui-sref-active="active" class="item"> * <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a> * </li> * </ul> * </pre> * * * When the app state is "app.user" (or any children states), and contains the state parameter "user" with value "bilbobaggins", * the resulting HTML will appear as (note the 'active' class): * <pre> * <ul> * <li ui-sref-active="active" class="item active"> * <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a> * </li> * </ul> * </pre> * * The class name is interpolated **once** during the directives link time (any further changes to the * interpolated value are ignored). * * Multiple classes may be specified in a space-separated format: * <pre> * <ul> * <li ui-sref-active='class1 class2 class3'> * <a ui-sref="app.user">link</a> * </li> * </ul> * </pre> */
/** * @ngdoc directive * @name ui.router.state.directive:ui-sref-active-eq * * @requires ui.router.state.$state * @requires ui.router.state.$stateParams * @requires $interpolate * * @restrict A * * @description * The same as {@link ui.router.state.directive:ui-sref-active ui-sref-active} but will only activate * when the exact target state used in the `ui-sref` is active; no child states. * */ $StateRefActiveDirective.$inject = ['$state', '$stateParams', '$interpolate']; function $StateRefActiveDirective($state, $stateParams, $interpolate) { return { restrict: "A", controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) { var state, params, activeClass;
// There probably isn't much point in $observing this
// uiSrefActive and uiSrefActiveEq share the same directive object with some
// slight difference in logic routing
activeClass = $interpolate($attrs.uiSrefActiveEq || $attrs.uiSrefActive || '', false)($scope);
// Allow uiSref to communicate with uiSrefActive[Equals]
this.$$setStateInfo = function (newState, newParams) { state = $state.get(newState, stateContext($element)); params = newParams; update(); };
$scope.$on('$stateChangeSuccess', update);
// Update route state
function update() { if (isMatch()) { $element.addClass(activeClass); } else { $element.removeClass(activeClass); } }
function isMatch() { if (typeof $attrs.uiSrefActiveEq !== 'undefined') { return state && $state.is(state.name, params); } else { return state && $state.includes(state.name, params); } } }] }; }
angular.module('ui.router.state') .directive('uiSref', $StateRefDirective) .directive('uiSrefActive', $StateRefActiveDirective) .directive('uiSrefActiveEq', $StateRefActiveDirective);
/** * @ngdoc filter * @name ui.router.state.filter:isState * * @requires ui.router.state.$state * * @description * Translates to {@link ui.router.state.$state#methods_is $state.is("stateName")}. */ $IsStateFilter.$inject = ['$state']; function $IsStateFilter($state) { var isFilter = function (state) { return $state.is(state); }; isFilter.$stateful = true; return isFilter; }
/** * @ngdoc filter * @name ui.router.state.filter:includedByState * * @requires ui.router.state.$state * * @description * Translates to {@link ui.router.state.$state#methods_includes $state.includes('fullOrPartialStateName')}. */ $IncludedByStateFilter.$inject = ['$state']; function $IncludedByStateFilter($state) { var includesFilter = function (state) { return $state.includes(state); }; includesFilter.$stateful = true; return includesFilter; }
angular.module('ui.router.state') .filter('isState', $IsStateFilter) .filter('includedByState', $IncludedByStateFilter); })(window, window.angular);
|