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

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)