如何爲Angular組件註釋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

據我所知，你不能解決的文components與主版本ng-doc。

Serenity-Frontstack取得了NG-doc和支持的叉角分量：

* @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）產生這樣的：

（我原來的組件的文檔是西班牙語）