angular-ui-router/site/partials/api/ui.router.util.type.Type.html

State-based routing for AngularJS

<h1><code ng:non-bindable="">Type</code>
<div><span class="hint">object in module <code ng:non-bindable="">ui.router.util</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="ui-router-util-type-page ui-router-util-type-type-page"><p>Implements an interface to define custom parameter types that can be decoded from and encoded to
string parameters matched in a URL. Used by <a href="#/api/ui.router.util.type:UrlMatcher"><code>UrlMatcher</code></a>
objects when matching or formatting URLs, or comparing or validating parameter values.</p>
<p>See <a href="#/api/ui.router.util.$urlMatcherFactory#methods_type"><code>$urlMatcherFactory#type()</code></a> for more
information on registering custom types.</p>
</div></div>
<h2 id="usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">Type(config);</pre>
<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-page"><p>A configuration object which contains the custom type definition.  The object&#39;s
properties will override the default methods and/or pattern in <code>Type</code>&#39;s public interface.</p>
</div></td></tr></tbody></table><h4 id="usage_returns">Returns</h4><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-page"><p>Returns a new <code>Type</code> object.</p>
</div></td></tr></table></div>
<div class="member method"><h2 id="methods">Methods</h2>
<ul class="methods"><li><h3 id="methods_decode">decode(val, key)</h3>
<div class="decode"><div class="ui-router-util-type-page ui-router-util-type-type-decode-page"><p>Converts a parameter value (from URL string or transition param) to a custom/native value.</p>
</div><h5 id="methods_decode_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>val</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-decode-page"><p>The URL parameter value to decode.</p>
</div></td></tr><tr><td>key</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-decode-page"><p>The name of the parameter in which <code>val</code> is stored. Can be used for
meta-programming of <code>Type</code> objects.</p>
</div></td></tr></tbody></table><h5 id="methods_decode_returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-object">*</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-decode-page"><p>Returns a custom representation of the URL parameter value.</p>
</div></td></tr></table></div>
</li>
<li><h3 id="methods_encode">encode(val, key)</h3>
<div class="encode"><div class="ui-router-util-type-page ui-router-util-type-type-encode-page"><p>Encodes a custom/native type value to a string that can be embedded in a URL. Note that the
return value does <em>not</em> need to be URL-safe (i.e. passed through <code>encodeURIComponent()</code>), it
only needs to be a representation of <code>val</code> that has been coerced to a string.</p>
</div><h5 id="methods_encode_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>val</td><td><a href="" class="label type-hint type-hint-object">*</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-encode-page"><p>The value to encode.</p>
</div></td></tr><tr><td>key</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-encode-page"><p>The name of the parameter in which <code>val</code> is stored. Can be used for
meta-programming of <code>Type</code> objects.</p>
</div></td></tr></tbody></table><h5 id="methods_encode_returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-encode-page"><p>Returns a string representation of <code>val</code> that can be encoded in a URL.</p>
</div></td></tr></table></div>
</li>
<li><h3 id="methods_equals">equals(a, b)</h3>
<div class="equals"><div class="ui-router-util-type-page ui-router-util-type-type-equals-page"><p>Determines whether two decoded values are equivalent.</p>
</div><h5 id="methods_equals_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>a</td><td><a href="" class="label type-hint type-hint-object">*</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-equals-page"><p>A value to compare against.</p>
</div></td></tr><tr><td>b</td><td><a href="" class="label type-hint type-hint-object">*</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-equals-page"><p>A value to compare against.</p>
</div></td></tr></tbody></table><h5 id="methods_equals_returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-boolean">Boolean</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-equals-page"><p>Returns <code>true</code> if the values are equivalent/equal, otherwise <code>false</code>.</p>
</div></td></tr></table></div>
</li>
<li><h3 id="methods_is">is(val, key)</h3>
<div class="is"><div class="ui-router-util-type-page ui-router-util-type-type-is-page"><p>Detects whether a value is of a particular type. Accepts a native (decoded) value
and determines whether it matches the current <code>Type</code> object.</p>
</div><h5 id="methods_is_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>val</td><td><a href="" class="label type-hint type-hint-object">*</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-is-page"><p>The value to check.</p>
</div></td></tr><tr><td>key</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-is-page"><p>Optional. If the type check is happening in the context of a specific
<a href="#/api/ui.router.util.type:UrlMatcher"><code>UrlMatcher</code></a> object, this is the name of the
parameter in which <code>val</code> is stored. Can be used for meta-programming of <code>Type</code> objects.</p>
</div></td></tr></tbody></table><h5 id="methods_is_returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-boolean">Boolean</a></td><td><div class="ui-router-util-type-page ui-router-util-type-type-is-page"><p>Returns <code>true</code> if the value matches the type, otherwise <code>false</code>.</p>
</div></td></tr></table></div>
</li>
</ul>
</div>
<div class="member property"><h2 id="properties">Properties</h2>
<ul class="properties"><li><h3 id="properties_pattern">pattern</h3>
<div class="pattern"><div class="ui-router-util-type-page ui-router-util-type-type-page"><p>The regular expression pattern used to match values of this type when
coming from a substring of a URL.</p>
</div></div>
</li>
</ul>
</div>
<h2 id="example">Example</h2>
<div class="example"><div class="ui-router-util-type-page ui-router-util-type-type-page"><pre class="prettyprint linenums">
{
  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>
</div></div>
</div>