Как аннотировать ngdoc для углового компонента?

Question

Я пишу компонент AngularJS, и мне было интересно, как правильно добавлять аннотацию ngdoc как к самому компоненту, так и к функции контроллера.

Есть ли у вас примеры?

Answer 1

Для определения модуля вы должны использовать @ngdoc overview. И @ngdoc controller для контроллера, @ngdoc service для обслуживания.

Модуль

/** 
* @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' 
]); 

Маршрут

/** 
* @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 
     }); 
} 

Контроллер

/** 
* 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

Насколько я знаю, вы не можете Docum ent components с основной версией ng-doc.

Serenity-Frontstack сделал форк нг-док и поддержка Угловые компоненты:

* @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

Вот вам пример:

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; 

это будет генерировать что-то вроде этого (с помощью Глоток-ngdocs):

(документация моего оригинального компонента в испанском языке)