mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
298 lines
9 KiB
Text
298 lines
9 KiB
Text
@ngdoc overview
|
||
@name API Reference
|
||
@description
|
||
|
||
# AngularJS API Docs
|
||
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 **modules** which contain various components of an AngularJS application.
|
||
These components are directives, services, filters, providers, types, global APIs and testing mocks.
|
||
|
||
<div class="alert alert-info">
|
||
**Angular Namespaces `$` and `$$`**
|
||
|
||
To prevent accidental name collisions with your code,
|
||
Angular prefixes names of public objects with `$` and names of private objects with `$$`.
|
||
Please do not use the `$` or `$$` prefix in your code.
|
||
</div>
|
||
|
||
## Angular Namespace
|
||
|
||
|
||
## {@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 ng.directive:ngInclude ngInclude},
|
||
{@link ng.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 ngRoute.$routeParams $routeParams},
|
||
{@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 into your application. Various core ng 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 ngAnimate.$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#methods_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 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 following services are used for cookie management:
|
||
<ul>
|
||
<li>The {@link ngCookies.$cookies $cookie} service is a convenient wrapper to store simple data within browser cookies.</li>
|
||
<li>{@link ngCookies.$cookieStore $cookieStore} is used to store more complex data using serialization.</li>
|
||
</ul>
|
||
</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 ngTouch#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>
|