Update everything

This commit is contained in:
Colin Frei 2013-04-07 10:12:25 +02:00
parent bf368181a4
commit 72a485d6e8
319 changed files with 67958 additions and 13948 deletions

View file

@ -0,0 +1,169 @@
<h1><code ng:non-bindable="">$injector</code>
<span class="hint">(service in module <code ng:non-bindable="">AUTO</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p><code>$injector</code> is used to retrieve object instances as defined by
<a href="api/AUTO.$provide"><code>provider</code></a>, instantiate types, invoke methods,
and load modules.</p>
<p>The following always holds true:</p>
<pre class="prettyprint linenums">
var $injector = angular.injector();
expect($injector.get('$injector')).toBe($injector);
expect($injector.invoke(function($injector){
return $injector;
}).toBe($injector);
</pre>
<h3>Injection Function Annotation</h3>
<p>JavaScript does not have annotations, and annotations are needed for dependency injection. The
following ways are all valid way of annotating function with injection arguments and are equivalent.</p>
<pre class="prettyprint linenums">
// inferred (only works if code not minified/obfuscated)
$inject.invoke(function(serviceA){});
// annotated
function explicit(serviceA) {};
explicit.$inject = ['serviceA'];
$inject.invoke(explicit);
// inline
$inject.invoke(['serviceA', function(serviceA){}]);
</pre>
<h4>Inference</h4>
<p>In JavaScript calling <code>toString()</code> on a function returns the function definition. The definition can then be
parsed and the function arguments can be extracted. <em>NOTE:</em> This does not work with minification, and obfuscation
tools since these tools change the argument names.</p>
<h4><code>$inject</code> Annotation</h4>
<p>By adding a <code>$inject</code> property onto a function the injection parameters can be specified.</p>
<h4>Inline</h4>
<p>As an array of injection names, where the last item in the array is the function to call.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="annotate">annotate(fn)</h3>
<div class="annotate"><p>Returns an array of service names which the function is requesting for injection. This API is used by the injector
to determine which services need to be injected into the function when the function is invoked. There are three
ways in which the function can be annotated with the needed dependencies.</p>
<h4>Argument names</h4>
<p>The simplest form is to extract the dependencies from the arguments of the function. This is done by converting
the function into a string using <code>toString()</code> method and extracting the argument names.
<pre class="prettyprint linenums">
// Given
function MyController($scope, $route) {
// ...
}
// Then
expect(injector.annotate(MyController)).toEqual(['$scope', '$route']);
</pre>
<p>This method does not work with code minfication / obfuscation. For this reason the following annotation strategies
are supported.</p>
<h4>The <code>$injector</code> property</h4>
<p>If a function has an <code>$inject</code> property and its value is an array of strings, then the strings represent names of
services to be injected into the function.
<pre class="prettyprint linenums">
// Given
var MyController = function(obfuscatedScope, obfuscatedRoute) {
// ...
}
// Define function dependencies
MyController.$inject = ['$scope', '$route'];
// Then
expect(injector.annotate(MyController)).toEqual(['$scope', '$route']);
</pre>
<h4>The array notation</h4>
<p>It is often desirable to inline Injected functions and that's when setting the <code>$inject</code> property is very
inconvenient. In these situations using the array notation to specify the dependencies in a way that survives
minification is a better choice:</p>
<pre class="prettyprint linenums">
// We wish to write this (not minification / obfuscation safe)
injector.invoke(function($compile, $rootScope) {
// ...
});
// We are forced to write break inlining
var tmpFn = function(obfuscatedCompile, obfuscatedRootScope) {
// ...
};
tmpFn.$inject = ['$compile', '$rootScope'];
injector.invoke(tempFn);
// To better support inline function the inline annotation is supported
injector.invoke(['$compile', '$rootScope', function(obfCompile, obfRootScope) {
// ...
}]);
// Therefore
expect(injector.annotate(
['$compile', '$rootScope', function(obfus_$compile, obfus_$rootScope) {}])
).toEqual(['$compile', '$rootScope']);
</pre><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">fn {function|Array.&lt;string|Function&gt;} </code>
<p>Function for which dependent service names need to be retrieved as described
above.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Array.&lt;string&gt;}</code>
<p>The names of the services which the function requires.</p></div>
</div>
</li>
<li><h3 id="get">get(name)</h3>
<div class="get"><p>Return an instance of the service.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>The name of the instance to retrieve.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{*}</code>
<p>The instance.</p></div>
</div>
</li>
<li><h3 id="instantiate">instantiate(Type, locals)</h3>
<div class="instantiate"><p>Create a new instance of JS type. The method takes a constructor function invokes the new operator and supplies
all of the arguments to the constructor function as specified by the constructor annotation.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">Type {function} </code>
<p>Annotated constructor function.</p></li>
<li><code ng:non-bindable="">locals<i>(optional)</i> {Object=} </code>
<p>Optional object. If preset then any argument names are read from this object first, before
the <code>$injector</code> is consulted.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>new instance of <code>Type</code>.</p></div>
</div>
</li>
<li><h3 id="invoke">invoke(fn, self, locals)</h3>
<div class="invoke"><p>Invoke the method and supply the method arguments from the <code>$injector</code>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">fn {!function} </code>
<p>The function to invoke. The function arguments come form the function annotation.</p></li>
<li><code ng:non-bindable="">self<i>(optional)</i> {Object=} </code>
<p>The <code>this</code> for the invoked method.</p></li>
<li><code ng:non-bindable="">locals<i>(optional)</i> {Object=} </code>
<p>Optional object. If preset then any argument names are read from this object first, before
the <code>$injector</code> is consulted.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{*}</code>
<p>the value returned by the invoked <code>fn</code> function.</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,138 @@
<h1><code ng:non-bindable="">$provide</code>
<span class="hint">(service in module <code ng:non-bindable="">AUTO</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Use <code>$provide</code> to register new providers with the <code>$injector</code>. The providers are the factories for the instance.
The providers share the same name as the instance they create with the <code>Provider</code> suffixed to them.</p>
<p>A provider is an object with a <code>$get()</code> method. The injector calls the <code>$get</code> method to create a new instance of
a service. The Provider can have additional methods which would allow for configuration of the provider.</p>
<pre class="prettyprint linenums">
function GreetProvider() {
var salutation = 'Hello';
this.salutation = function(text) {
salutation = text;
};
this.$get = function() {
return function (name) {
return salutation + ' ' + name + '!';
};
};
}
describe('Greeter', function(){
beforeEach(module(function($provide) {
$provide.provider('greet', GreetProvider);
});
it('should greet', inject(function(greet) {
expect(greet('angular')).toEqual('Hello angular!');
}));
it('should allow configuration of salutation', function() {
module(function(greetProvider) {
greetProvider.salutation('Ahoj');
});
inject(function(greet) {
expect(greet('angular')).toEqual('Ahoj angular!');
});
)};
});
</pre></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="constant">constant(name, value)</h3>
<div class="constant"><p>A constant value, but unlike <a href="api/AUTO.$provide#value"><code>value</code></a> it can be injected
into configuration function (other modules) and it is not interceptable by
<a href="api/AUTO.$provide#decorator"><code>decorator</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>The name of the constant.</p></li>
<li><code ng:non-bindable="">value {*} </code>
<p>The constant value.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>registered instance</p></div>
</div>
</li>
<li><h3 id="decorator">decorator(name, decorator)</h3>
<div class="decorator"><p>Decoration of service, allows the decorator to intercept the service instance creation. The
returned instance may be the original instance, or a new instance which delegates to the
original instance.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>The name of the service to decorate.</p></li>
<li><code ng:non-bindable="">decorator {function()} </code>
<p>This function will be invoked when the service needs to be
instanciated. The function is called using the <a href="api/AUTO.$injector#invoke"><code>injector.invoke</code></a> method and is therefore fully injectable. Local injection arguments:</p>
<ul>
<li><code>$delegate</code> - The original service instance, which can be monkey patched, configured,
decorated or delegated to.</li>
</ul></li>
</ul>
</div>
</li>
<li><h3 id="factory">factory(name, $getFn)</h3>
<div class="factory"><p>A short hand for configuring services if only <code>$get</code> method is required.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>The name of the instance.</p></li>
<li><code ng:non-bindable="">$getFn {function()} </code>
<p>The $getFn for the instance creation. Internally this is a short hand for
<code>$provide.provider(name, {$get: $getFn})</code>.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>registered provider instance</p></div>
</div>
</li>
<li><h3 id="provider">provider(name, provider)</h3>
<div class="provider"><p>Register a provider for a service. The providers can be retrieved and can have additional configuration methods.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>The name of the instance. NOTE: the provider will be available under <code>name + 'Provider'</code> key.</p></li>
<li><code ng:non-bindable="">provider {(Object|function())} </code>
<p>If the provider is:</p>
<ul>
<li><code>Object</code>: then it should have a <code>$get</code> method. The <code>$get</code> method will be invoked using
<a href="api/AUTO.$injector#invoke"><code>$injector.invoke()</code></a> when an instance needs to be created.</li>
<li><code>Constructor</code>: a new instance of the provider will be created using
<a href="api/AUTO.$injector#instantiate"><code>$injector.instantiate()</code></a>, then treated as <code>object</code>.</li>
</ul></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>registered provider instance</p></div>
</div>
</li>
<li><h3 id="service">service(name, constructor)</h3>
<div class="service"><p>A short hand for registering service of given class.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>The name of the instance.</p></li>
<li><code ng:non-bindable="">constructor {Function} </code>
<p>A class (constructor function) that will be instantiated.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>registered provider instance</p></div>
</div>
</li>
<li><h3 id="value">value(name, value)</h3>
<div class="value"><p>A short hand for configuring services if the <code>$get</code> method is a constant.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>The name of the instance.</p></li>
<li><code ng:non-bindable="">value {*} </code>
<p>The value.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>registered provider instance</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,4 @@
<h1><code ng:non-bindable=""></code>
<span class="hint"></span>
</h1>
<div><p>Implicit module which gets automatically added to each <a href="api/AUTO.$injector"><code>$injector</code></a>.</p></div>

View file

@ -0,0 +1,116 @@
<h1><code ng:non-bindable="">Module</code>
<span class="hint">(Type in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Interface for configuring angular <a href="api/angular.module"><code>modules</code></a>.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="config">config(configFn)</h3>
<div class="config"><p>Use this method to register work which needs to be performed on module loading.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">configFn {Function} </code>
<p>Execute this function on module load. Useful for service
configuration.</p></li>
</ul>
</div>
</li>
<li><h3 id="constant">constant(name, object)</h3>
<div class="constant"><p>Because the constant are fixed, they get applied before other provide methods.
See <a href="api/AUTO.$provide#constant"><code>$provide.constant()</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>constant name</p></li>
<li><code ng:non-bindable="">object {*} </code>
<p>Constant value.</p></li>
</ul>
</div>
</li>
<li><h3 id="controller">controller(name, constructor)</h3>
<div class="controller"><p>See <a href="api/ng.$controllerProvider#register"><code>$controllerProvider.register()</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>Controller name.</p></li>
<li><code ng:non-bindable="">constructor {Function} </code>
<p>Controller constructor function.</p></li>
</ul>
</div>
</li>
<li><h3 id="directive">directive(name, directiveFactory)</h3>
<div class="directive"><p>See <a href="api/ng.$compileProvider#directive"><code>$compileProvider.directive()</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>directive name</p></li>
<li><code ng:non-bindable="">directiveFactory {Function} </code>
<p>Factory function for creating new instance of
directives.</p></li>
</ul>
</div>
</li>
<li><h3 id="factory">factory(name, providerFunction)</h3>
<div class="factory"><p>See <a href="api/AUTO.$provide#factory"><code>$provide.factory()</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>service name</p></li>
<li><code ng:non-bindable="">providerFunction {Function} </code>
<p>Function for creating new instance of the service.</p></li>
</ul>
</div>
</li>
<li><h3 id="filter">filter(name, filterFactory)</h3>
<div class="filter"><p>See <a href="api/ng.$filterProvider#register"><code>$filterProvider.register()</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>Filter name.</p></li>
<li><code ng:non-bindable="">filterFactory {Function} </code>
<p>Factory function for creating new instance of filter.</p></li>
</ul>
</div>
</li>
<li><h3 id="provider">provider(name, providerType)</h3>
<div class="provider"><p>See <a href="api/AUTO.$provide#provider"><code>$provide.provider()</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>service name</p></li>
<li><code ng:non-bindable="">providerType {Function} </code>
<p>Construction function for creating new instance of the service.</p></li>
</ul>
</div>
</li>
<li><h3 id="run">run(initializationFn)</h3>
<div class="run"><p>Use this method to register work which should be performed when the injector is done
loading all modules.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">initializationFn {Function} </code>
<p>Execute this function after injector creation.
Useful for application initialization.</p></li>
</ul>
</div>
</li>
<li><h3 id="service">service(name, constructor)</h3>
<div class="service"><p>See <a href="api/AUTO.$provide#service"><code>$provide.service()</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>service name</p></li>
<li><code ng:non-bindable="">constructor {Function} </code>
<p>A constructor function that will be instantiated.</p></li>
</ul>
</div>
</li>
<li><h3 id="value">value(name, object)</h3>
<div class="value"><p>See <a href="api/AUTO.$provide#value"><code>$provide.value()</code></a>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>service name</p></li>
<li><code ng:non-bindable="">object {*} </code>
<p>Service instance object.</p></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="member property"><h2 id="Properties">Properties</h2>
<ul class="properties"><li><h3 id="name">name</h3>
<div class="name"><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>Name of the module.</p></div>
</div>
</li>
<li><h3 id="requires">requires</h3>
<div class="requires"><p>Holds the list of modules which the injector will load before the current module is loaded.</p><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Array.&lt;string&gt;}</code>
<p>List of module names which must be loaded before this module.</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,23 @@
<h1><code ng:non-bindable="">angular.bind</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Returns a function which calls function <code>fn</code> bound to <code>self</code> (<code>self</code> becomes the <code>this</code> for
<code>fn</code>). You can supply optional <code>args</code> that are are prebound to the function. This feature is also
known as <a href="http://en.wikipedia.org/wiki/Currying">function currying</a>.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.bind(self, fn, args);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">self {Object} </code>
<p>Context which <code>fn</code> should be evaluated in.</p></li>
<li><code ng:non-bindable="">fn {function()} </code>
<p>Function to be bound.</p></li>
<li><code ng:non-bindable="">args {...*} </code>
<p>Optional arguments to be prebound to the <code>fn</code> function call.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{function()}</code>
<p>Function that wraps the <code>fn</code> with all the specified bindings.</p></div>
</div>
</div>

View file

@ -0,0 +1,21 @@
<h1><code ng:non-bindable="">angular.bootstrap</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Use this function to manually start up angular application.</p>
<p>See: <a href="guide/bootstrap">Bootstrap</a></p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.bootstrap(element[, modules]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">element {Element} </code>
<p>DOM element which is the root of angular application.</p></li>
<li><code ng:non-bindable="">modules<i>(optional)</i> {Array&lt;String|Function&gt;=} </code>
<p>an array of module declarations. See: <a href="api/angular.module"><code>modules</code></a></p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{AUTO.$injector}</code>
<p>Returns the newly created injector for this app.</p></div>
</div>
</div>

View file

@ -0,0 +1,31 @@
<h1><code ng:non-bindable="">angular.copy</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Creates a deep copy of <code>source</code>, which should be an object or an array.</p>
<ul>
<li>If no destination is supplied, a copy of the object or array is created.</li>
<li>If a destination is provided, all of its elements (for array) or properties (for objects)
are deleted and then all elements/properties from the source are copied to it.</li>
<li>If <code>source</code> is not an object or array, <code>source</code> is returned.</li>
</ul>
<p>Note: this function is used to augment the Object type in Angular expressions. See
<a href="api/ng.$filter"><code>ng.$filter</code></a> for more information about Angular arrays.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.copy(source[, destination]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">source {*} </code>
<p>The source that will be used to make a copy.
Can be any type, including primitives, <code>null</code>, and <code>undefined</code>.</p></li>
<li><code ng:non-bindable="">destination<i>(optional)</i> {(Object|Array)=} </code>
<p>Destination into which the source is copied. If
provided, must be of the same type as <code>source</code>.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{*}</code>
<p>The copy or updated <code>destination</code>, if <code>destination</code> was specified.</p></div>
</div>
</div>

View file

@ -0,0 +1,80 @@
<h1><code ng:non-bindable="">angular.element</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Wraps a raw DOM element or HTML string as a <a href="http://jquery.com">jQuery</a> element.
<code>angular.element</code> can be either an alias for <a href="http://api.jquery.com/jQuery/">jQuery</a> function, if
jQuery is available, or a function that wraps the element or string in Angular's jQuery lite
implementation (commonly referred to as jqLite).</p>
<p>Real jQuery always takes precedence over jqLite, provided it was loaded before <code>DOMContentLoaded</code>
event fired.</p>
<p>jqLite is a tiny, API-compatible subset of jQuery that allows
Angular to manipulate the DOM. jqLite implements only the most commonly needed functionality
within a very small footprint, so only a subset of the jQuery API - methods, arguments and
invocation styles - are supported.</p>
<p>Note: All element references in Angular are always wrapped with jQuery or jqLite; they are never
raw DOM references.</p>
<h4>Angular's jQuery lite provides the following methods:</h4>
<ul>
<li><a href="http://api.jquery.com/addClass/">addClass()</a></li>
<li><a href="http://api.jquery.com/after/">after()</a></li>
<li><a href="http://api.jquery.com/append/">append()</a></li>
<li><a href="http://api.jquery.com/attr/">attr()</a></li>
<li><a href="http://api.jquery.com/bind/">bind()</a></li>
<li><a href="http://api.jquery.com/children/">children()</a></li>
<li><a href="http://api.jquery.com/clone/">clone()</a></li>
<li><a href="http://api.jquery.com/contents/">contents()</a></li>
<li><a href="http://api.jquery.com/css/">css()</a></li>
<li><a href="http://api.jquery.com/data/">data()</a></li>
<li><a href="http://api.jquery.com/eq/">eq()</a></li>
<li><a href="http://api.jquery.com/find/">find()</a> - Limited to lookups by tag name.</li>
<li><a href="http://api.jquery.com/hasClass/">hasClass()</a></li>
<li><a href="http://api.jquery.com/html/">html()</a></li>
<li><a href="http://api.jquery.com/next/">next()</a></li>
<li><a href="http://api.jquery.com/parent/">parent()</a></li>
<li><a href="http://api.jquery.com/prepend/">prepend()</a></li>
<li><a href="http://api.jquery.com/prop/">prop()</a></li>
<li><a href="http://api.jquery.com/ready/">ready()</a></li>
<li><a href="http://api.jquery.com/remove/">remove()</a></li>
<li><a href="http://api.jquery.com/removeAttr/">removeAttr()</a></li>
<li><a href="http://api.jquery.com/removeClass/">removeClass()</a></li>
<li><a href="http://api.jquery.com/removeData/">removeData()</a></li>
<li><a href="http://api.jquery.com/replaceWith/">replaceWith()</a></li>
<li><a href="http://api.jquery.com/text/">text()</a></li>
<li><a href="http://api.jquery.com/toggleClass/">toggleClass()</a></li>
<li><a href="http://api.jquery.com/triggerHandler/">triggerHandler()</a> - Doesn't pass native event objects to handlers.</li>
<li><a href="http://api.jquery.com/unbind/">unbind()</a></li>
<li><a href="http://api.jquery.com/val/">val()</a></li>
<li><a href="http://api.jquery.com/wrap/">wrap()</a></li>
</ul>
<h4>In addtion to the above, Angular provides additional methods to both jQuery and jQuery lite:</h4>
<ul>
<li><code>controller(name)</code> - retrieves the controller of the current element or its parent. By default
retrieves controller associated with the <code>ngController</code> directive. If <code>name</code> is provided as
camelCase directive name, then the controller for this directive will be retrieved (e.g.
<code>'ngModel'</code>).</li>
<li><code>injector()</code> - retrieves the injector of the current element or its parent.</li>
<li><code>scope()</code> - retrieves the <a href="api/ng.$rootScope.Scope"><code>scope</code></a> of the current
element or its parent.</li>
<li><code>inheritedData()</code> - same as <code>data()</code>, but walks up the DOM until a value is found or the top
parent element is reached.</li>
</ul></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.element(element);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">element {string|DOMElement} </code>
<p>HTML string or DOMElement to be wrapped into jQuery.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>jQuery object.</p></div>
</div>
</div>

View file

@ -0,0 +1,33 @@
<h1><code ng:non-bindable="">angular.equals</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if two objects or two values are equivalent. Supports value types, arrays and
objects.</p>
<p>Two objects or values are considered equivalent if at least one of the following is true:</p>
<ul>
<li>Both objects or values pass <code>===</code> comparison.</li>
<li>Both objects or values are of the same type and all of their properties pass <code>===</code> comparison.</li>
<li>Both values are NaN. (In JavasScript, NaN == NaN => false. But we consider two NaN as equal)</li>
</ul>
<p>During a property comparision, properties of <code>function</code> type and properties with names
that begin with <code>$</code> are ignored.</p>
<p>Scope and DOMWindow objects are being compared only be identify (<code>===</code>).</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.equals(o1, o2);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">o1 {*} </code>
<p>Object or value to compare.</p></li>
<li><code ng:non-bindable="">o2 {*} </code>
<p>Object or value to compare.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if arguments are equal.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.extend</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Extends the destination object <code>dst</code> by copying all of the properties from the <code>src</code> object(s)
to <code>dst</code>. You can specify multiple <code>src</code> objects.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.extend(dst, src);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">dst {Object} </code>
<p>Destination object.</p></li>
<li><code ng:non-bindable="">src {...Object} </code>
<p>Source object(s).</p></li>
</ul>
</div>
</div>

View file

@ -0,0 +1,35 @@
<h1><code ng:non-bindable="">angular.forEach</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Invokes the <code>iterator</code> function once for each item in <code>obj</code> collection, which can be either an
object or an array. The <code>iterator</code> function is invoked with <code>iterator(value, key)</code>, where <code>value</code>
is the value of an object property or an array element and <code>key</code> is the object property key or
array element index. Specifying a <code>context</code> for the function is optional.</p>
<p>Note: this function was previously known as <code>angular.foreach</code>.</p>
<pre class="prettyprint linenums">
var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key){
this.push(key + ': ' + value);
}, log);
expect(log).toEqual(['name: misko', 'gender:male']);
</pre></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.forEach(obj, iterator[, context]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">obj {Object|Array} </code>
<p>Object to iterate over.</p></li>
<li><code ng:non-bindable="">iterator {Function} </code>
<p>Iterator function.</p></li>
<li><code ng:non-bindable="">context<i>(optional)</i> {Object=} </code>
<p>Object to become context (<code>this</code>) for the iterator function.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{Object|Array}</code>
<p>Reference to <code>obj</code>.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.fromJson</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Deserializes a JSON string.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.fromJson(json);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">json {string} </code>
<p>JSON string to deserialize.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{Object|Array|Date|string|number}</code>
<p>Deserialized thingy.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.identity</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>A function that returns its first argument. This function is useful when writing code in the
functional style.</p>
<pre class="prettyprint linenums">
function transformer(transformationFn, value) {
return (transformationFn || identity)(value);
};
</pre></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.identity();</pre>
</div>
</div>

View file

@ -0,0 +1,32 @@
<h1><code ng:non-bindable="">angular.injector</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Creates an injector function that can be used for retrieving services as well as for
dependency injection (see <a href="guide/di">dependency injection</a>).</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.injector(modules);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">modules {Array.&lt;string|Function&gt;} </code>
<p>A list of module functions or their aliases. See
<a href="api/angular.module"><code>angular.module</code></a>. The <code>ng</code> module must be explicitly added.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{function()}</code>
<p>Injector function. See <a href="api/AUTO.$injector"><code>$injector</code></a>.</p></div>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>Typical usage
<pre class="prettyprint linenums">
// create an injector
var $injector = angular.injector(['ng']);
// use the injector to kick off your application
// use the type inference to auto inject arguments, or use implicit injection
$injector.invoke(function($rootScope, $compile, $document){
$compile($document)($rootScope);
$rootScope.$digest();
});
</pre></div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.isArray</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a reference is an <code>Array</code>.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isArray(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is an <code>Array</code>.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.isDate</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a value is a date.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isDate(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is a <code>Date</code>.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.isDefined</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a reference is defined.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isDefined(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is defined.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.isElement</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a reference is a DOM element (or wrapped jQuery element).</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isElement(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is a DOM element (or wrapped jQuery element).</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.isFunction</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a reference is a <code>Function</code>.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isFunction(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is a <code>Function</code>.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.isNumber</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a reference is a <code>Number</code>.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isNumber(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is a <code>Number</code>.</p></div>
</div>
</div>

View file

@ -0,0 +1,18 @@
<h1><code ng:non-bindable="">angular.isObject</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a reference is an <code>Object</code>. Unlike <code>typeof</code> in JavaScript, <code>null</code>s are not
considered to be objects.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isObject(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is an <code>Object</code> but not <code>null</code>.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.isString</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a reference is a <code>String</code>.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isString(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is a <code>String</code>.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.isUndefined</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Determines if a reference is undefined.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.isUndefined(value);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Reference to check.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>True if <code>value</code> is undefined.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.lowercase</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Converts the specified string to lowercase.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.lowercase(string);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">string {string} </code>
<p>String to be converted to lowercase.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>Lowercased string.</p></div>
</div>
</div>

View file

@ -0,0 +1,40 @@
<h1><code ng:non-bindable="">angular.mock.TzDate</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p><em>NOTE</em>: this is not an injectable instance, just a globally available mock class of <code>Date</code>.</p>
<p>Mock of the Date type which has its timezone specified via constroctor arg.</p>
<p>The main purpose is to create Date-like instances with timezone fixed to the specified timezone
offset, so that we can test code that depends on local timezone settings without dependency on
the time zone settings of the machine where the code is running.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">TzDate(offset, timestamp);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">offset {number} </code>
<p>Offset of the <em>desired</em> timezone in hours (fractions will be honored)</p></li>
<li><code ng:non-bindable="">timestamp {(number|string)} </code>
<p>Timestamp representing the desired time in <em>UTC</em></p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>!!!! WARNING !!!!!
This is not a complete Date object so only methods that were implemented can be called safely.
To make matters worse, TzDate instances inherit stuff from Date via a prototype.</p>
<p>We do our best to intercept calls to "unimplemented" methods, but since the list of methods is
incomplete we might be missing some non-standard methods. This can result in errors like:
"Date.prototype.foo called on incompatible Object".</p>
<pre class="prettyprint linenums">
var newYearInBratislava = new TzDate(-1, '2009-12-31T23:00:00Z');
newYearInBratislava.getTimezoneOffset() =&gt; -60;
newYearInBratislava.getFullYear() =&gt; 2010;
newYearInBratislava.getMonth() =&gt; 0;
newYearInBratislava.getDate() =&gt; 1;
newYearInBratislava.getHours() =&gt; 0;
newYearInBratislava.getMinutes() =&gt; 0;
</pre></div>
</div>

View file

@ -0,0 +1,23 @@
<h1><code ng:non-bindable="">angular.mock.debug</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p><em>NOTE</em>: this is not an injectable instance, just a globally available function.</p>
<p>Method for serializing common angular objects (scope, elements, etc..) into strings, useful for debugging.</p>
<p>This method is also available on window, where it can be used to display objects on debug console.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.mock.debug(object);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">object {*} </code>
<ul>
<li>any object to turn into string.</li>
</ul></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>a serialized string of the argument</p></div>
</div>
</div>

View file

@ -0,0 +1,23 @@
<h1><code ng:non-bindable="">angular.mock.dump</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p><em>NOTE</em>: this is not an injectable instance, just a globally available function.</p>
<p>Method for serializing common angular objects (scope, elements, etc..) into strings, useful for debugging.</p>
<p>This method is also available on window, where it can be used to display objects on debug console.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.mock.dump(object);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">object {*} </code>
<ul>
<li>any object to turn into string.</li>
</ul></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>a serialized string of the argument</p></div>
</div>
</div>

View file

@ -0,0 +1,5 @@
<h1><code ng:non-bindable="">angular.mock</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><p>Namespace from 'angular-mocks.js' which contains testing related code.</p></div>

View file

@ -0,0 +1,58 @@
<h1><code ng:non-bindable="">angular.mock.inject</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p><em>NOTE</em>: This is function is also published on window for easy access.<br>
<em>NOTE</em>: Only available with <a href="http://pivotal.github.com/jasmine/">jasmine</a>.</p>
<p>The inject function wraps a function into an injectable function. The inject() creates new
instance of <a href="api/AUTO.$injector"><code>$injector</code></a> per test, which is then used for
resolving references.</p>
<p>See also <a href="api/angular.mock.module"><code>module</code></a></p>
<p>Example of what a typical jasmine tests looks like with the inject method.
<pre class="prettyprint linenums">
angular.module('myApplicationModule', [])
.value('mode', 'app')
.value('version', 'v1.0.1');
describe('MyApp', function() {
// You need to load modules that you want to test,
// it loads only the "ng" module by default.
beforeEach(module('myApplicationModule'));
// inject() is used to inject arguments of all given functions
it('should provide a version', inject(function(mode, version) {
expect(version).toEqual('v1.0.1');
expect(mode).toEqual('app');
}));
// The inject and module method can also be used inside of the it or beforeEach
it('should override a version and test the new version is injected', function() {
// module() takes functions or strings (module aliases)
module(function($provide) {
$provide.value('version', 'overridden'); // override version here
});
inject(function(version) {
expect(version).toEqual('overridden');
});
));
});
</pre></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.mock.inject(fns);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">fns {...Function} </code>
<p>any number of functions which will be injected using the injector.</p></li>
</ul>
</div>
</div>

View file

@ -0,0 +1,22 @@
<h1><code ng:non-bindable="">angular.mock.module</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p><em>NOTE</em>: This is function is also published on window for easy access.<br>
<em>NOTE</em>: Only available with <a href="http://pivotal.github.com/jasmine/">jasmine</a>.</p>
<p>This function registers a module configuration code. It collects the configuration information
which will be used when the injector is created by <a href="api/angular.mock.inject"><code>inject</code></a>.</p>
<p>See <a href="api/angular.mock.inject"><code>inject</code></a> for usage example</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.mock.module(fns);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">fns {...(string|Function)} </code>
<p>any number of modules which are represented as string
aliases or as anonymous module initialization functions. The modules are used to
configure the injector. The 'ng' and 'ngMock' modules are automatically loaded.</p></li>
</ul>
</div>
</div>

View file

@ -0,0 +1,54 @@
<h1><code ng:non-bindable="">angular.module</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>angular.module</code> is a global place for creating and registering Angular modules. All
modules (angular core or 3rd party) that should be available to an application must be
registered using this mechanism.</p>
<h3>Module</h3>
<p>A module is a collocation of services, directives, filters, and configuration information. Module
is used to configure the <a href="api/AUTO.$injector"><code>$injector</code></a>.</p>
<pre class="prettyprint linenums">
// Create a new module
var myModule = angular.module('myModule', []);
// register a new service
myModule.value('appName', 'MyCoolApp');
// configure existing services inside initialization blocks.
myModule.config(function($locationProvider) {
// Configure existing providers
$locationProvider.hashPrefix('!');
});
</pre>
<p>Then you can create an injector and load your modules like this:</p>
<pre class="prettyprint linenums">
var injector = angular.injector(['ng', 'MyModule'])
</pre>
<p>However it's more likely that you'll just use
<a href="api/ng.directive:ngApp"><code>ngApp</code></a> or
<a href="api/angular.bootstrap"><code>angular.bootstrap</code></a> to simplify this process for you.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.module(name[, requires], configFn);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">name {!string} </code>
<p>The name of the module to create or retrieve.</p></li>
<li><code ng:non-bindable="">requires<i>(optional)</i> {Array.&lt;string&gt;=} </code>
<p>If specified then new module is being created. If unspecified then the
the module is being retrieved for further configuration.</p></li>
<li><code ng:non-bindable="">configFn {Function} </code>
<p>Optional configuration function for the module. Same as
<a href="api/angular.Module#config"><code>Module#config()</code></a>.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{module}</code>
<p>new module with the <a href="api/angular.Module"><code>angular.Module</code></a> api.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.noop</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>A function that performs no operations. This function can be useful when writing code in the
functional style.
<pre class="prettyprint linenums">
function foo(callback) {
var result = calculateResult();
(callback || angular.noop)(result);
}
</pre></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.noop();</pre>
</div>
</div>

View file

@ -0,0 +1,19 @@
<h1><code ng:non-bindable="">angular.toJson</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Serializes input into a JSON-formatted string.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.toJson(obj[, pretty]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">obj {Object|Array|Date|string|number} </code>
<p>Input to be serialized into JSON.</p></li>
<li><code ng:non-bindable="">pretty<i>(optional)</i> {boolean=} </code>
<p>If set to true, the JSON output will contain newlines and whitespace.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>Jsonified string representing <code>obj</code>.</p></div>
</div>
</div>

View file

@ -0,0 +1,17 @@
<h1><code ng:non-bindable="">angular.uppercase</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Converts the specified string to uppercase.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.uppercase(string);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">string {string} </code>
<p>String to be converted to uppercase.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>Uppercased string.</p></div>
</div>
</div>

View file

@ -0,0 +1,19 @@
<h1><code ng:non-bindable="">angular.version</code>
<span class="hint">(API in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>An object that contains information about the current AngularJS version. This object has the
following properties:</p>
<ul>
<li><code>full</code> <code>{string}</code> Full version string, such as "0.9.18".</li>
<li><code>major</code> <code>{number}</code> Major version number, such as "0".</li>
<li><code>minor</code> <code>{number}</code> Minor version number, such as "9".</li>
<li><code>dot</code> <code>{number}</code> Dot version number, such as "18".</li>
<li><code>codeName</code> <code>{string}</code> Code name of the release, such as "jiggling-armfat".</li>
</ul></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">angular.version</pre>
</div>
</div>

View file

@ -0,0 +1,6 @@
<h1><code ng:non-bindable=""></code>
<span class="hint"></span>
</h1>
<div><p>Use the API Reference documentation when you need more information about a specific feature. Check out
<a href="guide/index">Developer Guide</a> for AngularJS concepts. If you are new to AngularJS we recommend the
<a href="tutorial/index">Tutorial</a>.</p></div>

View file

@ -0,0 +1,23 @@
<h1><code ng:non-bindable="">$anchorScroll</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>When called, it checks current value of <code>$location.hash()</code> and scroll to related element,
according to rules specified in
<a href="http://dev.w3.org/html5/spec/Overview.html#the-indicated-part-of-the-document">Html5 spec</a>.</p>
<p>It also watches the <code>$location.hash()</code> and scroll whenever it changes to match any anchor.
This can be disabled by calling <code>$anchorScrollProvider.disableAutoScrolling()</code>.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$window">$window</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$location">$location</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$rootScope">$rootScope</a></code>
</li>
</ul>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$anchorScroll();</pre>
</div>
</div>

View file

@ -0,0 +1,32 @@
<h1><code ng:non-bindable="">$cacheFactory</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Factory that constructs cache objects.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$cacheFactory(cacheId[, options]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">cacheId {string} </code>
<p>Name or id of the newly created cache.</p></li>
<li><code ng:non-bindable="">options<i>(optional)</i> {object=} </code>
<p>Options object that specifies the cache behavior. Properties:</p>
<ul>
<li><code>{number=}</code> <code>capacity</code> — turns the cache into LRU cache.</li>
</ul></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{object}</code>
<p>Newly created cache object with the following set of methods:</p>
<ul>
<li><code>{object}</code> <code>info()</code> — Returns id, size, and options of cache.</li>
<li><code>{{*}}</code> <code>put({string} key, {*} value)</code> — Puts a new key-value pair into the cache and returns it.</li>
<li><code>{{*}}</code> <code>get({string} key)</code> — Returns cached value for <code>key</code> or undefined for cache miss.</li>
<li><code>{void}</code> <code>remove({string} key)</code> — Removes a key-value pair from the cache.</li>
<li><code>{void}</code> <code>removeAll()</code> — Removes all cached values.</li>
<li><code>{void}</code> <code>destroy()</code> — Removes references to this cache from $cacheFactory.</li>
</ul></div>
</div>
</div>

View file

@ -0,0 +1,36 @@
<h1><code ng:non-bindable="">Attributes</code>
<span class="hint">(type in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>A shared object between directive compile / linking functions which contains normalized DOM element
attributes. The the values reflect current binding state <code>{{ }}</code>. The normalization is needed
since all of these are treated as equivalent in Angular:</p>
<pre><code> &lt;span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a"&gt;
</code></pre></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="$set">$set(name, value)</h3>
<div class="$set"><p>Set DOM element attribute value.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>Normalized element attribute name of the property to modify. The name is
revers translated using the <a href="api/ng.$compile.directive.Attributes#$attr"><code>$attr</code></a>
property to the original name.</p></li>
<li><code ng:non-bindable="">value {string} </code>
<p>Value to set the attribute to.</p></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="member property"><h2 id="Properties">Properties</h2>
<ul class="properties"><li><h3 id="$attr">$attr</h3>
<div class="$attr"><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{object}</code>
<p>A map of DOM element attribute names to the normalized name. This is
needed to do reverse lookup from normalized name back to actual name.</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,139 @@
<h1><code ng:non-bindable="">$compile</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Compiles a piece of HTML string or DOM into a template and produces a template function, which
can then be used to link <a href="api/ng.$rootScope.Scope"><code>scope</code></a> and the template together.</p>
<p>The compilation is a process of walking the DOM tree and trying to match DOM elements to
<a href="api/ng.$compileProvider#directive"><code>directives</code></a>. For each match it
executes corresponding template function and collects the
instance functions into a single template function which is then returned.</p>
<p>The template function can then be used once to produce the view or as it is the case with
<a href="api/ng.directive:ngRepeat"><code>repeater</code></a> many-times, in which
case each call results in a view that is a DOM clone of the original template.</p>
<h4>Source</h4>
<div source-edit="compile" source-edit-deps="angular.js script.js" source-edit-html="index.html-84" source-edit-css="" source-edit-js="script.js-83" source-edit-unit="" source-edit-scenario="scenario.js-85"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-84" ng-html-wrap="compile angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-84">
<div ng-controller="Ctrl">
<input ng-model="name"> <br>
<textarea ng-model="html"></textarea> <br>
<div compile="html"></div>
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-83"></pre>
<script type="text/ng-template" id="script.js-83">
// declare a new module, and inject the $compileProvider
angular.module('compile', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
})
});
function Ctrl($scope) {
$scope.name = 'Angular';
$scope.html = 'Hello {{name}}';
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-85"></pre>
<script type="text/ng-template" id="scenario.js-85">
it('should auto compile', function() {
expect(element('div[compile]').text()).toBe('Hello Angular');
input('html').enter('{{name}}!');
expect(element('div[compile]').text()).toBe('Angular!');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="compile" ng-set-html="index.html-84" ng-eval-javascript="script.js-83"></div></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$compile(element, transclude, maxPriority);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">element {string|DOMElement} </code>
<p>Element or HTML string to compile into a template function.</p></li>
<li><code ng:non-bindable="">transclude {function(angular.Scope[, cloneAttachFn]} </code>
<p>function available to directives.</p></li>
<li><code ng:non-bindable="">maxPriority {number} </code>
<p>only apply directives lower then given priority (Only effects the
root element(s), not their children)</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{function(scope[, cloneAttachFn])}</code>
<p>a link function which is used to bind template
(a DOM element/tree) to a scope. Where:</p>
<ul>
<li><code>scope</code> - A <a href="api/ng.$rootScope.Scope"><code>Scope</code></a> to bind to.</li>
<li><p><code>cloneAttachFn</code> - If <code>cloneAttachFn</code> is provided, then the link function will clone the
<code>template</code> and call the <code>cloneAttachFn</code> function allowing the caller to attach the
cloned elements to the DOM document at the appropriate place. The <code>cloneAttachFn</code> is
called as: <br> <code>cloneAttachFn(clonedElement, scope)</code> where:</p>
<ul><li><code>clonedElement</code> - is a clone of the original <code>element</code> passed into the compiler.</li>
<li><code>scope</code> - is the current scope with which the linking function is working with.</li></ul></li>
</ul>
<p>Calling the linking function returns the element of the template. It is either the original element
passed in, or the clone of the element if the <code>cloneAttachFn</code> is provided.</p>
<p>After linking the view is not updated until after a call to $digest which typically is done by
Angular automatically.</p>
<p>If you need access to the bound view, there are two ways to do it:</p>
<ul>
<li><p>If you are not asking the linking function to clone the template, create the DOM element(s)
before you send them to the compiler and keep this reference around.
<pre class="prettyprint linenums">
var element = $compile('&lt;p&gt;{{total}}&lt;/p&gt;')(scope);
</pre></li>
<li><p>if on the other hand, you need the element to be cloned, the view reference from the original
example would not point to the clone, but rather to the original template that was cloned. In
this case, you can access the clone via the cloneAttachFn:
<pre class="prettyprint linenums">
var templateHTML = angular.element('&lt;p&gt;{{total}}&lt;/p&gt;'),
scope = ....;
var clonedElement = $compile(templateHTML)(scope, function(clonedElement, scope) {
//attach the clone to DOM document at the right place
});
//now we have reference to the cloned DOM via `clone`
</pre></li>
</ul>
<p>For information on how the compiler works, see the
<a href="guide/compiler">Angular HTML Compiler</a> section of the Developer Guide.</p></div>
</div>
</div>

View file

@ -0,0 +1,24 @@
<h1><code ng:non-bindable="">$compileProvider</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="directive">directive(name, directiveFactory)</h3>
<div class="directive"><p>Register a new directives with the compiler.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>Name of the directive in camel-case. (ie <code>ngBind</code> which will match as
<code>ng-bind</code>).</p></li>
<li><code ng:non-bindable="">directiveFactory {function} </code>
<p>An injectable directive factroy function. See <a href="guide/directive">guide/directive</a> for more
info.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{ng.$compileProvider}</code>
<p>Self for chaining.</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,34 @@
<h1><code ng:non-bindable="">$controller</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p><code>$controller</code> service is responsible for instantiating controllers.</p>
<p>It's just simple call to <a href="api/AUTO.$injector"><code>$injector</code></a>, but extracted into
a service, so that one can override this service with <a href="https://gist.github.com/1649788">BC version</a>.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$injector">$injector</a></code>
</li>
</ul>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$controller(constructor, locals);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">constructor {Function|string} </code>
<p>If called with a function then it's considered to be the
controller constructor function. Otherwise it's considered to be a string which is used
to retrieve the controller constructor using the following steps:</p>
<ul>
<li>check if a controller with given name is registered via <code>$controllerProvider</code></li>
<li>check if evaluating the string on the current scope returns a constructor</li>
<li>check <code>window[constructor]</code> on the global <code>window</code> object</li>
</ul></li>
<li><code ng:non-bindable="">locals {Object} </code>
<p>Injection locals for Controller.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>Instance of given controller.</p></div>
</div>
</div>

View file

@ -0,0 +1,24 @@
<h1><code ng:non-bindable="">$controllerProvider</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <a href="api/ng.$controller"><code>$controller service</code></a> is used by Angular to create new
controllers.</p>
<p>This provider allows controller registration via the
<a href="api/ng.$controllerProvider#register"><code>register</code></a> method.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="register">register(name, constructor)</h3>
<div class="register"><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>Controller name</p></li>
<li><code ng:non-bindable="">constructor {Function|Array} </code>
<p>Controller constructor fn (optionally decorated with DI
annotations in the array notation).</p></li>
</ul>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,12 @@
<h1><code ng:non-bindable="">$document</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>A <a href="api/angular.element"><code>jQuery (lite)</code></a>-wrapped reference to the browser's <code>window.document</code>
element.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$window">$window</a></code>
</li>
</ul>
</div>

View file

@ -0,0 +1,26 @@
<h1><code ng:non-bindable="">$exceptionHandler</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Any uncaught exception in angular expressions is delegated to this service.
The default implementation simply delegates to <code>$log.error</code> which logs it into
the browser console.</p>
<p>In unit tests, if <code>angular-mocks.js</code> is loaded, this service is overridden by
<a href="api/ngMock.$exceptionHandler">mock $exceptionHandler</a> which aids in testing.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$log">$log</a></code>
</li>
</ul>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$exceptionHandler(exception[, cause]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">exception {Error} </code>
<p>Exception associated with the error.</p></li>
<li><code ng:non-bindable="">cause<i>(optional)</i> {string=} </code>
<p>optional information about the context in which
the error was thrown.</p></li>
</ul>
</div>
</div>

View file

@ -0,0 +1,22 @@
<h1><code ng:non-bindable="">$filter</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Filters are used for formatting data displayed to the user.</p>
<p>The general syntax in templates is as follows:</p>
<pre><code> {{ expression | [ filter_name ] }}
</code></pre></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$filter(name);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">name {String} </code>
<p>Name of the filter function to retrieve</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{Function}</code>
<p>the filter function</p></div>
</div>
</div>

View file

@ -0,0 +1,59 @@
<h1><code ng:non-bindable="">$filterProvider</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Filters are just functions which transform input to an output. However filters need to be Dependency Injected. To
achieve this a filter definition consists of a factory function which is annotated with dependencies and is
responsible for creating a the filter function.</p>
<pre class="prettyprint linenums">
// Filter registration
function MyModule($provide, $filterProvider) {
// create a service to demonstrate injection (not always needed)
$provide.value('greet', function(name){
return 'Hello ' + name + '!';
});
// register a filter factory which uses the
// greet service to demonstrate DI.
$filterProvider.register('greet', function(greet){
// return the filter function which uses the greet service
// to generate salutation
return function(text) {
// filters need to be forgiving so check input validity
return text && greet(text) || text;
};
});
}
</pre>
<p>The filter function is registered with the <code>$injector</code> under the filter name suffixe with <code>Filter</code>.
<pre class="prettyprint linenums">
it('should be the same instance', inject(
function($filterProvider) {
$filterProvider.register('reverse', function(){
return ...;
});
},
function($filter, reverseFilter) {
expect($filter('reverse')).toBe(reverseFilter);
});
</pre>
<p>For more information about how angular filters work, and how to create your own filters, see
<a href="guide/dev_guide.templates.filters">Understanding Angular Filters</a> in the angular Developer
Guide.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="register">register(name, fn)</h3>
<div class="register"><p>Register filter factory function.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {String} </code>
<p>Name of the filter.</p></li>
<li><code ng:non-bindable="">fn {function} </code>
<p>The filter factory function which is injectable.</p></li>
</ul>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,457 @@
<h1><code ng:non-bindable="">$http</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>$http</code> service is a core Angular service that facilitates communication with the remote
HTTP servers via browser's <a href="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a> object or via <a href="http://en.wikipedia.org/wiki/JSONP">JSONP</a>.</p>
<p>For unit testing applications that use <code>$http</code> service, see
<a href="api/ngMock.$httpBackend">$httpBackend mock</a>.</p>
<p>For a higher level of abstraction, please check out the <a href="api/ngResource.$resource">$resource</a> service.</p>
<p>The $http API is based on the <a href="api/ng.$q"><code>deferred/promise APIs</code></a> exposed by
the $q service. While for simple usage patters this doesn't matter much, for advanced usage,
it is important to familiarize yourself with these apis and guarantees they provide.</p>
<h3>General usage</h3>
<p>The <code>$http</code> service is a function which takes a single argument — a configuration object —
that is used to generate an http request and returns a <a href="api/ng.$q"><code>promise</code></a>
with two $http specific methods: <code>success</code> and <code>error</code>.</p>
<pre class="prettyprint linenums">
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
</pre>
<p>Since the returned value of calling the $http function is a Promise object, you can also use
the <code>then</code> method to register callbacks, and these callbacks will receive a single argument
an object representing the response. See the api signature and type info below for more
details.</p>
<p>A response status code that falls in the [200, 300) range is considered a success status and
will result in the success callback being called. Note that if the response is a redirect,
XMLHttpRequest will transparently follow it, meaning that the error callback will not be
called for such responses.</p>
<h3>Shortcut methods</h3>
<p>Since all invocation of the $http service require definition of the http method and url and
POST and PUT requests require response body/data to be provided as well, shortcut methods
were created to simplify using the api:</p>
<pre class="prettyprint linenums">
$http.get('/someUrl').success(successCallback);
$http.post('/someUrl', data).success(successCallback);
</pre>
<p>Complete list of shortcut methods:</p>
<ul>
<li><a href="api/ng.$http#get"><code>$http.get</code></a></li>
<li><a href="api/ng.$http#head"><code>$http.head</code></a></li>
<li><a href="api/ng.$http#post"><code>$http.post</code></a></li>
<li><a href="api/ng.$http#put"><code>$http.put</code></a></li>
<li><a href="api/ng.$http#delete"><code>$http.delete</code></a></li>
<li><a href="api/ng.$http#jsonp"><code>$http.jsonp</code></a></li>
</ul>
<h3>Setting HTTP Headers</h3>
<p>The $http service will automatically add certain http headers to all requests. These defaults
can be fully configured by accessing the <code>$httpProvider.defaults.headers</code> configuration
object, which currently contains this default configuration:</p>
<ul>
<li><code>$httpProvider.defaults.headers.common</code> (headers that are common for all requests):
<ul><li><code>Accept: application/json, text/plain, * / *</code></li></ul></li>
<li><code>$httpProvider.defaults.headers.post</code>: (header defaults for HTTP POST requests)
<ul><li><code>Content-Type: application/json</code></li></ul></li>
<li><code>$httpProvider.defaults.headers.put</code> (header defaults for HTTP PUT requests)
<ul><li><code>Content-Type: application/json</code></li></ul></li>
</ul>
<p>To add or overwrite these defaults, simply add or remove a property from this configuration
objects. To add headers for an HTTP method other than POST or PUT, simply add a new object
with name equal to the lower-cased http method name, e.g.
<code>$httpProvider.defaults.headers.get['My-Header']='value'</code>.</p>
<p>Additionally, the defaults can be set at runtime via the <code>$http.defaults</code> object in a similar
fassion as described above.</p>
<h3>Transforming Requests and Responses</h3>
<p>Both requests and responses can be transformed using transform functions. By default, Angular
applies these transformations:</p>
<p>Request transformations:</p>
<ul>
<li>if the <code>data</code> property of the request config object contains an object, serialize it into
JSON format.</li>
</ul>
<p>Response transformations:</p>
<ul>
<li>if XSRF prefix is detected, strip it (see Security Considerations section below)</li>
<li>if json response is detected, deserialize it using a JSON parser</li>
</ul>
<p>To override these transformation locally, specify transform functions as <code>transformRequest</code>
and/or <code>transformResponse</code> properties of the config object. To globally override the default
transforms, override the <code>$httpProvider.defaults.transformRequest</code> and
<code>$httpProvider.defaults.transformResponse</code> properties of the <code>$httpProvider</code>.</p>
<h3>Caching</h3>
<p>To enable caching set the configuration property <code>cache</code> to <code>true</code>. When the cache is
enabled, <code>$http</code> stores the response from the server in local cache. Next time the
response is served from the cache without sending a request to the server.</p>
<p>Note that even if the response is served from cache, delivery of the data is asynchronous in
the same way that real requests are.</p>
<p>If there are multiple GET requests for the same url that should be cached using the same
cache, but the cache is not populated yet, only one request to the server will be made and
the remaining requests will be fulfilled using the response for the first request.</p>
<h3>Response interceptors</h3>
<p>Before you start creating interceptors, be sure to understand the
<a href="api/ng.$q"><code>$q and deferred/promise APIs</code></a>.</p>
<p>For purposes of global error handling, authentication or any kind of synchronous or
asynchronous preprocessing of received responses, it is desirable to be able to intercept
responses for http requests before they are handed over to the application code that
initiated these requests. The response interceptors leverage the <a href="api/ng.$q"><code>promise apis</code></a> to fulfil this need for both synchronous and asynchronous preprocessing.</p>
<p>The interceptors are service factories that are registered with the $httpProvider by
adding them to the <code>$httpProvider.responseInterceptors</code> array. The factory is called and
injected with dependencies (if specified) and returns the interceptor — a function that
takes a <a href="api/ng.$q"><code>promise</code></a> and returns the original or a new promise.</p>
<pre class="prettyprint linenums">
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return function(promise) {
return promise.then(function(response) {
// do something on success
}, function(response) {
// do something on error
if (canRecover(response)) {
return responseOrNewPromise
}
return $q.reject(response);
});
}
});
$httpProvider.responseInterceptors.push('myHttpInterceptor');
// register the interceptor via an anonymous factory
$httpProvider.responseInterceptors.push(function($q, dependency1, dependency2) {
return function(promise) {
// same as above
}
});
</pre>
<h3>Security Considerations</h3>
<p>When designing web applications, consider security threats from:</p>
<ul>
<li><a href="http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx">JSON Vulnerability</a></li>
<li><a href="http://en.wikipedia.org/wiki/Cross-site_request_forgery">XSRF</a></li>
</ul>
<p>Both server and the client must cooperate in order to eliminate these threats. Angular comes
pre-configured with strategies that address these issues, but for this to work backend server
cooperation is required.</p>
<h4>JSON Vulnerability Protection</h4>
<p>A <a href="http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx">JSON Vulnerability</a> allows third party web-site to turn your JSON resource URL into
<a href="http://en.wikipedia.org/wiki/JSON#JSONP">JSONP</a> request under some conditions. To
counter this your server can prefix all JSON requests with following string <code>")]}',\n"</code>.
Angular will automatically strip the prefix before processing it as JSON.</p>
<p>For example if your server needs to return:
<pre class="prettyprint linenums">
['one','two']
</pre>
<p>which is vulnerable to attack, your server can return:
<pre class="prettyprint linenums">
)]}',
['one','two']
</pre>
<p>Angular will strip the prefix, before processing the JSON.</p>
<h4>Cross Site Request Forgery (XSRF) Protection</h4>
<p><a href="http://en.wikipedia.org/wiki/Cross-site_request_forgery">XSRF</a> is a technique by which
an unauthorized site can gain your user's private data. Angular provides following mechanism
to counter XSRF. When performing XHR requests, the $http service reads a token from a cookie
called <code>XSRF-TOKEN</code> and sets it as the HTTP header <code>X-XSRF-TOKEN</code>. Since only JavaScript that
runs on your domain could read the cookie, your server can be assured that the XHR came from
JavaScript running on your domain. The header will not be set for cross-domain requests.</p>
<p>To take advantage of this, your server needs to set a token in a JavaScript readable session
cookie called <code>XSRF-TOKEN</code> on first HTTP GET request. On subsequent non-GET requests the
server can verify that the cookie matches <code>X-XSRF-TOKEN</code> HTTP header, and therefore be sure
that only JavaScript running on your domain could have read the token. The token must be
unique for each user and must be verifiable by the server (to prevent the JavaScript making
up its own tokens). We recommend that the token is a digest of your site's authentication
cookie with <a href="http://en.wikipedia.org/wiki/Rainbow_table">salt for added security</a>.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$httpBackend">$httpBackend</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$browser">$browser</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$cacheFactory">$cacheFactory</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$rootScope">$rootScope</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$q">$q</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$injector">$injector</a></code>
</li>
</ul>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$http(config);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">config {object} </code>
<p>Object describing the request to be made and how it should be
processed. The object has following properties:</p>
<ul>
<li><strong>method</strong> <code>{string}</code> HTTP method (e.g. 'GET', 'POST', etc)</li>
<li><strong>url</strong> <code>{string}</code> Absolute or relative URL of the resource that is being requested.</li>
<li><strong>params</strong> <code>{Object.&lt;string|Object&gt;}</code> Map of strings or objects which will be turned to
<code>?key1=value1&amp;key2=value2</code> after the url. If the value is not a string, it will be JSONified.</li>
<li><strong>data</strong> <code>{string|Object}</code> Data to be sent as the request message data.</li>
<li><strong>headers</strong> <code>{Object}</code> Map of strings representing HTTP headers to send to the server.</li>
<li><strong>transformRequest</strong> <code>{function(data, headersGetter)|Array.&lt;function(data, headersGetter)&gt;}</code>
transform function or an array of such functions. The transform function takes the http
request body and headers and returns its transformed (typically serialized) version.</li>
<li><strong>transformResponse</strong> <code>{function(data, headersGetter)|Array.&lt;function(data, headersGetter)&gt;}</code>
transform function or an array of such functions. The transform function takes the http
response body and headers and returns its transformed (typically deserialized) version.</li>
<li><strong>cache</strong> <code>{boolean|Cache}</code> If true, a default $http cache will be used to cache the
GET request, otherwise if a cache instance built with
<a href="api/ng.$cacheFactory"><code>$cacheFactory</code></a>, this cache will be used for
caching.</li>
<li><strong>timeout</strong> <code>{number}</code> timeout in milliseconds.</li>
<li><strong>withCredentials</strong> - <code>{boolean}</code> - whether to to set the <code>withCredentials</code> flag on the
XHR object. See <a href="https://developer.mozilla.org/en/http_access_control#section_5">requests with credentials</a> for more information.</li>
<li><strong>responseType</strong> - <code>{string}</code> - see <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#responseType">requestType</a>.</li>
</ul></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{HttpPromise}</code>
<p>Returns a <a href="api/ng.$q"><code>promise</code></a> object with the
standard <code>then</code> method and two http specific methods: <code>success</code> and <code>error</code>. The <code>then</code>
method takes two arguments a success and an error callback which will be called with a
response object. The <code>success</code> and <code>error</code> methods take a single argument - a function that
will be called when the request succeeds or fails respectively. The arguments passed into
these functions are destructured representation of the response object passed into the
<code>then</code> method. The response object has these properties:</p>
<ul>
<li><strong>data</strong> <code>{string|Object}</code> The response body transformed with the transform functions.</li>
<li><strong>status</strong> <code>{number}</code> HTTP status code of the response.</li>
<li><strong>headers</strong> <code>{function([headerName])}</code> Header getter function.</li>
<li><strong>config</strong> <code>{Object}</code> The configuration object that was used to generate the request.</li>
</ul></div>
</div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="delete">delete(url, config)</h3>
<div class="delete"><p>Shortcut method to perform <code>DELETE</code> request</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">url {string} </code>
<p>Relative or absolute URL specifying the destination of the request</p></li>
<li><code ng:non-bindable="">config<i>(optional)</i> {Object=} </code>
<p>Optional configuration object</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{HttpPromise}</code>
<p>Future object</p></div>
</div>
</li>
<li><h3 id="get">get(url, config)</h3>
<div class="get"><p>Shortcut method to perform <code>GET</code> request</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">url {string} </code>
<p>Relative or absolute URL specifying the destination of the request</p></li>
<li><code ng:non-bindable="">config<i>(optional)</i> {Object=} </code>
<p>Optional configuration object</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{HttpPromise}</code>
<p>Future object</p></div>
</div>
</li>
<li><h3 id="head">head(url, config)</h3>
<div class="head"><p>Shortcut method to perform <code>HEAD</code> request</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">url {string} </code>
<p>Relative or absolute URL specifying the destination of the request</p></li>
<li><code ng:non-bindable="">config<i>(optional)</i> {Object=} </code>
<p>Optional configuration object</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{HttpPromise}</code>
<p>Future object</p></div>
</div>
</li>
<li><h3 id="jsonp">jsonp(url, config)</h3>
<div class="jsonp"><p>Shortcut method to perform <code>JSONP</code> request</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">url {string} </code>
<p>Relative or absolute URL specifying the destination of the request.
Should contain <code>JSON_CALLBACK</code> string.</p></li>
<li><code ng:non-bindable="">config<i>(optional)</i> {Object=} </code>
<p>Optional configuration object</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{HttpPromise}</code>
<p>Future object</p></div>
</div>
</li>
<li><h3 id="post">post(url, data, config)</h3>
<div class="post"><p>Shortcut method to perform <code>POST</code> request</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">url {string} </code>
<p>Relative or absolute URL specifying the destination of the request</p></li>
<li><code ng:non-bindable="">data {*} </code>
<p>Request content</p></li>
<li><code ng:non-bindable="">config<i>(optional)</i> {Object=} </code>
<p>Optional configuration object</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{HttpPromise}</code>
<p>Future object</p></div>
</div>
</li>
<li><h3 id="put">put(url, data, config)</h3>
<div class="put"><p>Shortcut method to perform <code>PUT</code> request</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">url {string} </code>
<p>Relative or absolute URL specifying the destination of the request</p></li>
<li><code ng:non-bindable="">data {*} </code>
<p>Request content</p></li>
<li><code ng:non-bindable="">config<i>(optional)</i> {Object=} </code>
<p>Optional configuration object</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{HttpPromise}</code>
<p>Future object</p></div>
</div>
</li>
</ul>
</div>
<div class="member property"><h2 id="Properties">Properties</h2>
<ul class="properties"><li><h3 id="defaults">defaults</h3>
<div class="defaults"><p>Runtime equivalent of the <code>$httpProvider.defaults</code> property. Allows configuration of
default headers, withCredentials as well as request and response transformations.</p>
<p>See "Setting HTTP Headers" and "Transforming Requests and Responses" sections above.</p></div>
</li>
<li><h3 id="pendingRequests">pendingRequests</h3>
<div class="pendingrequests"><p>Array of config objects for currently pending
requests. This is primarily meant to be used for debugging purposes.</p></div>
</li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-210 http-hello.html" source-edit-css="" source-edit-js="script.js-211" source-edit-unit="" source-edit-scenario="scenario.js-212"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-210" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-210">
<div ng-controller="FetchCtrl">
<select ng-model="method">
<option>GET</option>
<option>JSONP</option>
</select>
<input type="text" ng-model="url" size="80"/>
<button ng-click="fetch()">fetch</button><br>
<button ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button>
<button ng-click="updateModel('JSONP', 'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')">Sample JSONP</button>
<button ng-click="updateModel('JSONP', 'http://angularjs.org/doesntexist&callback=JSON_CALLBACK')">Invalid JSONP</button>
<pre>http status code: {{status}}</pre>
<pre>http response data: {{data}}</pre>
</div>
</script>
</div>
<div class="tab-pane" title="http-hello.html">
<pre class="prettyprint linenums" ng-set-text="http-hello.html"></pre>
<script type="text/ng-template" id="http-hello.html">
Hello, $http!
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-211"></pre>
<script type="text/ng-template" id="script.js-211">
function FetchCtrl($scope, $http, $templateCache) {
$scope.method = 'GET';
$scope.url = 'http-hello.html';
$scope.fetch = function() {
$scope.code = null;
$scope.response = null;
$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
}).
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
$scope.updateModel = function(method, url) {
$scope.method = method;
$scope.url = url;
};
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-212"></pre>
<script type="text/ng-template" id="scenario.js-212">
it('should make an xhr GET request', function() {
element(':button:contains("Sample GET")').click();
element(':button:contains("fetch")').click();
expect(binding('status')).toBe('200');
expect(binding('data')).toMatch(/Hello, \$http!/);
});
it('should make a JSONP request to angularjs.org', function() {
element(':button:contains("Sample JSONP")').click();
element(':button:contains("fetch")').click();
expect(binding('status')).toBe('200');
expect(binding('data')).toMatch(/Super Hero!/);
});
it('should make JSONP request to invalid URL and invoke the error handler',
function() {
element(':button:contains("Invalid JSONP")').click();
element(':button:contains("fetch")').click();
expect(binding('status')).toBe('0');
expect(binding('data')).toBe('Request failed');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-210" ng-eval-javascript="script.js-211"></div></div>
</div>

View file

@ -0,0 +1,21 @@
<h1><code ng:non-bindable="">$httpBackend</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>HTTP backend used by the <a href="api/ng.$http"><code>service</code></a> that delegates to
XMLHttpRequest object or JSONP and deals with browser incompatibilities.</p>
<p>You should never need to use this service directly, instead use the higher-level abstractions:
<a href="api/ng.$http"><code>$http</code></a> or <a href="api/ngResource.$resource">$resource</a>.</p>
<p>During testing this implementation is swapped with <a href="api/ngMock.$httpBackend">mock $httpBackend</a> which can be trained with responses.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$browser">$browser</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$window">$window</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$document">$document</a></code>
</li>
</ul>
</div>

View file

@ -0,0 +1,62 @@
<h1><code ng:non-bindable="">$interpolate</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Compiles a string with markup into an interpolation function. This service is used by the
HTML <a href="api/ng.$compile"><code>$compile</code></a> service for data binding. See
<a href="api/ng.$interpolateProvider"><code>$interpolateProvider</code></a> for configuring the
interpolation markup.</p>
<pre><code> <pre class="prettyprint linenums">
var $interpolate = ...; // injected
var exp = $interpolate('Hello {{name}}!');
expect(exp({name:'Angular'}).toEqual('Hello Angular!');
</pre>
</code></pre></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$parse">$parse</a></code>
</li>
</ul>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$interpolate(text[, mustHaveExpression]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">text {string} </code>
<p>The text with markup to interpolate.</p></li>
<li><code ng:non-bindable="">mustHaveExpression<i>(optional)</i> {boolean=} </code>
<p>if set to true then the interpolation string must have
embedded expression in order to return an interpolation function. Strings with no
embedded expression will return null for the interpolation function.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{function(context)}</code>
<p>an interpolation function which is used to compute the interpolated
string. The function has these parameters:</p>
<ul>
<li><code>context</code>: an object against which any expressions embedded in the strings are evaluated
against.</li>
</ul></div>
</div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="endSymbol">endSymbol()</h3>
<div class="endsymbol"><p>Symbol to denote the end of expression in the interpolated string. Defaults to <code>}}</code>.</p>
<p>Use <a href="api/ng.$interpolateProvider#endSymbol"><code>$interpolateProvider#endSymbol</code></a> to change
the symbol.</p><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>start symbol.</p></div>
</div>
</li>
<li><h3 id="startSymbol">startSymbol()</h3>
<div class="startsymbol"><p>Symbol to denote the start of expression in the interpolated string. Defaults to <code>{{</code>.</p>
<p>Use <a href="api/ng.$interpolateProvider#startSymbol"><code>$interpolateProvider#startSymbol</code></a> to change
the symbol.</p><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>start symbol.</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,30 @@
<h1><code ng:non-bindable="">$interpolateProvider</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Used for configuring the interpolation markup. Defaults to <code>{{</code> and <code>}}</code>.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="endSymbol">endSymbol(value)</h3>
<div class="endsymbol"><p>Symbol to denote the end of expression in the interpolated string. Defaults to <code>}}</code>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">value<i>(optional)</i> {string=} </code>
<p>new value to set the ending symbol to.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string|self}</code>
<p>Returns the symbol when used as getter and self if used as setter.</p></div>
</div>
</li>
<li><h3 id="startSymbol">startSymbol(value)</h3>
<div class="startsymbol"><p>Symbol to denote start of expression in the interpolated string. Defaults to <code>{{</code>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">value<i>(optional)</i> {string=} </code>
<p>new value to set the starting symbol to.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string|self}</code>
<p>Returns the symbol when used as getter and self if used as setter.</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,12 @@
<h1><code ng:non-bindable="">$locale</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>$locale service provides localization rules for various Angular components. As of right now the
only public api is:</p>
<ul>
<li><code>id</code> <code>{string}</code> locale id formatted as <code>languageId-countryId</code> (e.g. <code>en-us</code>)</li>
</ul></div>
</div>

View file

@ -0,0 +1,135 @@
<h1><code ng:non-bindable="">$location</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The $location service parses the URL in the browser address bar (based on the
<a href="https://developer.mozilla.org/en/window.location">window.location</a>) and makes the URL
available to your application. Changes to the URL in the address bar are reflected into
$location service and changes to $location are reflected into the browser address bar.</p>
<p><strong>The $location service:</strong></p>
<ul>
<li>Exposes the current URL in the browser address bar, so you can
<ul><li>Watch and observe the URL.</li>
<li>Change the URL.</li></ul></li>
<li>Synchronizes the URL with the browser when the user
<ul><li>Changes the address bar.</li>
<li>Clicks the back or forward button (or clicks a History link).</li>
<li>Clicks on a link.</li></ul></li>
<li>Represents the URL object as a set of methods (protocol, host, port, path, search, hash).</li>
</ul>
<p>For more information see <a href="guide/dev_guide.services.$location">Developer Guide: Angular Services: Using $location</a></p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$browser">$browser</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$sniffer">$sniffer</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$rootElement">$rootElement</a></code>
</li>
</ul>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="absUrl">absUrl()</h3>
<div class="absurl"><p>This method is getter only.</p>
<p>Return full url representation with all segments encoded according to rules specified in
<a href="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>.</p><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>full url</p></div>
</div>
</li>
<li><h3 id="hash">hash(hash)</h3>
<div class="hash"><p>This method is getter / setter.</p>
<p>Return hash fragment when called without any parameter.</p>
<p>Change hash fragment when called with parameter and return <code>$location</code>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">hash<i>(optional)</i> {string=} </code>
<p>New hash fragment</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>hash</p></div>
</div>
</li>
<li><h3 id="host">host()</h3>
<div class="host"><p>This method is getter only.</p>
<p>Return host of current url.</p><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>host of current url.</p></div>
</div>
</li>
<li><h3 id="path">path(path)</h3>
<div class="path"><p>This method is getter / setter.</p>
<p>Return path of current url when called without any parameter.</p>
<p>Change path when called with parameter and return <code>$location</code>.</p>
<p>Note: Path should always begin with forward slash (/), this method will add the forward slash
if it is missing.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">path<i>(optional)</i> {string=} </code>
<p>New path</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>path</p></div>
</div>
</li>
<li><h3 id="port">port()</h3>
<div class="port"><p>This method is getter only.</p>
<p>Return port of current url.</p><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Number}</code>
<p>port</p></div>
</div>
</li>
<li><h3 id="protocol">protocol()</h3>
<div class="protocol"><p>This method is getter only.</p>
<p>Return protocol of current url.</p><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>protocol of current url</p></div>
</div>
</li>
<li><h3 id="replace">replace()</h3>
<div class="replace"><p>If called, all changes to $location during current <code>$digest</code> will be replacing current history
record, instead of adding new one.</p></div>
</li>
<li><h3 id="search">search(search, paramValue)</h3>
<div class="search"><p>This method is getter / setter.</p>
<p>Return search part (as object) of current url when called without any parameter.</p>
<p>Change search part when called with parameter and return <code>$location</code>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">search<i>(optional)</i> {string|object&lt;string,string&gt;=} </code>
<p>New search params - string or hash object</p></li>
<li><code ng:non-bindable="">paramValue<i>(optional)</i> {string=} </code>
<p>If <code>search</code> is a string, then <code>paramValue</code> will override only a
single search parameter. If the value is <code>null</code>, the parameter will be deleted.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>search</p></div>
</div>
</li>
<li><h3 id="url">url(url)</h3>
<div class="url"><p>This method is getter / setter.</p>
<p>Return url (e.g. <code>/path?a=b#hash</code>) when called without any parameter.</p>
<p>Change path, search and hash, when called with parameter and return <code>$location</code>.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">url<i>(optional)</i> {string=} </code>
<p>New url without base prefix (e.g. <code>/path?a=b#hash</code>)</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{string}</code>
<p>url</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,30 @@
<h1><code ng:non-bindable="">$locationProvider</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Use the <code>$locationProvider</code> to configure how the application deep linking paths are stored.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="hashPrefix">hashPrefix(prefix)</h3>
<div class="hashprefix"><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">prefix<i>(optional)</i> {string=} </code>
<p>Prefix for hash part (containing path and search)</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{*}</code>
<p>current value if used as getter or itself (chaining) if used as setter</p></div>
</div>
</li>
<li><h3 id="html5Mode">html5Mode(mode)</h3>
<div class="html5mode"><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">mode<i>(optional)</i> {string=} </code>
<p>Use HTML5 strategy if available.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{*}</code>
<p>current value if used as getter or itself (chaining) if used as setter</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,60 @@
<h1><code ng:non-bindable="">$log</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Simple service for logging. Default implementation writes the message
into the browser's console (if present).</p>
<p>The main purpose of this service is to simplify debugging and troubleshooting.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$window">$window</a></code>
</li>
</ul>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="debug">debug()</h3>
<div class="debug"><p>Write a debug message</p></div>
</li>
<li><h3 id="error">error()</h3>
<div class="error"><p>Write an error message</p></div>
</li>
<li><h3 id="info">info()</h3>
<div class="info"><p>Write an information message</p></div>
</li>
<li><h3 id="log">log()</h3>
<div class="log"><p>Write a log message</p></div>
</li>
<li><h3 id="warn">warn()</h3>
<div class="warn"><p>Write a warning message</p></div>
</li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-214" source-edit-css="" source-edit-js="script.js-213" source-edit-unit="" source-edit-scenario=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-214" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-214">
<div ng-controller="LogCtrl">
<p>Reload this page with open console, enter text and hit the log button...</p>
Message:
<input type="text" ng-model="message"/>
<button ng-click="$log.log(message)">log</button>
<button ng-click="$log.warn(message)">warn</button>
<button ng-click="$log.info(message)">info</button>
<button ng-click="$log.error(message)">error</button>
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-213"></pre>
<script type="text/ng-template" id="script.js-213">
function LogCtrl($scope, $log) {
$scope.$log = $log;
$scope.message = 'Hello World!';
}
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-214" ng-eval-javascript="script.js-213"></div></div>
</div>

View file

@ -0,0 +1,20 @@
<h1><code ng:non-bindable="">$logProvider</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Use the <code>$logProvider</code> to configure how the application logs messages</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="debugEnabled">debugEnabled(flag)</h3>
<div class="debugenabled"><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">flag<i>(optional)</i> {string=} </code>
<p>enable or disable debug level messages</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{*}</code>
<p>current value if used as getter or itself (chaining) if used as setter</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,38 @@
<h1><code ng:non-bindable="">$parse</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Converts Angular <a href="guide/expression">expression</a> into a function.</p>
<pre class="prettyprint linenums">
var getter = $parse('user.name');
var setter = getter.assign;
var context = {user:{name:'angular'}};
var locals = {user:{name:'local'}};
expect(getter(context)).toEqual('angular');
setter(context, 'newValue');
expect(context.user.name).toEqual('newValue');
expect(getter(context, locals)).toEqual('local');
</pre></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$parse(expression);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">expression {string} </code>
<p>String expression to compile.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{function(context, locals)}</code>
<p>a function which represents the compiled expression:</p>
<ul>
<li><code>context</code>: an object against which any expressions embedded in the strings are evaluated
against (Topically a scope object).</li>
<li><p><code>locals</code>: local variables context object, useful for overriding values in <code>context</code>.</p>
<p>The return function also has an <code>assign</code> property, if the expression is assignable, which
allows one to set values to expressions.</p></li>
</ul></div>
</div>
</div>

View file

@ -0,0 +1,228 @@
<h1><code ng:non-bindable="">$q</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>A promise/deferred implementation inspired by <a href="https://github.com/kriskowal/q">Kris Kowal's Q</a>.</p>
<p><a href="http://wiki.commonjs.org/wiki/Promises">The CommonJS Promise proposal</a> describes a promise as an
interface for interacting with an object that represents the result of an action that is
performed asynchronously, and may or may not be finished at any given point in time.</p>
<p>From the perspective of dealing with error handling, deferred and promise apis are to
asynchronous programming what <code>try</code>, <code>catch</code> and <code>throw</code> keywords are to synchronous programming.</p>
<pre class="prettyprint linenums">
// for the purpose of this example let's assume that variables `$q` and `scope` are
// available in the current lexical scope (they could have been injected or passed in).
function asyncGreet(name) {
var deferred = $q.defer();
setTimeout(function() {
// since this fn executes async in a future turn of the event loop, we need to wrap
// our code into an $apply call so that the model changes are properly observed.
scope.$apply(function() {
if (okToGreet(name)) {
deferred.resolve('Hello, ' + name + '!');
} else {
deferred.reject('Greeting ' + name + ' is not allowed.');
}
});
}, 1000);
return deferred.promise;
}
var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
alert('Success: ' + greeting);
}, function(reason) {
alert('Failed: ' + reason);
});
</pre>
<p>At first it might not be obvious why this extra complexity is worth the trouble. The payoff
comes in the way of
<a href="https://github.com/kriskowal/uncommonjs/blob/master/promises/specification.md">guarantees that promise and deferred apis make</a>.</p>
<p>Additionally the promise api allows for composition that is very hard to do with the
traditional callback (<a href="http://en.wikipedia.org/wiki/Continuation-passing_style">CPS</a>) approach.
For more on this please see the <a href="https://github.com/kriskowal/q">Q documentation</a> especially the
section on serial or parallel joining of promises.</p>
<h3>The Deferred API</h3>
<p>A new instance of deferred is constructed by calling <code>$q.defer()</code>.</p>
<p>The purpose of the deferred object is to expose the associated Promise instance as well as apis
that can be used for signaling the successful or unsuccessful completion of the task.</p>
<p><strong>Methods</strong></p>
<ul>
<li><code>resolve(value)</code> resolves the derived promise with the <code>value</code>. If the value is a rejection
constructed via <code>$q.reject</code>, the promise will be rejected instead.</li>
<li><code>reject(reason)</code> rejects the derived promise with the <code>reason</code>. This is equivalent to
resolving it with a rejection constructed via <code>$q.reject</code>.</li>
</ul>
<p><strong>Properties</strong></p>
<ul>
<li>promise <code>{Promise}</code> promise object associated with this deferred.</li>
</ul>
<h3>The Promise API</h3>
<p>A new promise instance is created when a deferred instance is created and can be retrieved by
calling <code>deferred.promise</code>.</p>
<p>The purpose of the promise object is to allow for interested parties to get access to the result
of the deferred task when it completes.</p>
<p><strong>Methods</strong></p>
<ul>
<li><p><code>then(successCallback, errorCallback)</code> regardless of when the promise was or will be resolved
or rejected calls one of the success or error callbacks asynchronously as soon as the result
is available. The callbacks are called with a single argument the result or rejection reason.</p>
<p>This method <em>returns a new promise</em> which is resolved or rejected via the return value of the
<code>successCallback</code> or <code>errorCallback</code>.</p></li>
</ul>
<h3>Chaining promises</h3>
<p>Because calling <code>then</code> api of a promise returns a new derived promise, it is easily possible
to create a chain of promises:</p>
<pre class="prettyprint linenums">
promiseB = promiseA.then(function(result) {
return result + 1;
});
// promiseB will be resolved immediately after promiseA is resolved and it's value will be
// the result of promiseA incremented by 1
</pre>
<p>It is possible to create chains of any length and since a promise can be resolved with another
promise (which will defer its resolution further), it is possible to pause/defer resolution of
the promises at any point in the chain. This makes it possible to implement powerful apis like
$http's response interceptors.</p>
<h3>Differences between Kris Kowal's Q and $q</h3>
<p>There are three main differences:</p>
<ul>
<li>$q is integrated with the <a href="api/ng.$rootScope.Scope"><code>ng.$rootScope.Scope</code></a> Scope model observation
mechanism in angular, which means faster propagation of resolution or rejection into your
models and avoiding unnecessary browser repaints, which would result in flickering UI.</li>
<li>$q promises are recognized by the templating engine in angular, which means that in templates
you can treat promises attached to a scope as if they were the resulting values.</li>
<li><p>Q has many more features that $q, but that comes at a cost of bytes. $q is tiny, but contains
all the important functionality needed for common async tasks.</p>
<h3>Testing</h3>
<pre class="prettyprint linenums">
it('should simulate promise', inject(function($q, $rootSCope) {
var deferred = $q.defer();
var promise = deferred.promise;
var resolvedValue;
promise.then(function(value) { resolvedValue = value; });
expect(resolvedValue).toBeUndefined();
// Simulate resolving of promise
defered.resolve(123);
// Note that the 'then' function does not get called synchronously.
// This is because we want the promise API to always be async, whether or not
// it got called synchronously or asynchronously.
expect(resolvedValue).toBeUndefined();
// Propagate promise resolution to 'then' functions using $apply().
$rootScope.$apply();
expect(resolvedValue).toEqual(123);
});
</pre></li>
</ul></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$rootScope">$rootScope</a></code>
</li>
</ul>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="all">all(promises)</h3>
<div class="all"><p>Combines multiple promises into a single promise that is resolved when all of the input
promises are resolved.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">promises {Array.&lt;Promise&gt;} </code>
<p>An array of promises.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Promise}</code>
<p>Returns a single promise that will be resolved with an array of values,
each value coresponding to the promise at the same index in the <code>promises</code> array. If any of
the promises is resolved with a rejection, this resulting promise will be resolved with the
same rejection.</p></div>
</div>
</li>
<li><h3 id="defer">defer()</h3>
<div class="defer"><p>Creates a <code>Deferred</code> object which represents a task which will finish in the future.</p><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Deferred}</code>
<p>Returns a new instance of deferred.</p></div>
</div>
</li>
<li><h3 id="reject">reject(reason)</h3>
<div class="reject"><p>Creates a promise that is resolved as rejected with the specified <code>reason</code>. This api should be
used to forward rejection in a chain of promises. If you are dealing with the last promise in
a promise chain, you don't need to worry about it.</p>
<p>When comparing deferreds/promises to the familiar behavior of try/catch/throw, think of
<code>reject</code> as the <code>throw</code> keyword in JavaScript. This also means that if you "catch" an error via
a promise error callback and you want to forward the error to the promise derived from the
current promise, you have to "rethrow" the error by returning a rejection constructed via
<code>reject</code>.</p>
<pre class="prettyprint linenums">
promiseB = promiseA.then(function(result) {
// success: do something and resolve promiseB
// with the old or a new result
return result;
}, function(reason) {
// error: handle the error if possible and
// resolve promiseB with newPromiseOrValue,
// otherwise forward the rejection to promiseB
if (canHandle(reason)) {
// handle the error and recover
return newPromiseOrValue;
}
return $q.reject(reason);
});
</pre><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">reason {*} </code>
<p>Constant, message, exception or an object representing the rejection reason.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Promise}</code>
<p>Returns a promise that was already resolved as rejected with the <code>reason</code>.</p></div>
</div>
</li>
<li><h3 id="when">when(value)</h3>
<div class="when"><p>Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise.
This is useful when you are dealing with on object that might or might not be a promise, or if
the promise comes from a source that can't be trusted.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">value {*} </code>
<p>Value or a promise</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Promise}</code>
<p>Returns a single promise that will be resolved with an array of values,
each value coresponding to the promise at the same index in the <code>promises</code> array. If any of
the promises is resolved with a rejection, this resulting promise will be resolved with the
same rejection.</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,8 @@
<h1><code ng:non-bindable="">$rootElement</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><p>The root element of Angular application. This is either the element where <a href="api/ng.directive:ngApp"><code>ngApp</code></a> was declared or the element passed into
<a href="api/angular.bootstrap"><code>angular.bootstrap</code></a>. The element represent the root element of application. It is also the
location where the applications <a href="api/AUTO.$injector"><code>$injector</code></a> service gets
published, it can be retrieved using <code>$rootElement.injector()</code>.</p></div>

View file

@ -0,0 +1,406 @@
<h1><code ng:non-bindable="">Scope</code>
<span class="hint">(type in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>A root scope can be retrieved using the <a href="api/ng.$rootScope"><code>$rootScope</code></a> key from the
<a href="api/AUTO.$injector"><code>$injector</code></a>. Child scopes are created using the
<a href="api/ng.$rootScope.Scope#$new"><code>$new()</code></a> method. (Most scopes are created automatically when
compiled HTML template is executed.)</p>
<p>Here is a simple scope snippet to show how you can interact with the scope.
<pre class="prettyprint linenums">
angular.injector(['ng']).invoke(function($rootScope) {
var scope = $rootScope.$new();
scope.salutation = 'Hello';
scope.name = 'World';
expect(scope.greeting).toEqual(undefined);
scope.$watch('name', function() {
scope.greeting = scope.salutation + ' ' + scope.name + '!';
}); // initialize the watch
expect(scope.greeting).toEqual(undefined);
scope.name = 'Misko';
// still old value, since watches have not been called yet
expect(scope.greeting).toEqual(undefined);
scope.$digest(); // fire all the watches
expect(scope.greeting).toEqual('Hello Misko!');
});
</pre>
<h3>Inheritance</h3>
<p>A scope can inherit from a parent scope, as in this example:
<pre class="prettyprint linenums">
var parent = $rootScope;
var child = parent.$new();
parent.salutation = "Hello";
child.name = "World";
expect(child.salutation).toEqual('Hello');
child.salutation = "Welcome";
expect(child.salutation).toEqual('Welcome');
expect(parent.salutation).toEqual('Hello');
</pre></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">Scope([providers][, instanceCache]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">providers<i>(optional)</i> {Object.&lt;string, function()&gt;=} </code>
<p>Map of service factory which need to be provided
for the current scope. Defaults to <a href="api/ng">ng</a>.</p></li>
<li><code ng:non-bindable="">instanceCache<i>(optional)</i> {Object.&lt;string, *&gt;=} </code>
<p>Provides pre-instantiated services which should
append/override services provided by <code>providers</code>. This is handy when unit-testing and having
the need to override a default service.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>Newly created scope.</p></div>
</div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="$apply">$apply(exp)</h3>
<div class="$apply"><p><code>$apply()</code> is used to execute an expression in angular from outside of the angular framework.
(For example from browser DOM events, setTimeout, XHR or third party libraries).
Because we are calling into the angular framework we need to perform proper scope life-cycle
of <a href="api/ng.$exceptionHandler"><code>exception handling</code></a>,
<a href="api/ng.$rootScope.Scope#$digest"><code>executing watches</code></a>.</p>
<h5>Life cycle</h5>
<h4>Pseudo-Code of <code>$apply()</code></h4>
<pre class="prettyprint linenums">
function $apply(expr) {
try {
return $eval(expr);
} catch (e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
</pre>
<p>Scope's <code>$apply()</code> method transitions through the following stages:</p>
<ol>
<li>The <a href="guide/expression">expression</a> is executed using the
<a href="api/ng.$rootScope.Scope#$eval"><code>$eval()</code></a> method.</li>
<li>Any exceptions from the execution of the expression are forwarded to the
<a href="api/ng.$exceptionHandler"><code>$exceptionHandler</code></a> service.</li>
<li>The <a href="api/ng.$rootScope.Scope#$watch"><code>watch</code></a> listeners are fired immediately after the expression
was executed using the <a href="api/ng.$rootScope.Scope#$digest"><code>$digest()</code></a> method.</li>
</ol><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">exp<i>(optional)</i> {(string|function())=} </code>
<p>An angular expression to be executed.</p>
<ul>
<li><code>string</code>: execute using the rules as defined in <a href="guide/expression">expression</a>.</li>
<li><code>function(scope)</code>: execute the function with current <code>scope</code> parameter.</li>
</ul></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{*}</code>
<p>The result of evaluating the expression.</p></div>
</div>
</li>
<li><h3 id="$broadcast">$broadcast(name, args)</h3>
<div class="$broadcast"><p>Dispatches an event <code>name</code> downwards to all child scopes (and their children) notifying the
registered <a href="api/ng.$rootScope.Scope#$on"><code>ng.$rootScope.Scope#$on</code></a> listeners.</p>
<p>The event life cycle starts at the scope on which <code>$broadcast</code> was called. All
<a href="api/ng.$rootScope.Scope#$on"><code>listeners</code></a> listening for <code>name</code> event on this scope get notified.
Afterwards, the event propagates to all direct and indirect scopes of the current scope and
calls all registered listeners along the way. The event cannot be canceled.</p>
<p>Any exception emmited from the <a href="api/ng.$rootScope.Scope#$on"><code>listeners</code></a> will be passed
onto the <a href="api/ng.$exceptionHandler"><code>$exceptionHandler</code></a> service.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>Event name to emit.</p></li>
<li><code ng:non-bindable="">args {...*} </code>
<p>Optional set of arguments which will be passed onto the event listeners.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>Event object, see <a href="api/ng.$rootScope.Scope#$on"><code>ng.$rootScope.Scope#$on</code></a></p></div>
</div>
</li>
<li><h3 id="$destroy">$destroy()</h3>
<div class="$destroy"><p>Removes the current scope (and all of its children) from the parent scope. Removal implies
that calls to <a href="api/ng.$rootScope.Scope#$digest"><code>$digest()</code></a> will no longer
propagate to the current scope and its children. Removal also implies that the current
scope is eligible for garbage collection.</p>
<p>The <code>$destroy()</code> is usually used by directives such as
<a href="api/ng.directive:ngRepeat"><code>ngRepeat</code></a> for managing the
unrolling of the loop.</p>
<p>Just before a scope is destroyed a <code>$destroy</code> event is broadcasted on this scope.
Application code can register a <code>$destroy</code> event handler that will give it chance to
perform any necessary cleanup.</p></div>
</li>
<li><h3 id="$digest">$digest()</h3>
<div class="$digest"><p>Process all of the <a href="api/ng.$rootScope.Scope#$watch"><code>watchers</code></a> of the current scope and its children.
Because a <a href="api/ng.$rootScope.Scope#$watch"><code>watcher</code></a>'s listener can change the model, the
<code>$digest()</code> keeps calling the <a href="api/ng.$rootScope.Scope#$watch"><code>watchers</code></a> until no more listeners are
firing. This means that it is possible to get into an infinite loop. This function will throw
<code>'Maximum iteration limit exceeded.'</code> if the number of iterations exceeds 10.</p>
<p>Usually you don't call <code>$digest()</code> directly in
<a href="api/ng.directive:ngController"><code>controllers</code></a> or in
<a href="api/ng.$compileProvider#directive"><code>directives</code></a>.
Instead a call to <a href="api/ng.$rootScope.Scope#$apply"><code>$apply()</code></a> (typically from within a
<a href="api/ng.$compileProvider#directive"><code>directives</code></a>) will force a <code>$digest()</code>.</p>
<p>If you want to be notified whenever <code>$digest()</code> is called,
you can register a <code>watchExpression</code> function with <a href="api/ng.$rootScope.Scope#$watch"><code>$watch()</code></a>
with no <code>listener</code>.</p>
<p>You may have a need to call <code>$digest()</code> from within unit-tests, to simulate the scope
life-cycle.</p>
<h4>Example</h4>
<pre class="prettyprint linenums">
var scope = ...;
scope.name = 'misko';
scope.counter = 0;
expect(scope.counter).toEqual(0);
scope.$watch('name', function(newValue, oldValue) {
scope.counter = scope.counter + 1;
});
expect(scope.counter).toEqual(0);
scope.$digest();
// no variable change
expect(scope.counter).toEqual(0);
scope.name = 'adam';
scope.$digest();
expect(scope.counter).toEqual(1);
</pre></div>
</li>
<li><h3 id="$emit">$emit(name, args)</h3>
<div class="$emit"><p>Dispatches an event <code>name</code> upwards through the scope hierarchy notifying the
registered <a href="api/ng.$rootScope.Scope#$on"><code>ng.$rootScope.Scope#$on</code></a> listeners.</p>
<p>The event life cycle starts at the scope on which <code>$emit</code> was called. All
<a href="api/ng.$rootScope.Scope#$on"><code>listeners</code></a> listening for <code>name</code> event on this scope get notified.
Afterwards, the event traverses upwards toward the root scope and calls all registered
listeners along the way. The event will stop propagating if one of the listeners cancels it.</p>
<p>Any exception emmited from the <a href="api/ng.$rootScope.Scope#$on"><code>listeners</code></a> will be passed
onto the <a href="api/ng.$exceptionHandler"><code>$exceptionHandler</code></a> service.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>Event name to emit.</p></li>
<li><code ng:non-bindable="">args {...*} </code>
<p>Optional set of arguments which will be passed onto the event listeners.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>Event object, see <a href="api/ng.$rootScope.Scope#$on"><code>ng.$rootScope.Scope#$on</code></a></p></div>
</div>
</li>
<li><h3 id="$eval">$eval(expression)</h3>
<div class="$eval"><p>Executes the <code>expression</code> on the current scope returning the result. Any exceptions in the
expression are propagated (uncaught). This is useful when evaluating Angular expressions.</p>
<h4>Example</h4>
<pre class="prettyprint linenums">
var scope = ng.$rootScope.Scope();
scope.a = 1;
scope.b = 2;
expect(scope.$eval('a+b')).toEqual(3);
expect(scope.$eval(function(scope){ return scope.a + scope.b; })).toEqual(3);
</pre><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">expression<i>(optional)</i> {(string|function())=} </code>
<p>An angular expression to be executed.</p>
<ul>
<li><code>string</code>: execute using the rules as defined in <a href="guide/expression">expression</a>.</li>
<li><code>function(scope)</code>: execute the function with the current <code>scope</code> parameter.</li>
</ul></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{*}</code>
<p>The result of evaluating the expression.</p></div>
</div>
</li>
<li><h3 id="$evalAsync">$evalAsync(expression)</h3>
<div class="$evalasync"><p>Executes the expression on the current scope at a later point in time.</p>
<p>The <code>$evalAsync</code> makes no guarantees as to when the <code>expression</code> will be executed, only that:</p>
<ul>
<li>it will execute in the current script execution context (before any DOM rendering).</li>
<li>at least one <a href="api/ng.$rootScope.Scope#$digest"><code>$digest cycle</code></a> will be performed after
<code>expression</code> execution.</li>
</ul>
<p>Any exceptions from the execution of the expression are forwarded to the
<a href="api/ng.$exceptionHandler"><code>$exceptionHandler</code></a> service.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">expression<i>(optional)</i> {(string|function())=} </code>
<p>An angular expression to be executed.</p>
<ul>
<li><code>string</code>: execute using the rules as defined in <a href="guide/expression">expression</a>.</li>
<li><code>function(scope)</code>: execute the function with the current <code>scope</code> parameter.</li>
</ul></li>
</ul>
</div>
</li>
<li><h3 id="$new">$new(isolate)</h3>
<div class="$new"><p>Creates a new child <a href="api/ng.$rootScope.Scope"><code>scope</code></a>.</p>
<p>The parent scope will propagate the <a href="api/ng.$rootScope.Scope#$digest"><code>$digest()</code></a> and
<a href="api/ng.$rootScope.Scope#$digest"><code>$digest()</code></a> events. The scope can be removed from the scope
hierarchy using <a href="api/ng.$rootScope.Scope#$destroy"><code>$destroy()</code></a>.</p>
<p><a href="api/ng.$rootScope.Scope#$destroy"><code>$destroy()</code></a> must be called on a scope when it is desired for
the scope and its child scopes to be permanently detached from the parent and thus stop
participating in model change detection and listener notification by invoking.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">isolate {boolean} </code>
<p>if true then the scope does not prototypically inherit from the
parent scope. The scope is isolated, as it can not see parent scope properties.
When creating widgets it is useful for the widget to not accidentally read parent
state.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>The newly created child scope.</p></div>
</div>
</li>
<li><h3 id="$on">$on(name, listener)</h3>
<div class="$on"><p>Listens on events of a given type. See <a href="api/ng.$rootScope.Scope#$emit"><code>$emit</code></a> for discussion of
event life cycle.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">name {string} </code>
<p>Event name to listen on.</p></li>
<li><code ng:non-bindable="">listener {function(event)} </code>
<p>Function to call when the event is emitted.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{function()}</code>
<p>Returns a deregistration function for this listener.</p>
<p>The event listener function format is: <code>function(event, args...)</code>. The <code>event</code> object
passed into the listener has the following attributes:</p>
<ul>
<li><code>targetScope</code> - <code>{Scope}</code>: the scope on which the event was <code>$emit</code>-ed or <code>$broadcast</code>-ed.</li>
<li><code>currentScope</code> - <code>{Scope}</code>: the current scope which is handling the event.</li>
<li><code>name</code> - <code>{string}</code>: Name of the event.</li>
<li><code>stopPropagation</code> - <code>{function=}</code>: calling <code>stopPropagation</code> function will cancel further event
propagation (available only for events that were <code>$emit</code>-ed).</li>
<li><code>preventDefault</code> - <code>{function}</code>: calling <code>preventDefault</code> sets <code>defaultPrevented</code> flag to true.</li>
<li><code>defaultPrevented</code> - <code>{boolean}</code>: true if <code>preventDefault</code> was called.</li>
</ul></div>
</div>
</li>
<li><h3 id="$watch">$watch(watchExpression, listener, objectEquality)</h3>
<div class="$watch"><p>Registers a <code>listener</code> callback to be executed whenever the <code>watchExpression</code> changes.</p>
<ul>
<li>The <code>watchExpression</code> is called on every call to <a href="api/ng.$rootScope.Scope#$digest"><code>$digest()</code></a> and
should return the value which will be watched. (Since <a href="api/ng.$rootScope.Scope#$digest"><code>$digest()</code></a>
reruns when it detects changes the <code>watchExpression</code> can execute multiple times per
<a href="api/ng.$rootScope.Scope#$digest"><code>$digest()</code></a> and should be idempotent.)</li>
<li>The <code>listener</code> is called only when the value from the current <code>watchExpression</code> and the
previous call to <code>watchExpression</code> are not equal (with the exception of the initial run,
see below). The inequality is determined according to
<a href="api/angular.equals"><code>angular.equals</code></a> function. To save the value of the object for later comparison, the
<a href="api/angular.copy"><code>angular.copy</code></a> function is used. It also means that watching complex options will
have adverse memory and performance implications.</li>
<li>The watch <code>listener</code> may change the model, which may trigger other <code>listener</code>s to fire. This
is achieved by rerunning the watchers until no changes are detected. The rerun iteration
limit is 10 to prevent an infinite loop deadlock.</li>
</ul>
<p>If you want to be notified whenever <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> is called,
you can register a <code>watchExpression</code> function with no <code>listener</code>. (Since <code>watchExpression</code>
can execute multiple times per <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> cycle when a change is
detected, be prepared for multiple calls to your listener.)</p>
<p>After a watcher is registered with the scope, the <code>listener</code> fn is called asynchronously
(via <a href="api/ng.$rootScope.Scope#$evalAsync"><code>$evalAsync</code></a>) to initialize the
watcher. In rare cases, this is undesirable because the listener is called when the result
of <code>watchExpression</code> didn't change. To detect this scenario within the <code>listener</code> fn, you
can compare the <code>newVal</code> and <code>oldVal</code>. If these two values are identical (<code>===</code>) then the
listener was called due to initialization.</p>
<h4>Example</h4>
<pre class="prettyprint linenums">
// let's assume that scope was dependency injected as the $rootScope
var scope = $rootScope;
scope.name = 'misko';
scope.counter = 0;
expect(scope.counter).toEqual(0);
scope.$watch('name', function(newValue, oldValue) { scope.counter = scope.counter + 1; });
expect(scope.counter).toEqual(0);
scope.$digest();
// no variable change
expect(scope.counter).toEqual(0);
scope.name = 'adam';
scope.$digest();
expect(scope.counter).toEqual(1);
</pre><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">watchExpression {(function()|string)} </code>
<p>Expression that is evaluated on each
<a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> cycle. A change in the return value triggers a
call to the <code>listener</code>.</p>
<ul>
<li><code>string</code>: Evaluated as <a href="guide/expression">expression</a></li>
<li><code>function(scope)</code>: called with current <code>scope</code> as a parameter.</li>
</ul></li>
<li><code ng:non-bindable="">listener<i>(optional)</i> {(function()|string)=} </code>
<p>Callback called whenever the return value of
the <code>watchExpression</code> changes.</p>
<ul>
<li><code>string</code>: Evaluated as <a href="guide/expression">expression</a></li>
<li><code>function(newValue, oldValue, scope)</code>: called with current and previous values as parameters.</li>
</ul></li>
<li><code ng:non-bindable="">objectEquality<i>(optional)</i> {boolean=} </code>
<p>Compare object for equality rather than for reference.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{function()}</code>
<p>Returns a deregistration function for this listener.</p></div>
</div>
</li>
</ul>
</div>
<div class="member property"><h2 id="Properties">Properties</h2>
<ul class="properties"><li><h3 id="$id">$id</h3>
<div class="$id"><h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{number}</code>
<p>Unique scope ID (monotonically increasing alphanumeric sequence) useful for
debugging.</p></div>
</div>
</li>
</ul>
</div>
<div class="member event"><h2 id="Events">Events</h2>
<ul class="events"><li><h3 id="$destroy">$destroy</h3>
<div class="$destroy"><p>Broadcasted when a scope and its children are being destroyed.</p><div class="inline"><h4 id="Type.">Type:</h4>
<div class="type-">broadcast</div>
</div>
<div class="inline"><h4 id="Target.">Target:</h4>
<div class="target-">scope being destroyed</div>
</div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,9 @@
<h1><code ng:non-bindable="">$rootScope</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Every application has a single root <a href="api/ng.$rootScope.Scope"><code>scope</code></a>.
All other scopes are child scopes of the root scope. Scopes provide mechanism for watching the model and provide
event processing life-cycle. See <a href="guide/scope">developer guide on scopes</a>.</p></div>
</div>

View file

@ -0,0 +1,20 @@
<h1><code ng:non-bindable="">$rootScopeProvider</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Provider for the $rootScope service.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="digestTtl">digestTtl(limit)</h3>
<div class="digestttl"><p>Sets the number of digest iteration the scope should attempt to execute before giving up and
assuming that the model is unstable.</p>
<p>The current default is 10 iterations.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">limit {number} </code>
<p>The number of digest iterations.</p></li>
</ul>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,223 @@
<h1><code ng:non-bindable="">$route</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Is used for deep-linking URLs to controllers and views (HTML partials).
It watches <code>$location.url()</code> and tries to map the path to an existing route definition.</p>
<p>You can define routes through <a href="api/ng.$routeProvider"><code>$routeProvider</code></a>'s API.</p>
<p>The <code>$route</code> service is typically used in conjunction with <a href="api/ng.directive:ngView"><code>ngView</code></a>
directive and the <a href="api/ng.$routeParams"><code>$routeParams</code></a> service.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$location">$location</a></code>
</li>
<li><code ng:non-bindable=""><a href="api/ng.$routeParams">$routeParams</a></code>
</li>
</ul>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="reload">reload()</h3>
<div class="reload"><p>Causes <code>$route</code> service to reload the current route even if
<a href="api/ng.$location"><code>$location</code></a> hasn't changed.</p>
<p>As a result of that, <a href="api/ng.directive:ngView"><code>ngView</code></a>
creates new scope, reinstantiates the controller.</p></div>
</li>
</ul>
</div>
<div class="member property"><h2 id="Properties">Properties</h2>
<ul class="properties"><li><h3 id="current">current</h3>
<div class="current"><p>Reference to the current route definition.
The route definition contains:</p>
<ul>
<li><code>controller</code>: The controller constructor as define in route definition.</li>
<li><p><code>locals</code>: A map of locals which is used by <a href="api/ng.$controller"><code>$controller</code></a> service for
controller instantiation. The <code>locals</code> contain
the resolved values of the <code>resolve</code> map. Additionally the <code>locals</code> also contain:</p>
<ul><li><code>$scope</code> - The current route scope.</li>
<li><code>$template</code> - The current route template HTML.</li></ul></li>
</ul></div>
</li>
<li><h3 id="routes">routes</h3>
<div class="routes"><p>Array of all configured routes.</p></div>
</li>
</ul>
</div>
<div class="member event"><h2 id="Events">Events</h2>
<ul class="events"><li><h3 id="$routeChangeError">$routeChangeError</h3>
<div class="$routechangeerror"><p>Broadcasted if any of the resolve promises are rejected.</p><div class="inline"><h4 id="Type.">Type:</h4>
<div class="type-">broadcast</div>
</div>
<div class="inline"><h4 id="Target.">Target:</h4>
<div class="target-">root scope</div>
</div>
<h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">current {Route} </code>
<p>Current route information.</p></li>
<li><code ng:non-bindable="">previous {Route} </code>
<p>Previous route information.</p></li>
<li><code ng:non-bindable="">rejection {Route} </code>
<p>Rejection of the promise. Usually the error of the failed promise.</p></li>
</ul>
</div>
</li>
<li><h3 id="$routeChangeStart">$routeChangeStart</h3>
<div class="$routechangestart"><p>Broadcasted before a route change. At this point the route services starts
resolving all of the dependencies needed for the route change to occurs.
Typically this involves fetching the view template as well as any dependencies
defined in <code>resolve</code> route property. Once all of the dependencies are resolved
<code>$routeChangeSuccess</code> is fired.</p><div class="inline"><h4 id="Type.">Type:</h4>
<div class="type-">broadcast</div>
</div>
<div class="inline"><h4 id="Target.">Target:</h4>
<div class="target-">root scope</div>
</div>
<h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">next {Route} </code>
<p>Future route information.</p></li>
<li><code ng:non-bindable="">current {Route} </code>
<p>Current route information.</p></li>
</ul>
</div>
</li>
<li><h3 id="$routeChangeSuccess">$routeChangeSuccess</h3>
<div class="$routechangesuccess"><p>Broadcasted after a route dependencies are resolved.
<a href="api/ng.directive:ngView"><code>ngView</code></a> listens for the directive
to instantiate the controller and render the view.</p><div class="inline"><h4 id="Type.">Type:</h4>
<div class="type-">broadcast</div>
</div>
<div class="inline"><h4 id="Target.">Target:</h4>
<div class="target-">root scope</div>
</div>
<h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">current {Route} </code>
<p>Current route information.</p></li>
<li><code ng:non-bindable="">previous {Route} </code>
<p>Previous route information.</p></li>
</ul>
</div>
</li>
<li><h3 id="$routeUpdate">$routeUpdate</h3>
<div class="$routeupdate"><p>The <code>reloadOnSearch</code> property has been set to false, and we are reusing the same
instance of the Controller.</p><div class="inline"><h4 id="Type.">Type:</h4>
<div class="type-">broadcast</div>
</div>
<div class="inline"><h4 id="Target.">Target:</h4>
<div class="target-">root scope</div>
</div>
</div>
</li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>This example shows how changing the URL hash causes the <code>$route</code> to match a route against the
URL, and the <code>ngView</code> pulls in the partial.</p>
<p>Note that this example is using <a href="api/ng.directive:script"><code>inlined templates</code></a>
to get it working on jsfiddle as well.</p>
<h4>Source</h4>
<div source-edit="ngView" source-edit-deps="angular.js script.js" source-edit-html="index.html-215 book.html chapter.html" source-edit-css="" source-edit-js="script.js-216" source-edit-unit="" source-edit-scenario="scenario.js-217"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-215" ng-html-wrap="ngView angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-215">
<div ng-controller="MainCntl">
Choose:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>
</script>
</div>
<div class="tab-pane" title="book.html">
<pre class="prettyprint linenums" ng-set-text="book.html"></pre>
<script type="text/ng-template" id="book.html">
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
</script>
</div>
<div class="tab-pane" title="chapter.html">
<pre class="prettyprint linenums" ng-set-text="chapter.html"></pre>
<script type="text/ng-template" id="chapter.html">
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
Chapter Id: {{params.chapterId}}
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-216"></pre>
<script type="text/ng-template" id="script.js-216">
angular.module('ngView', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: BookCntl,
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: ChapterCntl
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
function MainCntl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}
function BookCntl($scope, $routeParams) {
$scope.name = "BookCntl";
$scope.params = $routeParams;
}
function ChapterCntl($scope, $routeParams) {
$scope.name = "ChapterCntl";
$scope.params = $routeParams;
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-217"></pre>
<script type="text/ng-template" id="scenario.js-217">
it('should load and compile correct template', function() {
element('a:contains("Moby: Ch1")').click();
var content = element('.doc-example-live [ng-view]').text();
expect(content).toMatch(/controller\: ChapterCntl/);
expect(content).toMatch(/Book Id\: Moby/);
expect(content).toMatch(/Chapter Id\: 1/);
element('a:contains("Scarlet")').click();
sleep(2); // promises are not part of scenario waiting
content = element('.doc-example-live [ng-view]').text();
expect(content).toMatch(/controller\: BookCntl/);
expect(content).toMatch(/Book Id\: Scarlet/);
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="ngView" ng-set-html="index.html-215" ng-eval-javascript="script.js-216"></div></div>
</div>

View file

@ -0,0 +1,27 @@
<h1><code ng:non-bindable="">$routeParams</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Current set of route parameters. The route parameters are a combination of the
<a href="api/ng.$location"><code>$location</code></a> <code>search()</code>, and <code>path()</code>. The <code>path</code> parameters
are extracted when the <a href="api/ng.$route"><code>$route</code></a> path is matched.</p>
<p>In case of parameter name collision, <code>path</code> params take precedence over <code>search</code> params.</p>
<p>The service guarantees that the identity of the <code>$routeParams</code> object will remain unchanged
(but its properties will likely change) even when a route change occurs.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$route">$route</a></code>
</li>
</ul>
<h2 id="Example">Example</h2>
<div class="example"><pre class="prettyprint linenums">
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==&gt; {chapterId:1, sectionId:2, search:'moby'}
</pre></div>
</div>

View file

@ -0,0 +1,92 @@
<h1><code ng:non-bindable="">$routeProvider</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Used for configuring routes. See <a href="api/ng.$route"><code>$route</code></a> for an example.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="otherwise">otherwise(params)</h3>
<div class="otherwise"><p>Sets route definition that will be used on route change when no other route definition
is matched.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">params {Object} </code>
<p>Mapping information to be assigned to <code>$route.current</code>.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>self</p></div>
</div>
</li>
<li><h3 id="when">when(path, route)</h3>
<div class="when"><p>Adds a new route definition to the <code>$route</code> service.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">path {string} </code>
<p>Route path (matched against <code>$location.path</code>). If <code>$location.path</code>
contains redundant trailing slash or is missing one, the route will still match and the
<code>$location.path</code> will be updated to add or drop the trailing slash to exactly match the
route definition.</p>
<p><code>path</code> can contain named groups starting with a colon (<code>:name</code>). All characters up to the
next slash are matched and stored in <code>$routeParams</code> under the given <code>name</code> when the route
matches.</p></li>
<li><code ng:non-bindable="">route {Object} </code>
<p>Mapping information to be assigned to <code>$route.current</code> on route
match.</p>
<p>Object properties:</p>
<ul>
<li><code>controller</code> <code>{(string|function()=}</code> Controller fn that should be associated with newly
created scope or the name of a <a href="api/angular.Module#controller"><code>registered controller</code></a>
if passed as a string.</li>
<li><p><code>template</code> <code>{string=|function()=}</code> html template as a string or function that returns
an html template as a string which should be used by <a href="api/ng.directive:ngView"><code>ngView</code></a> or
<a href="api/ng.directive:ngInclude"><code>ngInclude</code></a> directives.
This property takes precedence over <code>templateUrl</code>.</p>
<p>If <code>template</code> is a function, it will be called with the following parameters:</p>
<ul><li><code>{Array.&lt;Object&gt;}</code> - route parameters extracted from the current
<code>$location.path()</code> by applying the current route</li></ul></li>
<li><p><code>templateUrl</code> <code>{string=|function()=}</code> path or function that returns a path to an html
template that should be used by <a href="api/ng.directive:ngView"><code>ngView</code></a>.</p>
<p>If <code>templateUrl</code> is a function, it will be called with the following parameters:</p>
<ul><li><code>{Array.&lt;Object&gt;}</code> - route parameters extracted from the current
<code>$location.path()</code> by applying the current route</li></ul></li>
<li><p><code>resolve</code> - <code>{Object.&lt;string, function&gt;=}</code> - An optional map of dependencies which should
be injected into the controller. If any of these dependencies are promises, they will be
resolved and converted to a value before the controller is instantiated and the
<code>$routeChangeSuccess</code> event is fired. The map object is:</p>
<ul><li><code>key</code> <code>{string}</code>: a name of a dependency to be injected into the controller.</li>
<li><code>factory</code> - <code>{string|function}</code>: If <code>string</code> then it is an alias for a service.
Otherwise if function, then it is <a href="api/AUTO.$injector#invoke"><code>injected</code></a>
and the return value is treated as the dependency. If the result is a promise, it is resolved
before its value is injected into the controller.</li></ul></li>
<li><p><code>redirectTo</code> {(string|function())=} value to update
<a href="api/ng.$location"><code>$location</code></a> path with and trigger route redirection.</p>
<p>If <code>redirectTo</code> is a function, it will be called with the following parameters:</p>
<ul><li><code>{Object.&lt;string&gt;}</code> - route parameters extracted from the current
<code>$location.path()</code> by applying the current route templateUrl.</li>
<li><code>{string}</code> - current <code>$location.path()</code></li>
<li><code>{Object}</code> - current <code>$location.search()</code></li></ul>
<p>The custom <code>redirectTo</code> function is expected to return a string which will be used
to update <code>$location.path()</code> and <code>$location.search()</code>.</p></li>
<li><p><code>[reloadOnSearch=true]</code> - {boolean=} - reload route when only $location.search()
changes.</p>
<p>If the option is set to <code>false</code> and url in the browser changes, then
<code>$routeUpdate</code> event is broadcasted on the root scope.</p></li>
</ul></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{Object}</code>
<p>self</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,9 @@
<h1><code ng:non-bindable="">$templateCache</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Cache used for storing html templates.</p>
<p>See <a href="api/ng.$cacheFactory"><code>$cacheFactory</code></a>.</p></div>
</div>

View file

@ -0,0 +1,52 @@
<h1><code ng:non-bindable="">$timeout</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Angular's wrapper for <code>window.setTimeout</code>. The <code>fn</code> function is wrapped into a try/catch
block and delegates any exceptions to
<a href="api/ng.$exceptionHandler"><code>$exceptionHandler</code></a> service.</p>
<p>The return value of registering a timeout function is a promise which will be resolved when
the timeout is reached and the timeout function is executed.</p>
<p>To cancel a the timeout request, call <code>$timeout.cancel(promise)</code>.</p>
<p>In tests you can use <a href="api/ngMock.$timeout"><code>$timeout.flush()</code></a> to
synchronously flush the queue of deferred functions.</p></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$browser">$browser</a></code>
</li>
</ul>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$timeout(fn[, delay][, invokeApply]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">fn {function()} </code>
<p>A function, who's execution should be delayed.</p></li>
<li><code ng:non-bindable="">delay<i>(optional=0)</i> {number=} </code>
<p>Delay in milliseconds.</p></li>
<li><code ng:non-bindable="">invokeApply<i>(optional=true)</i> {boolean=} </code>
<p>If set to false skips model dirty checking, otherwise
will invoke <code>fn</code> within the <a href="api/ng.$rootScope.Scope#$apply"><code>$apply</code></a> block.</p></li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{Promise}</code>
<p>Promise that will be resolved when the timeout is reached. The value this
promise will be resolved with is the return value of the <code>fn</code> function.</p></div>
</div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="cancel">cancel(promise)</h3>
<div class="cancel"><p>Cancels a task associated with the <code>promise</code>. As a result of this the promise will be
resolved with a rejection.</p><h4 id="Parameters">Parameters</h4>
<ul class="parameters"><li><code ng:non-bindable="">promise<i>(optional)</i> {Promise=} </code>
<p>Promise returned by the <code>$timeout</code> function.</p></li>
</ul>
<h4 id="Returns">Returns</h4>
<div class="returns"><code ng:non-bindable="">{boolean}</code>
<p>Returns <code>true</code> if the task hasn't executed yet and was successfully
canceled.</p></div>
</div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,30 @@
<h1><code ng:non-bindable="">$window</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>A reference to the browser's <code>window</code> object. While <code>window</code>
is globally available in JavaScript, it causes testability problems, because
it is a global variable. In angular we always refer to it through the
<code>$window</code> service, so it may be overriden, removed or mocked for testing.</p>
<p>All expressions are evaluated with respect to current scope so they don't
suffer from window globality.</p></div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-218" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-219"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-218" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-218">
<input ng-init="$window = $service('$window'); greeting='Hello World!'" type="text" ng-model="greeting" />
<button ng-click="$window.alert(greeting)">ALERT</button>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-219"></pre>
<script type="text/ng-template" id="scenario.js-219">
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-218" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,16 @@
<h1><code ng:non-bindable="">a</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Modifies the default behavior of html A tag, so that the default action is prevented when href
attribute is empty.</p>
<p>The reasoning for this change is to allow easy creation of action links with <code>ngClick</code> directive
without changing the location or causing page reloads, e.g.:
<a href="" ng-click="model.$save()">Save</a></p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as element (see <a href="guide/ie">IE restrictions</a>)<pre class="prettyprint linenums">&lt;a&gt;
&lt;/a&gt;</pre>
</div>
</div>

View file

@ -0,0 +1,48 @@
<h1><code ng:non-bindable="">FormController</code>
<span class="hint">(type in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p><code>FormController</code> keeps track of all its controls and nested forms as well as state of them,
such as being valid/invalid or dirty/pristine.</p>
<p>Each <a href="api/ng.directive:form"><code>form</code></a> directive creates an instance
of <code>FormController</code>.</p></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="$setPristine">$setPristine()</h3>
<div class="$setpristine"><p>Sets the form to its pristine state.</p>
<p>This method can be called to remove the 'ng-dirty' class and set the form to its pristine
state (ng-pristine class). This method will also propagate to all the controls contained
in this form.</p>
<p>Setting a form back to a pristine state is often useful when we want to 'reuse' a form after
saving or resetting it.</p></div>
</li>
</ul>
</div>
<div class="member property"><h2 id="Properties">Properties</h2>
<ul class="properties"><li><h3 id="$pristine">$pristine</h3>
<div class="$pristine"><p>True if user has not interacted with the form yet.</p></div>
</li>
<li><h3 id="$dirty">$dirty</h3>
<div class="$dirty"><p>True if user has already interacted with the form.</p></div>
</li>
<li><h3 id="$valid">$valid</h3>
<div class="$valid"><p>True if all of the containing forms and controls are valid.</p></div>
</li>
<li><h3 id="$invalid">$invalid</h3>
<div class="$invalid"><p>True if at least one containing control or form is invalid.</p></div>
</li>
<li><h3 id="$error">$error</h3>
<div class="$error"><p>Is an object hash, containing references to all invalid controls or
forms, where:</p>
<ul>
<li>keys are validation tokens (error names) — such as <code>required</code>, <code>url</code> or <code>email</code>),</li>
<li>values are arrays of controls or forms that are invalid with given error.</li>
</ul></div>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,112 @@
<h1><code ng:non-bindable="">form</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Directive that instantiates
<a href="api/ng.directive:form.FormController"><code>FormController</code></a>.</p>
<p>If <code>name</code> attribute is specified, the form controller is published onto the current scope under
this name.</p>
<h3>Alias: <a href="api/ng.directive:ngForm"><code><code>ngForm</code></code></a></h3>
<p>In angular forms can be nested. This means that the outer form is valid when all of the child
forms are valid as well. However browsers do not allow nesting of <code>&lt;form&gt;</code> elements, for this
reason angular provides <a href="api/ng.directive:ngForm"><code><code>ngForm</code></code></a> alias
which behaves identical to <code>&lt;form&gt;</code> but allows form nesting.</p>
<h3>CSS classes</h3>
<ul>
<li><code>ng-valid</code> Is set if the form is valid.</li>
<li><code>ng-invalid</code> Is set if the form is invalid.</li>
<li><code>ng-pristine</code> Is set if the form is pristine.</li>
<li><code>ng-dirty</code> Is set if the form is dirty.</li>
</ul>
<h3>Submitting a form and preventing default action</h3>
<p>Since the role of forms in client-side Angular applications is different than in classical
roundtrip apps, it is desirable for the browser not to translate the form submission into a full
page reload that sends the data to the server. Instead some javascript logic should be triggered
to handle the form submission in application specific way.</p>
<p>For this reason, Angular prevents the default action (form submission to the server) unless the
<code>&lt;form&gt;</code> element has an <code>action</code> attribute specified.</p>
<p>You can use one of the following two ways to specify what javascript method should be called when
a form is submitted:</p>
<ul>
<li><a href="api/ng.directive:ngSubmit"><code>ngSubmit</code></a> directive on the form element</li>
<li><a href="api/ng.directive:ngClick"><code>ngClick</code></a> directive on the first
button or input field of type submit (input[type=submit])</li>
</ul>
<p>To prevent double execution of the handler, use only one of ngSubmit or ngClick directives. This
is because of the following form submission rules coming from the html spec:</p>
<ul>
<li>If a form has only one input field then hitting enter in this field triggers form submit
(<code>ngSubmit</code>)</li>
<li>if a form has has 2+ input fields and no buttons or input[type=submit] then hitting enter
doesn't trigger submit</li>
<li>if a form has one or more input fields and one or more buttons or input[type=submit] then
hitting enter in any of the input fields will trigger the click handler on the <em>first</em> button or
input[type=submit] (<code>ngClick</code>) <em>and</em> a submit handler on the enclosing form (<code>ngSubmit</code>)</li>
</ul></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as element (see <a href="guide/ie">IE restrictions</a>)<pre class="prettyprint linenums">&lt;form
[name="{string}"]&gt;
&lt;/form&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">name<i>(optional)</i> {string=} </code>
<p>Name of the form. If specified, the form controller will be published into
related scope, under this name.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-101" source-edit-css="" source-edit-js="script.js-100" source-edit-unit="" source-edit-scenario="scenario.js-102"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-101" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-101">
<form name="myForm" ng-controller="Ctrl">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<tt>userType = {{userType}}</tt><br>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
</form>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-100"></pre>
<script type="text/ng-template" id="script.js-100">
function Ctrl($scope) {
$scope.userType = 'guest';
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-102"></pre>
<script type="text/ng-template" id="scenario.js-102">
it('should initialize to model', function() {
expect(binding('userType')).toEqual('guest');
expect(binding('myForm.input.$valid')).toEqual('true');
});
it('should be invalid if empty', function() {
input('userType').enter('');
expect(binding('userType')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-101" ng-eval-javascript="script.js-100"></div></div>
</div>

View file

@ -0,0 +1,69 @@
<h1><code ng:non-bindable="">input [checkbox]</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>HTML checkbox.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">&lt;input type="checkbox"
ng-model="{string}"
[name="{string}"]
[ng-true-value="{string}"]
[ng-false-value="{string}"]
[ng-change="{string}"]&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngModel {string} </code>
<p>Assignable angular expression to data-bind to.</p></li>
<li><code ng:non-bindable="">name<i>(optional)</i> {string=} </code>
<p>Property name of the form under which the control is published.</p></li>
<li><code ng:non-bindable="">ngTrueValue<i>(optional)</i> {string=} </code>
<p>The value to which the expression should be set when selected.</p></li>
<li><code ng:non-bindable="">ngFalseValue<i>(optional)</i> {string=} </code>
<p>The value to which the expression should be set when not selected.</p></li>
<li><code ng:non-bindable="">ngChange<i>(optional)</i> {string=} </code>
<p>Angular expression to be executed when input changes due to user
interaction with the input element.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-125" source-edit-css="" source-edit-js="script.js-124" source-edit-unit="" source-edit-scenario="scenario.js-126"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-125" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-125">
<form name="myForm" ng-controller="Ctrl">
Value1: <input type="checkbox" ng-model="value1"> <br/>
Value2: <input type="checkbox" ng-model="value2"
ng-true-value="YES" ng-false-value="NO"> <br/>
<tt>value1 = {{value1}}</tt><br/>
<tt>value2 = {{value2}}</tt><br/>
</form>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-124"></pre>
<script type="text/ng-template" id="script.js-124">
function Ctrl($scope) {
$scope.value1 = true;
$scope.value2 = 'YES'
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-126"></pre>
<script type="text/ng-template" id="scenario.js-126">
it('should change state', function() {
expect(binding('value1')).toEqual('true');
expect(binding('value2')).toEqual('YES');
input('value1').check();
input('value2').check();
expect(binding('value1')).toEqual('false');
expect(binding('value2')).toEqual('NO');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-125" ng-eval-javascript="script.js-124"></div></div>
</div>

View file

@ -0,0 +1,92 @@
<h1><code ng:non-bindable="">input [email]</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Text input with email validation. Sets the <code>email</code> validation error key if not a valid email
address.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">&lt;input type="email"
ng-model="{string}"
[name="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngModel {string} </code>
<p>Assignable angular expression to data-bind to.</p></li>
<li><code ng:non-bindable="">name<i>(optional)</i> {string=} </code>
<p>Property name of the form under which the control is published.</p></li>
<li><code ng:non-bindable="">required<i>(optional)</i> {string=} </code>
<p>Sets <code>required</code> validation error key if the value is not entered.</p></li>
<li><code ng:non-bindable="">ngRequired<i>(optional)</i> {string=} </code>
<p>Adds <code>required</code> attribute and <code>required</code> validation constraint to
the element when the ngRequired expression evaluates to true. Use <code>ngRequired</code> instead of
<code>required</code> when you want to data-bind to the <code>required</code> attribute.</p></li>
<li><code ng:non-bindable="">ngMinlength<i>(optional)</i> {number=} </code>
<p>Sets <code>minlength</code> validation error key if the value is shorter than
minlength.</p></li>
<li><code ng:non-bindable="">ngMaxlength<i>(optional)</i> {number=} </code>
<p>Sets <code>maxlength</code> validation error key if the value is longer than
maxlength.</p></li>
<li><code ng:non-bindable="">ngPattern<i>(optional)</i> {string=} </code>
<p>Sets <code>pattern</code> validation error key if the value does not match the
RegExp pattern expression. Expected value is <code>/regexp/</code> for inline patterns or <code>regexp</code> for
patterns defined as scope expressions.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-119" source-edit-css="" source-edit-js="script.js-118" source-edit-unit="" source-edit-scenario="scenario.js-120"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-119" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-119">
<form name="myForm" ng-controller="Ctrl">
Email: <input type="email" name="input" ng-model="text" required>
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.email">
Not valid email!</span>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-118"></pre>
<script type="text/ng-template" id="script.js-118">
function Ctrl($scope) {
$scope.text = 'me@example.com';
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-120"></pre>
<script type="text/ng-template" id="scenario.js-120">
it('should initialize to model', function() {
expect(binding('text')).toEqual('me@example.com');
expect(binding('myForm.input.$valid')).toEqual('true');
});
it('should be invalid if empty', function() {
input('text').enter('');
expect(binding('text')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
});
it('should be invalid if not email', function() {
input('text').enter('xxx');
expect(binding('myForm.input.$valid')).toEqual('false');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-119" ng-eval-javascript="script.js-118"></div></div>
</div>

View file

@ -0,0 +1,126 @@
<h1><code ng:non-bindable="">input</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>HTML input element control with angular data-binding. Input control follows HTML5 input types
and polyfills the HTML5 validation behavior for older browsers.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as element (see <a href="guide/ie">IE restrictions</a>)<pre class="prettyprint linenums">&lt;input
ngModel="{string}"
[name="{string}"]
[required]
[ngRequired="{boolean}"]
[ngMinlength="{number}"]
[ngMaxlength="{number}"]
[ngPattern="{string}"]
[ngChange="{string}"]&gt;
&lt;/input&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngModel {string} </code>
<p>Assignable angular expression to data-bind to.</p></li>
<li><code ng:non-bindable="">name<i>(optional)</i> {string=} </code>
<p>Property name of the form under which the control is published.</p></li>
<li><code ng:non-bindable="">required<i>(optional)</i> {string=} </code>
<p>Sets <code>required</code> validation error key if the value is not entered.</p></li>
<li><code ng:non-bindable="">ngRequired<i>(optional)</i> {boolean=} </code>
<p>Sets <code>required</code> attribute if set to true</p></li>
<li><code ng:non-bindable="">ngMinlength<i>(optional)</i> {number=} </code>
<p>Sets <code>minlength</code> validation error key if the value is shorter than
minlength.</p></li>
<li><code ng:non-bindable="">ngMaxlength<i>(optional)</i> {number=} </code>
<p>Sets <code>maxlength</code> validation error key if the value is longer than
maxlength.</p></li>
<li><code ng:non-bindable="">ngPattern<i>(optional)</i> {string=} </code>
<p>Sets <code>pattern</code> validation error key if the value does not match the
RegExp pattern expression. Expected value is <code>/regexp/</code> for inline patterns or <code>regexp</code> for
patterns defined as scope expressions.</p></li>
<li><code ng:non-bindable="">ngChange<i>(optional)</i> {string=} </code>
<p>Angular expression to be executed when input changes due to user
interaction with the input element.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-128" source-edit-css="" source-edit-js="script.js-127" source-edit-unit="" source-edit-scenario="scenario.js-129"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-128" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-128">
<div ng-controller="Ctrl">
<form name="myForm">
User name: <input type="text" name="userName" ng-model="user.name" required>
<span class="error" ng-show="myForm.userName.$error.required">
Required!</span><br>
Last name: <input type="text" name="lastName" ng-model="user.last"
ng-minlength="3" ng-maxlength="10">
<span class="error" ng-show="myForm.lastName.$error.minlength">
Too short!</span>
<span class="error" ng-show="myForm.lastName.$error.maxlength">
Too long!</span><br>
</form>
<hr>
<tt>user = {{user}}</tt><br/>
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
<tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
<tt>myForm.userName.$error = {{myForm.lastName.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-127"></pre>
<script type="text/ng-template" id="script.js-127">
function Ctrl($scope) {
$scope.user = {name: 'guest', last: 'visitor'};
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-129"></pre>
<script type="text/ng-template" id="scenario.js-129">
it('should initialize to model', function() {
expect(binding('user')).toEqual('{"name":"guest","last":"visitor"}');
expect(binding('myForm.userName.$valid')).toEqual('true');
expect(binding('myForm.$valid')).toEqual('true');
});
it('should be invalid if empty when required', function() {
input('user.name').enter('');
expect(binding('user')).toEqual('{"last":"visitor"}');
expect(binding('myForm.userName.$valid')).toEqual('false');
expect(binding('myForm.$valid')).toEqual('false');
});
it('should be valid if empty when min length is set', function() {
input('user.last').enter('');
expect(binding('user')).toEqual('{"name":"guest","last":""}');
expect(binding('myForm.lastName.$valid')).toEqual('true');
expect(binding('myForm.$valid')).toEqual('true');
});
it('should be invalid if less than required min length', function() {
input('user.last').enter('xx');
expect(binding('user')).toEqual('{"name":"guest"}');
expect(binding('myForm.lastName.$valid')).toEqual('false');
expect(binding('myForm.lastName.$error')).toMatch(/minlength/);
expect(binding('myForm.$valid')).toEqual('false');
});
it('should be invalid if longer than max length', function() {
input('user.last').enter('some ridiculously long name');
expect(binding('user'))
.toEqual('{"name":"guest"}');
expect(binding('myForm.lastName.$valid')).toEqual('false');
expect(binding('myForm.lastName.$error')).toMatch(/maxlength/);
expect(binding('myForm.$valid')).toEqual('false');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-128" ng-eval-javascript="script.js-127"></div></div>
</div>

View file

@ -0,0 +1,103 @@
<h1><code ng:non-bindable="">input [number]</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Text input with number validation and transformation. Sets the <code>number</code> validation
error if not a valid number.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">&lt;input type="number"
ng-model="{string}"
[name="{string}"]
[min="{string}"]
[max="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]
[ng-change="{string}"]&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngModel {string} </code>
<p>Assignable angular expression to data-bind to.</p></li>
<li><code ng:non-bindable="">name<i>(optional)</i> {string=} </code>
<p>Property name of the form under which the control is published.</p></li>
<li><code ng:non-bindable="">min<i>(optional)</i> {string=} </code>
<p>Sets the <code>min</code> validation error key if the value entered is less then <code>min</code>.</p></li>
<li><code ng:non-bindable="">max<i>(optional)</i> {string=} </code>
<p>Sets the <code>max</code> validation error key if the value entered is greater then <code>min</code>.</p></li>
<li><code ng:non-bindable="">required<i>(optional)</i> {string=} </code>
<p>Sets <code>required</code> validation error key if the value is not entered.</p></li>
<li><code ng:non-bindable="">ngRequired<i>(optional)</i> {string=} </code>
<p>Adds <code>required</code> attribute and <code>required</code> validation constraint to
the element when the ngRequired expression evaluates to true. Use <code>ngRequired</code> instead of
<code>required</code> when you want to data-bind to the <code>required</code> attribute.</p></li>
<li><code ng:non-bindable="">ngMinlength<i>(optional)</i> {number=} </code>
<p>Sets <code>minlength</code> validation error key if the value is shorter than
minlength.</p></li>
<li><code ng:non-bindable="">ngMaxlength<i>(optional)</i> {number=} </code>
<p>Sets <code>maxlength</code> validation error key if the value is longer than
maxlength.</p></li>
<li><code ng:non-bindable="">ngPattern<i>(optional)</i> {string=} </code>
<p>Sets <code>pattern</code> validation error key if the value does not match the
RegExp pattern expression. Expected value is <code>/regexp/</code> for inline patterns or <code>regexp</code> for
patterns defined as scope expressions.</p></li>
<li><code ng:non-bindable="">ngChange<i>(optional)</i> {string=} </code>
<p>Angular expression to be executed when input changes due to user
interaction with the input element.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-113" source-edit-css="" source-edit-js="script.js-112" source-edit-unit="" source-edit-scenario="scenario.js-114"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-113" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-113">
<form name="myForm" ng-controller="Ctrl">
Number: <input type="number" name="input" ng-model="value"
min="0" max="99" required>
<span class="error" ng-show="myForm.list.$error.required">
Required!</span>
<span class="error" ng-show="myForm.list.$error.number">
Not valid number!</span>
<tt>value = {{value}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-112"></pre>
<script type="text/ng-template" id="script.js-112">
function Ctrl($scope) {
$scope.value = 12;
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-114"></pre>
<script type="text/ng-template" id="scenario.js-114">
it('should initialize to model', function() {
expect(binding('value')).toEqual('12');
expect(binding('myForm.input.$valid')).toEqual('true');
});
it('should be invalid if empty', function() {
input('value').enter('');
expect(binding('value')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
});
it('should be invalid if over max', function() {
input('value').enter('123');
expect(binding('value')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-113" ng-eval-javascript="script.js-112"></div></div>
</div>

View file

@ -0,0 +1,61 @@
<h1><code ng:non-bindable="">input [radio]</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>HTML radio button.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">&lt;input type="radio"
ng-model="{string}"
value="{string}"
[name="{string}"]
[ng-change="{string}"]&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngModel {string} </code>
<p>Assignable angular expression to data-bind to.</p></li>
<li><code ng:non-bindable="">value {string} </code>
<p>The value to which the expression should be set when selected.</p></li>
<li><code ng:non-bindable="">name<i>(optional)</i> {string=} </code>
<p>Property name of the form under which the control is published.</p></li>
<li><code ng:non-bindable="">ngChange<i>(optional)</i> {string=} </code>
<p>Angular expression to be executed when input changes due to user
interaction with the input element.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-122" source-edit-css="" source-edit-js="script.js-121" source-edit-unit="" source-edit-scenario="scenario.js-123"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-122" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-122">
<form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" value="green"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color}}</tt><br/>
</form>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-121"></pre>
<script type="text/ng-template" id="script.js-121">
function Ctrl($scope) {
$scope.color = 'blue';
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-123"></pre>
<script type="text/ng-template" id="scenario.js-123">
it('should change state', function() {
expect(binding('color')).toEqual('blue');
input('color').select('red');
expect(binding('color')).toEqual('red');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-122" ng-eval-javascript="script.js-121"></div></div>
</div>

View file

@ -0,0 +1,107 @@
<h1><code ng:non-bindable="">input [text]</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Standard HTML text input with angular data binding.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">&lt;input type="text"
ng-model="{string}"
[name="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]
[ng-change="{string}"]
[ng-trim="{boolean}"]&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngModel {string} </code>
<p>Assignable angular expression to data-bind to.</p></li>
<li><code ng:non-bindable="">name<i>(optional)</i> {string=} </code>
<p>Property name of the form under which the control is published.</p></li>
<li><code ng:non-bindable="">required<i>(optional)</i> {string=} </code>
<p>Adds <code>required</code> validation error key if the value is not entered.</p></li>
<li><code ng:non-bindable="">ngRequired<i>(optional)</i> {string=} </code>
<p>Adds <code>required</code> attribute and <code>required</code> validation constraint to
the element when the ngRequired expression evaluates to true. Use <code>ngRequired</code> instead of
<code>required</code> when you want to data-bind to the <code>required</code> attribute.</p></li>
<li><code ng:non-bindable="">ngMinlength<i>(optional)</i> {number=} </code>
<p>Sets <code>minlength</code> validation error key if the value is shorter than
minlength.</p></li>
<li><code ng:non-bindable="">ngMaxlength<i>(optional)</i> {number=} </code>
<p>Sets <code>maxlength</code> validation error key if the value is longer than
maxlength.</p></li>
<li><code ng:non-bindable="">ngPattern<i>(optional)</i> {string=} </code>
<p>Sets <code>pattern</code> validation error key if the value does not match the
RegExp pattern expression. Expected value is <code>/regexp/</code> for inline patterns or <code>regexp</code> for
patterns defined as scope expressions.</p></li>
<li><code ng:non-bindable="">ngChange<i>(optional)</i> {string=} </code>
<p>Angular expression to be executed when input changes due to user
interaction with the input element.</p></li>
<li><code ng:non-bindable="">ngTrim<i>(optional=true)</i> {boolean=} </code>
<p>If set to false Angular will not automatically trimming the
input.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-110" source-edit-css="" source-edit-js="script.js-109" source-edit-unit="" source-edit-scenario="scenario.js-111"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-110" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-110">
<form name="myForm" ng-controller="Ctrl">
Single word: <input type="text" name="input" ng-model="text"
ng-pattern="word" required ng-trim="false">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.pattern">
Single word only!</span>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-109"></pre>
<script type="text/ng-template" id="script.js-109">
function Ctrl($scope) {
$scope.text = 'guest';
$scope.word = /^\s*\w*\s*$/;
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-111"></pre>
<script type="text/ng-template" id="scenario.js-111">
it('should initialize to model', function() {
expect(binding('text')).toEqual('guest');
expect(binding('myForm.input.$valid')).toEqual('true');
});
it('should be invalid if empty', function() {
input('text').enter('');
expect(binding('text')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
});
it('should be invalid if multi word', function() {
input('text').enter('hello world');
expect(binding('myForm.input.$valid')).toEqual('false');
});
it('should not be trimmed', function() {
input('text').enter('untrimmed ');
expect(binding('text')).toEqual('untrimmed ');
expect(binding('myForm.input.$valid')).toEqual('true');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-110" ng-eval-javascript="script.js-109"></div></div>
</div>

View file

@ -0,0 +1,96 @@
<h1><code ng:non-bindable="">input [url]</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Text input with URL validation. Sets the <code>url</code> validation error key if the content is not a
valid URL.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">&lt;input type="url"
ng-model="{string}"
[name="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]
[ng-change="{string}"]&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngModel {string} </code>
<p>Assignable angular expression to data-bind to.</p></li>
<li><code ng:non-bindable="">name<i>(optional)</i> {string=} </code>
<p>Property name of the form under which the control is published.</p></li>
<li><code ng:non-bindable="">required<i>(optional)</i> {string=} </code>
<p>Sets <code>required</code> validation error key if the value is not entered.</p></li>
<li><code ng:non-bindable="">ngRequired<i>(optional)</i> {string=} </code>
<p>Adds <code>required</code> attribute and <code>required</code> validation constraint to
the element when the ngRequired expression evaluates to true. Use <code>ngRequired</code> instead of
<code>required</code> when you want to data-bind to the <code>required</code> attribute.</p></li>
<li><code ng:non-bindable="">ngMinlength<i>(optional)</i> {number=} </code>
<p>Sets <code>minlength</code> validation error key if the value is shorter than
minlength.</p></li>
<li><code ng:non-bindable="">ngMaxlength<i>(optional)</i> {number=} </code>
<p>Sets <code>maxlength</code> validation error key if the value is longer than
maxlength.</p></li>
<li><code ng:non-bindable="">ngPattern<i>(optional)</i> {string=} </code>
<p>Sets <code>pattern</code> validation error key if the value does not match the
RegExp pattern expression. Expected value is <code>/regexp/</code> for inline patterns or <code>regexp</code> for
patterns defined as scope expressions.</p></li>
<li><code ng:non-bindable="">ngChange<i>(optional)</i> {string=} </code>
<p>Angular expression to be executed when input changes due to user
interaction with the input element.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-116" source-edit-css="" source-edit-js="script.js-115" source-edit-unit="" source-edit-scenario="scenario.js-117"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-116" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-116">
<form name="myForm" ng-controller="Ctrl">
URL: <input type="url" name="input" ng-model="text" required>
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.url">
Not valid url!</span>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
</form>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-115"></pre>
<script type="text/ng-template" id="script.js-115">
function Ctrl($scope) {
$scope.text = 'http://google.com';
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-117"></pre>
<script type="text/ng-template" id="scenario.js-117">
it('should initialize to model', function() {
expect(binding('text')).toEqual('http://google.com');
expect(binding('myForm.input.$valid')).toEqual('true');
});
it('should be invalid if empty', function() {
input('text').enter('');
expect(binding('text')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
});
it('should be invalid if not url', function() {
input('text').enter('xxx');
expect(binding('myForm.input.$valid')).toEqual('false');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-116" ng-eval-javascript="script.js-115"></div></div>
</div>

View file

@ -0,0 +1,40 @@
<h1><code ng:non-bindable="">ngApp</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Use this directive to auto-bootstrap on application. Only
one directive can be used per HTML document. The directive
designates the root of the application and is typically placed
ot the root of the page.</p>
<p>In the example below if the <code>ngApp</code> directive would not be placed
on the <code>html</code> element then the document would not be compiled
and the <code>{{ 1+2 }}</code> would not be resolved to <code>3</code>.</p>
<p><code>ngApp</code> is the easiest way to bootstrap an application.</p>
<h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-82" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-82" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-82">
I can add: 1 + 2 = {{ 1+2 }}
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-82" ng-eval-javascript=""></div></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-app="{angular.Module}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-app: {angular.Module};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngApp {angular.Module} </code>
<p>an optional application
<a href="api/angular.module"><code>module</code></a> name to load.</p></li>
</ul>
</div>
</div>

View file

@ -0,0 +1,66 @@
<h1><code ng:non-bindable="">ngBind</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngBind</code> attribute tells Angular to replace the text content of the specified HTML element
with the value of a given expression, and to update the text content when the value of that
expression changes.</p>
<p>Typically, you don't use <code>ngBind</code> directly, but instead you use the double curly markup like
<code>{{ expression }}</code> which is similar but less verbose.</p>
<p>Once scenario in which the use of <code>ngBind</code> is prefered over <code>{{ expression }}</code> binding is when
it's desirable to put bindings into template that is momentarily displayed by the browser in its
raw state before Angular compiles it. Since <code>ngBind</code> is an element attribute, it makes the
bindings invisible to the user while the page is loading.</p>
<p>An alternative solution to this problem would be using the
<a href="api/ng.directive:ngCloak"><code>ngCloak</code></a> directive.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-bind="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-bind: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngBind {expression} </code>
<p><a href="guide/expression">Expression</a> to evaluate.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>Enter a name in the Live Preview text box; the greeting below the text box changes instantly.
<h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-104" source-edit-css="" source-edit-js="script.js-103" source-edit-unit="" source-edit-scenario="scenario.js-105"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-104" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-104">
<div ng-controller="Ctrl">
Enter name: <input type="text" ng-model="name"><br>
Hello <span ng-bind="name"></span>!
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-103"></pre>
<script type="text/ng-template" id="script.js-103">
function Ctrl($scope) {
$scope.name = 'Whirled';
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-105"></pre>
<script type="text/ng-template" id="scenario.js-105">
it('should check ng-bind', function() {
expect(using('.doc-example-live').binding('name')).toBe('Whirled');
using('.doc-example-live').input('name').enter('world');
expect(using('.doc-example-live').binding('name')).toBe('world');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-104" ng-eval-javascript="script.js-103"></div></div>
</div>

View file

@ -0,0 +1,24 @@
<h1><code ng:non-bindable="">ngBindHtmlUnsafe</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Creates a binding that will innerHTML the result of evaluating the <code>expression</code> into the current
element. <em>The innerHTML-ed content will not be sanitized!</em> You should use this directive only if
<a href="api/ngSanitize.directive:ngBindHtml">ngBindHtml</a> directive is too
restrictive and when you absolutely trust the source of the content you are binding to.</p>
<p>See <a href="api/ngSanitize.$sanitize">$sanitize</a> docs for examples.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-bind-html-unsafe="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-bind-html-unsafe: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngBindHtmlUnsafe {expression} </code>
<p><a href="guide/expression">Expression</a> to evaluate.</p></li>
</ul>
</div>
</div>

View file

@ -0,0 +1,67 @@
<h1><code ng:non-bindable="">ngBindTemplate</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngBindTemplate</code> directive specifies that the element
text should be replaced with the template in ngBindTemplate.
Unlike ngBind the ngBindTemplate can contain multiple <code>{{</code> <code>}}</code>
expressions. (This is required since some HTML elements
can not have SPAN elements such as TITLE, or OPTION to name a few.)</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-bind-template="{string}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-bind-template: {string};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngBindTemplate {string} </code>
<p>template of form
<tt>{{</tt> <tt>expression</tt> <tt>}}</tt> to eval.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>Try it here: enter text in text box and watch the greeting change.
<h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-107" source-edit-css="" source-edit-js="script.js-106" source-edit-unit="" source-edit-scenario="scenario.js-108"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-107" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-107">
<div ng-controller="Ctrl">
Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><br>
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-106"></pre>
<script type="text/ng-template" id="script.js-106">
function Ctrl($scope) {
$scope.salutation = 'Hello';
$scope.name = 'World';
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-108"></pre>
<script type="text/ng-template" id="scenario.js-108">
it('should check ng-bind', function() {
expect(using('.doc-example-live').binding('salutation')).
toBe('Hello');
expect(using('.doc-example-live').binding('name')).
toBe('World');
using('.doc-example-live').input('salutation').enter('Greetings');
using('.doc-example-live').input('name').enter('user');
expect(using('.doc-example-live').binding('salutation')).
toBe('Greetings');
expect(using('.doc-example-live').binding('name')).
toBe('user');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-107" ng-eval-javascript="script.js-106"></div></div>
</div>

View file

@ -0,0 +1,60 @@
<h1><code ng:non-bindable="">ngChange</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Evaluate given expression when user changes the input.
The expression is not evaluated when the value change is coming from the model.</p>
<p>Note, this directive requires <code>ngModel</code> to be present.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as element (see <a href="guide/ie">IE restrictions</a>)<pre class="prettyprint linenums">&lt;ng-change&gt;
&lt;/ng-change&gt;</pre>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-135" source-edit-css="" source-edit-js="script.js-134" source-edit-unit="" source-edit-scenario="scenario.js-136"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-135" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-135">
<div ng-controller="Controller">
<input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
<input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
<label for="ng-change-example2">Confirmed</label><br />
debug = {{confirmed}}<br />
counter = {{counter}}
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-134"></pre>
<script type="text/ng-template" id="script.js-134">
function Controller($scope) {
$scope.counter = 0;
$scope.change = function() {
$scope.counter++;
};
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-136"></pre>
<script type="text/ng-template" id="scenario.js-136">
it('should evaluate the expression if changing from view', function() {
expect(binding('counter')).toEqual('0');
element('#ng-change-example1').click();
expect(binding('counter')).toEqual('1');
expect(binding('confirmed')).toEqual('true');
});
it('should not evaluate the expression if changing from model', function() {
element('#ng-change-example2').click();
expect(binding('counter')).toEqual('0');
expect(binding('confirmed')).toEqual('true');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-135" ng-eval-javascript="script.js-134"></div></div>
</div>

View file

@ -0,0 +1,41 @@
<h1><code ng:non-bindable="">ngChecked</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The HTML specs do not require browsers to preserve the special attributes such as checked.
(The presence of them means true and absence means false)
This prevents the angular compiler from correctly retrieving the binding expression.
To solve this problem, we introduce the <code>ngChecked</code> directive.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;INPUT ng-checked="{expression}"&gt;
...
&lt;/INPUT&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngChecked {expression} </code>
<p>Angular expression that will be evaluated.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-90" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-91"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-90" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-90">
Check me to check both: <input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master">
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-91"></pre>
<script type="text/ng-template" id="scenario.js-91">
it('should check both checkBoxes', function() {
expect(element('.doc-example-live #checkSlave').prop('checked')).toBeFalsy();
input('master').check();
expect(element('.doc-example-live #checkSlave').prop('checked')).toBeTruthy();
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-90" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,68 @@
<h1><code ng:non-bindable="">ngClass</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngClass</code> allows you to set CSS class on HTML element dynamically by databinding an
expression that represents all classes to be added.</p>
<p>The directive won't add duplicate classes if a particular class was already set.</p>
<p>When the expression changes, the previously added classes are removed and only then the classes
new classes are added.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-class="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-class: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngClass {expression} </code>
<p><a href="guide/expression">Expression</a> to eval. The result
of the evaluation can be a string representing space delimited class
names, an array, or a map of class names to boolean values.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-140" source-edit-css="style.css-141" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-142"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-140" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-140">
<input type="button" value="set" ng-click="myVar='my-class'">
<input type="button" value="clear" ng-click="myVar=''">
<br>
<span ng-class="myVar">Sample Text</span>
</script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-141"></pre>
<style type="text/css" id="style.css-141">
.my-class {
color: red;
}
</style>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-142"></pre>
<script type="text/ng-template" id="scenario.js-142">
it('should check ng-class', function() {
expect(element('.doc-example-live span').prop('className')).not().
toMatch(/my-class/);
using('.doc-example-live').element(':button:first').click();
expect(element('.doc-example-live span').prop('className')).
toMatch(/my-class/);
using('.doc-example-live').element(':button:last').click();
expect(element('.doc-example-live span').prop('className')).not().
toMatch(/my-class/);
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-140" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,64 @@
<h1><code ng:non-bindable="">ngClassEven</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngClassOdd</code> and <code>ngClassEven</code> works exactly as
<a href="api/ng.directive:ngClass"><code>ngClass</code></a>, except it works in
conjunction with <code>ngRepeat</code> and takes affect only on odd (even) rows.</p>
<p>This directive can be applied only within a scope of an
<a href="api/ng.directive:ngRepeat"><code>ngRepeat</code></a>.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-class-even="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-class-even: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngClassEven {expression} </code>
<p><a href="guide/expression">Expression</a> to eval. The
result of the evaluation can be a string representing space delimited class names or an array.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-146" source-edit-css="style.css-147" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-148"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-146" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-146">
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}} &nbsp; &nbsp; &nbsp;
</span>
</li>
</ol>
</script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-147"></pre>
<style type="text/css" id="style.css-147">
.odd {
color: red;
}
.even {
color: blue;
}
</style>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-148"></pre>
<script type="text/ng-template" id="scenario.js-148">
it('should check ng-class-odd and ng-class-even', function() {
expect(element('.doc-example-live li:first span').prop('className')).
toMatch(/odd/);
expect(element('.doc-example-live li:last span').prop('className')).
toMatch(/even/);
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-146" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,64 @@
<h1><code ng:non-bindable="">ngClassOdd</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngClassOdd</code> and <code>ngClassEven</code> directives work exactly as
<a href="api/ng.directive:ngClass"><code>ngClass</code></a>, except it works in
conjunction with <code>ngRepeat</code> and takes affect only on odd (even) rows.</p>
<p>This directive can be applied only within a scope of an
<a href="api/ng.directive:ngRepeat"><code>ngRepeat</code></a>.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-class-odd="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-class-odd: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngClassOdd {expression} </code>
<p><a href="guide/expression">Expression</a> to eval. The result
of the evaluation can be a string representing space delimited class names or an array.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-143" source-edit-css="style.css-144" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-145"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-143" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-143">
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
</ol>
</script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-144"></pre>
<style type="text/css" id="style.css-144">
.odd {
color: red;
}
.even {
color: blue;
}
</style>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-145"></pre>
<script type="text/ng-template" id="scenario.js-145">
it('should check ng-class-odd and ng-class-even', function() {
expect(element('.doc-example-live li:first span').prop('className')).
toMatch(/odd/);
expect(element('.doc-example-live li:last span').prop('className')).
toMatch(/even/);
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-143" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,45 @@
<h1><code ng:non-bindable="">ngClick</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The ngClick allows you to specify custom behavior when
element is clicked.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-click="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-click: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngClick {expression} </code>
<p><a href="guide/expression">Expression</a> to evaluate upon
click. (Event object is available as <code>$event</code>)</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-154" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-155"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-154" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-154">
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
count: {{count}}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-155"></pre>
<script type="text/ng-template" id="scenario.js-155">
it('should check ng-click', function() {
expect(binding('count')).toBe('0');
element('.doc-example-live :button').click();
expect(binding('count')).toBe('1');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-154" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,65 @@
<h1><code ng:non-bindable="">ngCloak</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngCloak</code> directive is used to prevent the Angular html template from being briefly
displayed by the browser in its raw (uncompiled) form while your application is loading. Use this
directive to avoid the undesirable flicker effect caused by the html template display.</p>
<p>The directive can be applied to the <code>&lt;body&gt;</code> element, but typically a fine-grained application is
prefered in order to benefit from progressive rendering of the browser view.</p>
<p><code>ngCloak</code> works in cooperation with a css rule that is embedded within <code>angular.js</code> and
<code>angular.min.js</code> files. Following is the css rule:</p>
<pre class="prettyprint linenums">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none;
}
</pre>
<p>When this css rule is loaded by the browser, all html elements (including their children) that
are tagged with the <code>ng-cloak</code> directive are hidden. When Angular comes across this directive
during the compilation of the template it deletes the <code>ngCloak</code> element attribute, which
makes the compiled element visible.</p>
<p>For the best result, <code>angular.js</code> script must be loaded in the head section of the html file;
alternatively, the css rule (above) must be included in the external stylesheet of the
application.</p>
<p>Legacy browsers, like IE7, do not provide attribute selector support (added in CSS 2.1) so they
cannot match the <code>[ng\:cloak]</code> selector. To work around this limitation, you must add the css
class <code>ngCloak</code> in addition to <code>ngCloak</code> directive as shown in the example below.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-cloak&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-cloak"&gt;
...
&lt;/ANY&gt;</pre>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-149" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-150"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-149" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-149">
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-150"></pre>
<script type="text/ng-template" id="scenario.js-150">
it('should remove the template directive and css class', function() {
expect(element('.doc-example-live #template1').attr('ng-cloak')).
not().toBeDefined();
expect(element('.doc-example-live #template2').attr('ng-cloak')).
not().toBeDefined();
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-149" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,120 @@
<h1><code ng:non-bindable="">ngController</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngController</code> directive assigns behavior to a scope. This is a key aspect of how angular
supports the principles behind the Model-View-Controller design pattern.</p>
<p>MVC components in angular:</p>
<ul>
<li>Model — The Model is data in scope properties; scopes are attached to the DOM.</li>
<li>View — The template (HTML with data bindings) is rendered into the View.</li>
<li>Controller — The <code>ngController</code> directive specifies a Controller class; the class has
methods that typically express the business logic behind the application.</li>
</ul>
<p>Note that an alternative way to define controllers is via the <code>&lt;a href="api/ng.$route"&gt;&lt;code&gt;ng.$route&lt;/code&gt;&lt;/a&gt;</code>
service.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-controller="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-controller: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Directive.info">Directive info</h3>
<div class="directive-info"><ul><li>This directive creates new scope.</li>
</ul>
</div>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngController {expression} </code>
<p>Name of a globally accessible constructor function or an
<a href="guide/expression">expression</a> that on the current scope evaluates to a
constructor function.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>Here is a simple form for editing user contact information. Adding, removing, clearing, and
greeting are methods declared on the controller (see source tab). These methods can
easily be called from the angular markup. Notice that the scope becomes the <code>this</code> for the
controller's instance. This allows for easy access to the view data from the controller. Also
notice that any changes to the data are automatically reflected in the View without the need
for a manual update.
<h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-152" source-edit-css="" source-edit-js="script.js-151" source-edit-unit="" source-edit-scenario="scenario.js-153"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-152" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-152">
<div ng-controller="SettingsController">
Name: <input type="text" ng-model="name"/>
[ <a href="" ng-click="greet()">greet</a> ]<br/>
Contact:
<ul>
<li ng-repeat="contact in contacts">
<select ng-model="contact.type">
<option>phone</option>
<option>email</option>
</select>
<input type="text" ng-model="contact.value"/>
[ <a href="" ng-click="clearContact(contact)">clear</a>
| <a href="" ng-click="removeContact(contact)">X</a> ]
</li>
<li>[ <a href="" ng-click="addContact()">add</a> ]</li>
</ul>
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-151"></pre>
<script type="text/ng-template" id="script.js-151">
function SettingsController($scope) {
$scope.name = "John Smith";
$scope.contacts = [
{type:'phone', value:'408 555 1212'},
{type:'email', value:'john.smith@example.org'} ];
$scope.greet = function() {
alert(this.name);
};
$scope.addContact = function() {
this.contacts.push({type:'email', value:'yourname@example.org'});
};
$scope.removeContact = function(contactToRemove) {
var index = this.contacts.indexOf(contactToRemove);
this.contacts.splice(index, 1);
};
$scope.clearContact = function(contact) {
contact.type = 'phone';
contact.value = '';
};
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-153"></pre>
<script type="text/ng-template" id="scenario.js-153">
it('should check controller', function() {
expect(element('.doc-example-live div>:input').val()).toBe('John Smith');
expect(element('.doc-example-live li:nth-child(1) input').val())
.toBe('408 555 1212');
expect(element('.doc-example-live li:nth-child(2) input').val())
.toBe('john.smith@example.org');
element('.doc-example-live li:first a:contains("clear")').click();
expect(element('.doc-example-live li:first input').val()).toBe('');
element('.doc-example-live li:last a:contains("add")').click();
expect(element('.doc-example-live li:nth-child(3) input').val())
.toBe('yourname@example.org');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-152" ng-eval-javascript="script.js-151"></div></div>
</div>

View file

@ -0,0 +1,25 @@
<h1><code ng:non-bindable="">ngCsp</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Enables <a href="https://developer.mozilla.org/en/Security/CSP">CSP (Content Security Policy)</a> support.
This directive should be used on the root element of the application (typically the <code>&lt;html&gt;</code>
element or other element with the <a href="api/ng.directive:ngApp"><code>ngApp</code></a>
directive).</p>
<p>If enabled the performance of template expression evaluator will suffer slightly, so don't enable
this mode unless you need it.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;html ng-csp&gt;
...
&lt;/html&gt;</pre>
as class<pre class="prettyprint linenums">&lt;html class="ng-csp"&gt;
...
&lt;/html&gt;</pre>
<h3 id="Directive.info">Directive info</h3>
<div class="directive-info"><ul><li>This directive executes at priority level 1000.</li>
</ul>
</div>
</div>
</div>

View file

@ -0,0 +1,22 @@
<h1><code ng:non-bindable="">ngDblclick</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngDblclick</code> directive allows you to specify custom behavior on dblclick event.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-dblclick="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-dblclick: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngDblclick {expression} </code>
<p><a href="guide/expression">Expression</a> to evaluate upon
dblclick. (Event object is available as <code>$event</code>)</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>See <a href="api/ng.directive:ngClick"><code>ngClick</code></a></p></div>
</div>

View file

@ -0,0 +1,48 @@
<h1><code ng:non-bindable="">ngDisabled</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The following markup will make the button enabled on Chrome/Firefox but not on IE8 and older IEs:
<pre class="prettyprint linenums">
&lt;div ng-init="scope = { isDisabled: false }"&gt;
&lt;button disabled="{{scope.isDisabled}}"&gt;Disabled&lt;/button&gt;
&lt;/div&gt;
</pre>
<p>The HTML specs do not require browsers to preserve the special attributes such as disabled.
(The presence of them means true and absence means false)
This prevents the angular compiler from correctly retrieving the binding expression.
To solve this problem, we introduce the <code>ngDisabled</code> directive.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;INPUT ng-disabled="{expression}"&gt;
...
&lt;/INPUT&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngDisabled {expression} </code>
<p>Angular expression that will be evaluated.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-88" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-89"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-88" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-88">
Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
<button ng-model="button" ng-disabled="checked">Button</button>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-89"></pre>
<script type="text/ng-template" id="scenario.js-89">
it('should toggle button', function() {
expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy();
input('checked').check();
expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy();
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-88" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,26 @@
<h1><code ng:non-bindable="">ngForm</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Nestable alias of <a href="api/ng.directive:form"><code><code>form</code></code></a> directive. HTML
does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a
sub-group of controls needs to be determined.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as element (see <a href="guide/ie">IE restrictions</a>)<pre class="prettyprint linenums">&lt;ng-form
[ngForm="{string}"]&gt;
&lt;/ng-form&gt;</pre>
as attribute<pre class="prettyprint linenums">&lt;ANY ng-form
[name="{string}"]&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-form [name: {string};]"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">name|ngForm<i>(optional)</i> {string=} </code>
<p>Name of the form. If specified, the form controller will be published into
related scope, under this name.</p></li>
</ul>
</div>
</div>

View file

@ -0,0 +1,48 @@
<h1><code ng:non-bindable="">ngHide</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngHide</code> and <code>ngShow</code> directives hide or show a portion of the DOM tree (HTML)
conditionally.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-hide="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-hide: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngHide {expression} </code>
<p>If the <a href="guide/expression">expression</a> is truthy then
the element is shown or hidden respectively.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-173" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-174"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-173" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-173">
Click me: <input type="checkbox" ng-model="checked"><br/>
Show: <span ng-show="checked">I show up when you checkbox is checked?</span> <br/>
Hide: <span ng-hide="checked">I hide when you checkbox is checked?</span>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-174"></pre>
<script type="text/ng-template" id="scenario.js-174">
it('should check ng-show / ng-hide', function() {
expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
input('checked').check();
expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-173" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,91 @@
<h1><code ng:non-bindable="">ngHref</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Using Angular markup like {{hash}} in an href attribute makes
the page open to a wrong URL, if the user clicks that link before
angular has a chance to replace the {{hash}} with actual URL, the
link will be broken and will most likely return a 404 error.
The <code>ngHref</code> directive solves this problem.</p>
<p>The buggy way to write it:
<pre class="prettyprint linenums">
&lt;a href="http://www.gravatar.com/avatar/{{hash}}"/&gt;
</pre>
<p>The correct way to write it:
<pre class="prettyprint linenums">
&lt;a ng-href="http://www.gravatar.com/avatar/{{hash}}"/&gt;
</pre></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;A ng-href="{template}"&gt;
...
&lt;/A&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngHref {template} </code>
<p>any string which can contain <code>{{}}</code> markup.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>This example uses <code>link</code> variable inside <code>href</code> attribute:
<h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-86" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-87"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-86" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-86">
<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
<a id="link-6" ng-href="{{value}}">link</a> (link, change location)
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-87"></pre>
<script type="text/ng-template" id="scenario.js-87">
it('should execute ng-click but not reload when href without value', function() {
element('#link-1').click();
expect(input('value').val()).toEqual('1');
expect(element('#link-1').attr('href')).toBe("");
});
it('should execute ng-click but not reload when href empty string', function() {
element('#link-2').click();
expect(input('value').val()).toEqual('2');
expect(element('#link-2').attr('href')).toBe("");
});
it('should execute ng-click and change url when ng-href specified', function() {
expect(element('#link-3').attr('href')).toBe("/123");
element('#link-3').click();
expect(browser().window().path()).toEqual('/123');
});
it('should execute ng-click but not reload when href empty string and name specified', function() {
element('#link-4').click();
expect(input('value').val()).toEqual('4');
expect(element('#link-4').attr('href')).toBe('');
});
it('should execute ng-click but not reload when no href but name specified', function() {
element('#link-5').click();
expect(input('value').val()).toEqual('5');
expect(element('#link-5').attr('href')).toBe('');
});
it('should only change url when only ng-href', function() {
input('value').enter('6');
expect(element('#link-6').attr('href')).toBe('6');
element('#link-6').click();
expect(browser().location().url()).toEqual('/6');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-86" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,116 @@
<h1><code ng:non-bindable="">ngInclude</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Fetches, compiles and includes an external HTML fragment.</p>
<p>Keep in mind that Same Origin Policy applies to included resources
(e.g. ngInclude won't work for cross-domain requests on all browsers and for
file:// access on some browsers).</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as element (see <a href="guide/ie">IE restrictions</a>)<pre class="prettyprint linenums">&lt;ng-include
src="{string}"
[onload="{string}"]
[autoscroll="{string}"]&gt;
&lt;/ng-include&gt;</pre>
as attribute<pre class="prettyprint linenums">&lt;ANY ng-include="{string}"
[onload="{string}"]
[autoscroll="{string}"]&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-include: {string}; [onload: {string};] [autoscroll: {string};]"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Directive.info">Directive info</h3>
<div class="directive-info"><ul><li>This directive creates new scope.</li>
</ul>
</div>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngInclude|src {string} </code>
<p>angular expression evaluating to URL. If the source is a string constant,
make sure you wrap it in quotes, e.g. <code>src="'myPartialTemplate.html'"</code>.</p></li>
<li><code ng:non-bindable="">onload<i>(optional)</i> {string=} </code>
<p>Expression to evaluate when a new partial is loaded.</p></li>
<li><code ng:non-bindable="">autoscroll<i>(optional)</i> {string=} </code>
<p>Whether <code>ngInclude</code> should call <a href="api/ng.$anchorScroll"><code>$anchorScroll</code></a> to scroll the viewport after the content is loaded.</p>
<ul>
<li>If the attribute is not set, disable scrolling.</li>
<li>If the attribute is set without value, enable scrolling.</li>
<li>Otherwise enable scrolling only if the expression evaluates to truthy value.</li>
</ul></li>
</ul>
</div>
<div class="member event"><h2 id="Events">Events</h2>
<ul class="events"><li><h3 id="$includeContentLoaded">$includeContentLoaded</h3>
<div class="$includecontentloaded"><p>Emitted every time the ngInclude content is reloaded.</p><div class="inline"><h4 id="Type.">Type:</h4>
<div class="type-">emit</div>
</div>
<div class="inline"><h4 id="Target.">Target:</h4>
<div class="target-">the current ngInclude scope</div>
</div>
</div>
</li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-159 template1.html template2.html" source-edit-css="" source-edit-js="script.js-160" source-edit-unit="" source-edit-scenario="scenario.js-161"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-159" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-159">
<div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
<hr/>
<div ng-include src="template.url"></div>
</div>
</script>
</div>
<div class="tab-pane" title="template1.html">
<pre class="prettyprint linenums" ng-set-text="template1.html"></pre>
<script type="text/ng-template" id="template1.html">
Content of template1.html
</script>
</div>
<div class="tab-pane" title="template2.html">
<pre class="prettyprint linenums" ng-set-text="template2.html"></pre>
<script type="text/ng-template" id="template2.html">
Content of template2.html
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-160"></pre>
<script type="text/ng-template" id="script.js-160">
function Ctrl($scope) {
$scope.templates =
[ { name: 'template1.html', url: 'template1.html'}
, { name: 'template2.html', url: 'template2.html'} ];
$scope.template = $scope.templates[0];
}
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-161"></pre>
<script type="text/ng-template" id="scenario.js-161">
it('should load template1.html', function() {
expect(element('.doc-example-live [ng-include]').text()).
toMatch(/Content of template1.html/);
});
it('should load template2.html', function() {
select('template').option('1');
expect(element('.doc-example-live [ng-include]').text()).
toMatch(/Content of template2.html/);
});
it('should change to blank', function() {
select('template').option('');
expect(element('.doc-example-live [ng-include]').text()).toEqual('');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-159" ng-eval-javascript="script.js-160"></div></div>
</div>

View file

@ -0,0 +1,42 @@
<h1><code ng:non-bindable="">ngInit</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngInit</code> directive specifies initialization tasks to be executed
before the template enters execution mode during bootstrap.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-init="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-init: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngInit {expression} </code>
<p><a href="guide/expression">Expression</a> to eval.</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-162" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-163"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-162" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-162">
<div ng-init="greeting='Hello'; person='World'">
{{greeting}} {{person}}!
</div>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-163"></pre>
<script type="text/ng-template" id="scenario.js-163">
it('should check greeting', function() {
expect(binding('greeting')).toBe('Hello');
expect(binding('person')).toBe('World');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-162" ng-eval-javascript=""></div></div>
</div>

View file

@ -0,0 +1,22 @@
<h1><code ng:non-bindable="">ngKeydown</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Specify custom behavior on keydown event.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-keydown="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-keydown: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngKeydown {expression} </code>
<p><a href="guide/expression">Expression</a> to evaluate upon
keydown. (Event object is available as <code>$event</code> and can be interrogated for keyCode, altKey, etc.)</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>See <a href="api/ng.directive:ngClick"><code>ngClick</code></a></p></div>
</div>

View file

@ -0,0 +1,22 @@
<h1><code ng:non-bindable="">ngKeyup</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>Specify custom behavior on keyup event.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-keyup="{expression}"&gt;
...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-keyup: {expression};"&gt;
...
&lt;/ANY&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngKeyup {expression} </code>
<p><a href="guide/expression">Expression</a> to evaluate upon
keyup. (Event object is available as <code>$event</code> and can be interrogated for keyCode, altKey, etc.)</p></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><p>See <a href="api/ng.directive:ngClick"><code>ngClick</code></a></p></div>
</div>

Some files were not shown because too many files have changed in this diff Show more