diff options
| -rw-r--r-- | docs/components/angular-bootstrap/bootstrap.js | 2 | ||||
| -rw-r--r-- | docs/content/api/index.ngdoc | 286 | ||||
| -rw-r--r-- | docs/content/api/ng.ngdoc | 5 | ||||
| -rw-r--r-- | docs/src/ngdoc.js | 19 | ||||
| -rw-r--r-- | docs/src/templates/css/docs.css | 23 | ||||
| -rw-r--r-- | docs/src/templates/js/docs.js | 42 | ||||
| -rw-r--r-- | src/ngAnimate/animate.js | 4 | ||||
| -rw-r--r-- | src/ngCookies/cookies.js | 5 | ||||
| -rw-r--r-- | src/ngMock/angular-mocks.js | 12 | ||||
| -rw-r--r-- | src/ngResource/resource.js | 6 | ||||
| -rw-r--r-- | src/ngRoute/route.js | 3 | ||||
| -rw-r--r-- | src/ngSanitize/sanitize.js | 2 | ||||
| -rw-r--r-- | src/ngTouch/touch.js | 9 |
13 files changed, 400 insertions, 18 deletions
diff --git a/docs/components/angular-bootstrap/bootstrap.js b/docs/components/angular-bootstrap/bootstrap.js index 31ec763e..81a599e9 100644 --- a/docs/components/angular-bootstrap/bootstrap.js +++ b/docs/components/angular-bootstrap/bootstrap.js @@ -193,7 +193,7 @@ directive.table = function() { return { restrict: 'E', link: function(scope, element, attrs) { - element[0].className = 'table table-bordered table-striped code-table'; + element.addClass('table table-bordered table-striped code-table'); } }; }; diff --git a/docs/content/api/index.ngdoc b/docs/content/api/index.ngdoc index d0ab64e6..95e45e63 100644 --- a/docs/content/api/index.ngdoc +++ b/docs/content/api/index.ngdoc @@ -2,6 +2,286 @@ @name API Reference @description -Use the API Reference documentation when you need more information about a specific feature. Check out -{@link guide/ Developer Guide} for AngularJS concepts. If you are new to AngularJS we recommend the -{@link tutorial/ Tutorial}. +# AngularJS API Docs +Welcome to the AngularJS API docs page. The pages here contain the AngularJS reference materials for version <strong ng-bind="version"></strong>. + +The docs are organized into **modules** which contain various components of an AngularJS application. +These components are directives, services, filters, providers, types, global APIs and testing mocks. + +## {@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.ngClick ngClick}, + {@link ng.ngInclude ngInclude}, + {@link ng.ngInclude 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.$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 renders 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#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> diff --git a/docs/content/api/ng.ngdoc b/docs/content/api/ng.ngdoc index 5c2f9517..2877a566 100644 --- a/docs/content/api/ng.ngdoc +++ b/docs/content/api/ng.ngdoc @@ -2,4 +2,7 @@ @name ng @description -`ng` is the name of the {@link guide/module angular module} that contains all of the core angular services. +# ng (core module) +The ng module is loaded by default when an AngularJS application is started. The module itself contains the essential components to for an AngularJS application to function. The table below lists a high level breakdown of each of the services/factories, filters, directives and testing components available within this core module. + +<div doc-module-components="ng"></div> diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js index 24d1aa26..249f1802 100644 --- a/docs/src/ngdoc.js +++ b/docs/src/ngdoc.js @@ -213,6 +213,14 @@ Doc.prototype = { return words.join(' '); }, + shortDescription : function() { + var text = this.description.split("\n")[0]; + text = text.replace(/<.+?\/?>/g, ''); + text = text.replace(/{/g,'{'); + text = text.replace(/}/g,'}'); + return text; + }, + getMinerrNamespace: function () { if (this.ngdoc !== 'error') { throw new Error('Tried to get the minErr namespace, but @ngdoc ' + @@ -471,11 +479,20 @@ Doc.prototype = { (this.ngdoc === 'error' ? this.name : '') || (((this.file||'').match(/.*(\/|\\)([^(\/|\\)]*)\.ngdoc/)||{})[2]) || // try to extract it from file name this.name; // default to name + this.moduleName = parseModuleName(this.id); this.description = this.markdown(this.description); this.example = this.markdown(this.example); this['this'] = this.markdown(this['this']); return this; + function parseModuleName(id) { + var module = id.split('.')[0]; + if(module == 'angular') { + module = 'ng'; + } + return module; + } + function flush() { if (atName) { var text = trim(atText.join('\n')), match; @@ -1106,6 +1123,8 @@ function metadata(docs){ name: title(doc), shortName: shortName, type: doc.ngdoc, + moduleName: doc.moduleName, + shortDescription: doc.shortDescription(), keywords:doc.keywords() }); }); diff --git a/docs/src/templates/css/docs.css b/docs/src/templates/css/docs.css index 430ff4c9..783f1d21 100644 --- a/docs/src/templates/css/docs.css +++ b/docs/src/templates/css/docs.css @@ -508,3 +508,26 @@ pre ol li { font-size: 16px; word-break: normal; } + +.text-info { + color:#3a87ad; +} + +.definition-table tr > td:first-child { + font-weight:bold; + width:30%; +} + +.definition-table.spaced { + margin-bottom:30px; +} + +.component-heading { + text-transform:capitalize; +} + +.component-breakdown { + margin-bottom:30px; + padding-bottom:30px; + border-bottom:1px solid #aaa; +} diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js index fbabf193..2c5c56d2 100644 --- a/docs/src/templates/js/docs.js +++ b/docs/src/templates/js/docs.js @@ -207,6 +207,48 @@ docsApp.directive.sourceEdit = function(getEmbeddedTemplate) { } }; +docsApp.directive.docModuleComponents = ['sections', function(sections) { + return { + template: ' <div class="component-breakdown">' + + ' <h2>Module Components</h2>' + + ' <div ng-repeat="(key, section) in components">' + + ' <h3 class="component-heading" id="{{ section.type }}">{{ section.title }}</h3>' + + ' <table class="definition-table">' + + ' <tr>' + + ' <th>Name</th>' + + ' <th>Description</th>' + + ' </tr>' + + ' <tr ng-repeat="component in section.components">' + + ' <td><a ng-href="{{ component.url }}">{{ component.shortName }}</a></td>' + + ' <td>{{ component.shortDescription }}</td>' + + ' </tr>' + + ' </table>' + + ' </div>' + + ' </div>', + scope : { + module : '@docModuleComponents' + }, + controller : ['$scope', function($scope) { + var validTypes = ['property','function','directive','service','object','filter']; + var components = {}; + angular.forEach(sections.api, function(item) { + if(item.moduleName == $scope.module) { + var type = item.type; + if(type == 'object') type = 'service'; + if(validTypes.indexOf(type) >= 0) { + components[type] = components[type] || { + title : type, + type : type, + components : [] + }; + components[type].components.push(item); + } + } + }); + $scope.components = components; + }] + }; +}] docsApp.directive.docTutorialNav = function(templateMerge) { var pages = [ diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index 35c52a6f..3c9ea9a9 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -8,10 +8,12 @@ * * # ngAnimate * - * `ngAnimate` is an optional module that provides CSS and JavaScript animation hooks. + * The `ngAnimate` module provides support for JavaScript and CSS3 animation hooks within core and custom directives. * * {@installModule animate} * + * <div doc-module-components="ngAnimate"></div> + * * # Usage * * To see animations in action, all that is required is to define the appropriate CSS classes diff --git a/src/ngCookies/cookies.js b/src/ngCookies/cookies.js index 206e8708..94964bf8 100644 --- a/src/ngCookies/cookies.js +++ b/src/ngCookies/cookies.js @@ -7,11 +7,12 @@ * * # ngCookies * - * Provides the {@link ngCookies.$cookies `$cookies`} and - * {@link ngCookies.$cookieStore `$cookieStore`} services. + * The `ngCookies` module provides a convenient wrapper for reading and writing browser cookies. * * {@installModule cookies} * + * <div doc-module-components="ngCookies"></div> + * * See {@link ngCookies.$cookies `$cookies`} and * {@link ngCookies.$cookieStore `$cookieStore`} for usage. */ diff --git a/src/ngMock/angular-mocks.js b/src/ngMock/angular-mocks.js index 703fbe34..c832562a 100644 --- a/src/ngMock/angular-mocks.js +++ b/src/ngMock/angular-mocks.js @@ -1708,8 +1708,16 @@ angular.mock.$RootElementProvider = function() { * @name ngMock * @description * - * The `ngMock` is an angular module which is used with `ng` module and adds unit-test configuration - * as well as useful mocks to the {@link AUTO.$injector $injector}. + * # ngMock + * + * The `ngMock` module providers support to inject and mock Angular services into unit tests. In addition, + * ngMock also extends various core ng services such that they can be inspected and controlled in a synchronous + * manner within test code. + * + * {@installModule mocks} + * + * <div doc-module-components="ngMock"></div> + * */ angular.module('ngMock', ['ng']).provider({ $browser: angular.mock.$BrowserProvider, diff --git a/src/ngResource/resource.js b/src/ngResource/resource.js index 3b23bbb9..968e81f5 100644 --- a/src/ngResource/resource.js +++ b/src/ngResource/resource.js @@ -9,12 +9,12 @@ var $resourceMinErr = angular.$$minErr('$resource'); * * # ngResource * - * `ngResource` is the name of the optional Angular module that adds support for interacting with - * [RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer) server-side data sources. - * `ngResource` provides the {@link ngResource.$resource `$resource`} service. + * The `ngResource` module provides interaction support with RESTful services via the $resource service. * * {@installModule resource} * + * <div doc-module-components="ngResource"></div> + * * See {@link ngResource.$resource `$resource`} for usage. */ diff --git a/src/ngRoute/route.js b/src/ngRoute/route.js index 060e2208..21459aab 100644 --- a/src/ngRoute/route.js +++ b/src/ngRoute/route.js @@ -11,6 +11,7 @@ * * {@installModule route} * + * <div doc-module-components="ngRoute"></div> */ /* global -ngRouteModule */ var ngRouteModule = angular.module('ngRoute', ['ng']). @@ -581,4 +582,4 @@ function $RouteProvider(){ return result.join(''); } }]; -}
\ No newline at end of file +} diff --git a/src/ngSanitize/sanitize.js b/src/ngSanitize/sanitize.js index b9381ea2..7bd9aae3 100644 --- a/src/ngSanitize/sanitize.js +++ b/src/ngSanitize/sanitize.js @@ -13,6 +13,8 @@ var $sanitizeMinErr = angular.$$minErr('$sanitize'); * * {@installModule sanitize} * + * <div doc-module-components="ngSanitize"></div> + * * See {@link ngSanitize.$sanitize `$sanitize`} for usage. */ diff --git a/src/ngTouch/touch.js b/src/ngTouch/touch.js index e785d82e..17dad196 100644 --- a/src/ngTouch/touch.js +++ b/src/ngTouch/touch.js @@ -7,14 +7,15 @@ * * # ngTouch * - * `ngTouch` is the name of the optional Angular module that provides touch events and other - * helpers for touch-enabled devices. - * The implementation is based on jQuery Mobile touch event handling - * ([jquerymobile.com](http://jquerymobile.com/)) + * The `ngTouch` module provides touch events and other helpers for touch-enabled devices. + * The implementation is based on jQuery Mobile touch event handling ([jquerymobile.com](http://jquerymobile.com/)). * * {@installModule touch} * * See {@link ngTouch.$swipe `$swipe`} for usage. + * + * <div doc-module-components="ngTouch"></div> + * */ // define ngTouch module |