I'm writing an AngularJS ponent and I was wondering what's the correct way to add ngdoc annotation both to the ponent itself and to the controller function.

Do you have any examples?

I'm writing an AngularJS ponent and I was wondering what's the correct way to add ngdoc annotation both to the ponent itself and to the controller function.

Do you have any examples?

• javascript
• angularjs
• angular-ponents
• ngdoc

• Just to clarification: What you are asking is when you write a angular 1.5.x ponent with the .ponent() method, right? – dhknudsen Commented Nov 16, 2016 at 10:36

3 Answers 3

Here you have an example:

controller.js::

/**
 * @this vm
 * @ngdoc controller
 * @name dragDropRelation.controller:draggableItemController
 *
 * @description
 *  Controller for the draggableItem ponent
 */
export default function draggableItemController() {

}

ponent.js:

import controller from './controller.js';
import templateUrl from './view.html';
/**
 * @ngdoc ponent
 * @name dragDropRelation.ponent:draggableItem
 *
 * @description
 * Component that allows to be dragged containing some data.
 * @param {Boolean} used Used flag
 * 
 * @param {String} text Text to display
 * @param {Object} data Data to be saved
 * 
 * @param {Boolean} disabled variable to disable the ponent
 */
export const ponent = {
  templateUrl: templateUrl,
  controller: controller,
  bindings: {
    used: '<?',
    text: '<',
    data: '<',
    disabled: '<?',
  },
};

module.js:

import angular from 'angular';
import angularDragDrop from 'angular-drag-drop';
import {ponent} from './ponent.js';


/**
 * @ngdoc overview
 * @name dragDropRelation.module:draggableItem
 *
 * @description
 * Module that contains the ponent draggableItem
 * 
 * @example
 *  <b>script.js</b>
 *  <pre>
 *  import draggableItem from 
 *    './ponents/drag-drop-relation/draggable-item/module'
 *  angular.module('myModule', [draggableItem]);
 *  </pre>
 * 
 */
export default angular
  .module('draggableItem', [angularDragDrop])
  .ponent('draggableItem', ponent)
  .name;

this will generate something like this (using gulp-ngdocs):

(my original ponent's documentation is in spanish)

As far as I know, you can't document ponents with the main version of ng-doc.

Serenity-Frontstack has made a fork of ng-doc and support Angular ponents:

* @ngdoc ponent
* @name app.ponent:guideItem
*
* @description
* This ponent shows cards using the item binding for his own building.
*
* @param {object}  item      A object with card data 

You should use @ngdoc overview for the module definition. And @ngdoc controller for controller, @ngdoc service for services.

Module

/**
 * @memberof dugun.leads
 * @ngdoc module
 * @description
 * Leads mean info requsts and inbound calls
 */
angular.module('dugun.leads', [
    // vendor
    'ngRoute',
    'dugun.notifications',
    'dugun.queryString',
    'dugun.search',
    // app
    'dugun.helpers.tableSort',
    'dugun.forms',
    'dugun.leads.infoRequests',
    'dugun.leads.calls'
]);

Route

/**
 * @memberof dugun.leads
 * @ngdoc route
 * @name LeadRoutes
 * @param $routeProvider {provider} $routeProvider
 *
 * @description /providers/:providerId/info
 */
function LeadRoutes($routeProvider) {
    $routeProvider
        .when('/leads', {
            templateUrl: 'leads/list.html',
            controller: 'LeadListCtrl',
            controllerAs: 'leadListCtrl',
            label: 'Çiftler',
            reloadOnSearch: false
        });
}

Controller

/**
 * Controls Provider
 * @constructor
 * @ngdoc object
 * @memberof dugun.leads
 * @name LeadListCtrl
 * @scope
 * @requires $scope {service} controller scope
 * @requires $route {service} $route
 * @requires $window {service} $window
 * @requires $filter {service} $filter
 * @requires dgNotifications {service} dgNotifications
 * @requires moment {service} moment
 * @requires queryString {service} dugun.queryString:queryString
 * @requires Analytics
 * @requires Leads {factory} Leads service
 */
function LeadListCtrl($scope, $route, $window, $filter,
                      dgNotifications, queryString, moment, Analytics,
                      Leads)