index.ngdoc

@ngdoc overview
@name API Reference
@description

# AngularJS API Docs

<div class="alert alert-warning">
**AngularJS will be moving to Long Term Support (LTS) mode on July 1st 2018.**: [Find out more](misc/version-support-status).
</div>

## Welcome to the AngularJS API docs page.

These pages contain the AngularJS reference materials for version <strong ng-bind="version"></strong>.


The documentation is organized into **{@link guide/module modules}** which contain various components of an AngularJS application.
These components are {@link guide/directive directives}, {@link guide/services services}, {@link guide/filter filters}, {@link guide/providers providers}, {@link guide/templates templates}, global APIs, and testing mocks.

There is also a {@link guide/index guide} with articles on various topics, and a list of external resources.

<div class="alert alert-info">
**AngularJS Prefixes `$` and `$$`**:

To prevent accidental name collisions with your code,
AngularJS prefixes names of public objects with `$` and names of private objects with `$$`.
Please do not use the `$` or `$$` prefix in your code.
</div>

## AngularJS Modules


## {@link ng ng (core module)}
This module is provided by default and contains the core components of AngularJS.

<table class="definition-table spaced">
  <tr>
    <td>{@link ng#directive Directives}</td>
    <td>
      <p>
        This is the core collection of directives you would use in your template code to build an AngularJS application.
      </p>

      <p>
        Some examples include:
          {@link ng.directive:ngClick ngClick},
          {@link directive:ngInclude ngInclude},
          {@link directive:ngRepeat ngRepeat},
          etc… <br />
      </p>
    </td>
  </tr>
  <tr>
    <td>
      {@link ng#service Services / Factories}
    </td>
    <td>
      <p>
        This is the core collection of services which are used within the DI of your application.
      </p>
      <p>
        Some examples include:
          {@link ng.$compile $compile},
          {@link ng.$http $http},
          {@link ng.$location $location},
          etc…
      <p>
    </td>
  </tr>
  <tr>
    <td>
      {@link ng#filter Filters}
    </td>
    <td>
      <p>
        The core filters available in the ng module are used to transform template data before it is rendered within directives and expressions.
      </p>
      <p>
        Some examples include:
          {@link ng.filter:filter filter},
          {@link ng.filter:date date},
          {@link ng.filter:currency currency},
          {@link ng.filter:lowercase lowercase},
          {@link ng.filter:uppercase uppercase},
            etc...
      </p>
    </td>
  </tr>
  <tr>
    <td>
      {@link ng#function Global APIs}
    </td>
    <td>
      <p>
        The core global API functions are attached to the `angular` object. These core functions are useful for low level JavaScript operations within your application.
      </p>
      <p>
        Some examples include:
        {@link angular.copy angular.copy()},
        {@link angular.equals angular.equals()},
        {@link angular.element angular.element()},
          etc...
      </p>
    </td>
  </tr>
</table>


## {@link ngRoute ngRoute}

Use ngRoute to enable URL routing to your application. The ngRoute module supports URL management via both hashbang and HTML5 pushState.

<div class="alert alert-info">Include the **angular-route.js** file and set **ngRoute** as a dependency for this to work in your application.</div>

<table class="definition-table spaced">
  <tr>
    <td>
      {@link ngRoute#service Services / Factories}
    </td>
    <td>
      The following services are used for route management:
      <ul>
        <li>{@link ngRoute.$routeParams $routeParams} is used to access the querystring values present in the URL.</li>
        <li>{@link ngRoute.$route $route} is used to access the details of the route that is currently being accessed.</li>
        <li>{@link ngRoute.$routeProvider $routeProvider} is used to register routes for the application.</li>
      </ul>
    </td>
  </tr>
  <tr>
    <td>
      {@link ngRoute#directive Directives}
    </td>
    <td>
      The {@link ngRoute.directive:ngView ngView} directive will display the template of the current route within the page.
    </td>
  </tr>
</table>


## {@link ngAnimate ngAnimate}

Use ngAnimate to enable animation features within your application. Various core AngularJS directives will provide
animation hooks into your application when ngAnimate is included. Animations are defined by using CSS transitions/animations
or JavaScript callbacks.

<div class="alert alert-info">Include the **angular-animate.js** file and set **ngAnimate** as a dependency for this to work in your application.</div>

<table class="definition-table spaced">
  <tr>
    <td>
      {@link ngAnimate#service Services / Factories}
    </td>
    <td>
      Use {@link ng.$animate $animate} to trigger animation operations within your directive code.
    </td>
  </tr>
  <tr>
    <td>
      {@link ngAnimate CSS-based animations}
    </td>
    <td>
      Follow ngAnimate’s CSS naming structure to reference CSS transitions / keyframe animations in AngularJS. Once defined, the animation can be triggered by referencing the CSS class within the HTML template code.
    </td>
  </tr>
  <tr>
    <td>
      {@link ngAnimate JS-based animations}
    </td>
    <td>
      Use {@link angular.Module#animation module.animation()} to register a JavaScript animation. Once registered, the animation can be triggered by referencing the CSS class within the HTML template code.
    </td>
  </tr>
</table>

## {@link ngAria ngAria}

Use ngAria to inject common accessibility attributes into directives and improve the experience for users with disabilities.

<div class="alert alert-info">Include the **angular-aria.js** file and set ngAria as a dependency for this to work in your application.</div>

<table class="definition-table spaced">
  <tr>
    <td>
      {@link ngAria#service Services}
    </td>
    <td>
      <p>
          The {@link ngAria.$aria $aria} service contains helper methods for applying ARIA attributes to HTML.
      <p>
      <p>
          {@link ngAria.$ariaProvider $ariaProvider} is used for configuring ARIA attributes.
      </p>
    </td>
  </tr>
</table>

## {@link ngResource ngResource}

Use the ngResource module when querying and posting data to a REST API.

<div class="alert alert-info">Include the **angular-resource.js** file and set **ngResource** as a dependency for this to work in your application.</div>

<table class="definition-table spaced">
  <tr>
    <td>
      {@link ngResource#service Services / Factories}
    </td>
    <td>
      The {@link ngResource.$resource $resource} service is used to define RESTful objects which communicate with a REST API.
    </td>
  </tr>
</table>

## {@link ngCookies ngCookies}

Use the ngCookies module to handle cookie management within your application.

<div class="alert alert-info">Include the **angular-cookies.js** file and set **ngCookies** as a dependency for this to work in your application.</div>

<table class="definition-table spaced">
  <tr>
    <td>
      {@link ngCookies#service Services / Factories}
    </td>
    <td>
      The {@link ngCookies.$cookies $cookies} service is a convenient wrapper to store simple data within browser cookies.
    </td>
  </tr>
</table>

## {@link ngTouch ngTouch}

Use ngTouch when developing for mobile browsers/devices.

<div class="alert alert-info">Include the **angular-touch.js** file and set **ngTouch** as a dependency for this to work in your application.</div>

<table class="definition-table spaced">
  <tr>
    <td>
      {@link ngTouch#service Services / Factories}
    </td>
    <td>
      The {@link ngTouch.$swipe $swipe} service is used to register and manage mobile DOM events.
    </td>
  </tr>
  <tr>
    <td>
      {@link ngTouch#directive Directives}
    </td>
    <td>
      Various directives are available in ngTouch to emulate mobile DOM events.
    </td>
  </tr>
</table>

## {@link ngSanitize ngSanitize}

Use ngSanitize to securely parse and manipulate HTML data in your application.

<div class="alert alert-info">Include the **angular-sanitize.js** file and set **ngSanitize** as a dependency for this to work in your application.</div>

<table class="definition-table spaced">
  <tr>
    <td>
      {@link ngSanitize#service Services / Factories}
    </td>
    <td>
      The {@link ngSanitize.$sanitize $sanitize} service is used to clean up dangerous HTML code in a quick and convenient way.
    </td>
  </tr>
  <tr>
    <td>
      {@link ngSanitize#filter Filters}
    </td>
    <td>
      The {@link ngSanitize.filter:linky linky filter} is used to turn URLs into HTML links within the provided string.
    </td>
  </tr>
</table>

## {@link ngMock ngMock}

Use ngMock to inject and mock modules, factories, services and providers within your unit tests.

<div class="alert alert-info">Include the **angular-mocks.js** file into your test runner for this to work.</div>

<table class="definition-table spaced">
  <tr>
    <td>
      {@link ngMock#service Services / Factories}
    </td>
    <td>
      <p>
        ngMock will extend the behavior of various core services to become testing aware and manageable in a synchronous manner.
      <p>

      <p>
        Some examples include:
          {@link ngMock.$timeout $timeout},
          {@link ngMock.$interval $interval},
          {@link ngMock.$log $log},
          {@link ngMock.$httpBackend $httpBackend},
          etc...
      <p>
    </td>
  </tr>
  <tr>
    <td>
      {@link ngMock#function Global APIs}
    </td>
    <td>
      <p>
        Various helper functions are available to inject and mock modules within unit test code.
      </p>

      <p>
        Some examples
          {@link angular.mock.inject inject()},
          {@link angular.mock.module module()},
          {@link angular.mock.dump dump()},
          etc...
      <p>
    </td>
  </tr>
</table>