How to annotate ngdoc for an Angular component?

Question

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

Do you have any examples?

Answer 1

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)

Answer 2

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

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

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

Answer 3

Here you have an example:

controller.js::

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

}

component.js:

import controller from './controller.js';
import templateUrl from './view.html';
/**
 * @ngdoc component
 * @name dragDropRelation.component: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 component
 */
export const component = {
  templateUrl: templateUrl,
  controller: controller,
  bindings: {
    used: '<?',
    text: '<',
    data: '<',
    disabled: '<?',
  },
};

module.js:

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


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

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

(my original component's documentation is in spanish)