각도 포함 JSDocJS
현재 프로젝트 내에서 JSDoc을 사용하고 있으며, 최근 Angular를 도입하기 시작했습니다.또한 JSDoc을 계속 사용하여 모든 문서가 같은 장소에 있는지 확인하고 싶습니다.
저는 주로 ngDoc을 사용하라고 말하는 사람들을 봐왔지만, 우리는 항상 별도의 JavaScript를 가지고 있고 이상적으로는 모든 것을 함께 가지고 있기 때문에 이것은 실행 가능한 옵션이 아닙니다.
/**
* @author Example <jon.doe@example.com>
* @copyright 2014 Example Ltd. All rights reserved.
*/
(function () {
window.example = window.example || {};
/**
* Example Namespace
* @memberOf example
* @namespace example.angular
*/
window.example.angular = window.example.angular || {};
var exAngular = window.example.angular;
/**
* A Example Angular Bootstrap Module
* @module exampleAngularBootstrap
*/
exAngular.bootstrap = angular.module('exampleAngularBootstrap', [
'ngRoute',
'ngResource',
'ngCookies'
])
.run(function ($http, $cookies) {
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
$http.defaults.headers.common['X-CSRFToken'] = $cookies.csrftoken;
});
})();
현재 제가 가지고 있는 것은 이것뿐인데, run()에 대한 문서를 넣을 수 없습니다.
저도 이 문제를 겪었습니다.저는 지금 다음과 같은 jsdoc 코멘트를 통해 angularjs 코드에 대한 문서를 작성하고 있습니다.
1. 빈 .js 파일을 만듭니다.다음의 코멘트를 입력합니다.
/**
* @namespace angular_module
*/
그러면 생성된 매뉴얼에 모든 모듈을 나열하기 위한 별도의 html이 생성됩니다.
2. 새로운 각도 모듈을 정의하는 Javascript 파일에서는 이러한 코멘트를 사용합니다.
/**
* @class angular_module.MyModule
* @memberOf angular_module
*/
그러면 위의 모든 angular_modules 목록에 항목이 추가되며 클래스이기 때문에 MyModule용으로 별도의 html 페이지가 생성됩니다.
3. 각 angularjs 서비스에 대해 다음 설명을 사용합니다.
/**
* @function myService
* @memberOf angular_module.MyModule
* @description This is an angularjs service.
*/
[ My Module ]페이지에 서비스 항목이 추가됩니다.함수로 추가되므로 '@param'을 사용하여 입력 파라미터에 대한 문서를 작성하고 '@return'을 사용하여 값을 반환할 수 있습니다.
4. MyModule의 컨트롤러 또는 디렉티브에 상당히 긴 코드가 있고 이를 문서화하기 위해 별도의 html 파일이 필요한 경우 컨트롤러 또는 디렉티브에 풀 경로를 사용하는 클래스로 주석을 붙입니다.
/**
* @class angular_module.MyModule.MyController
*/
이렇게 하면 MyController는 MyModule 문서 페이지에 하나의 항목으로 나열됩니다.
그러면 컨트롤러 내의 코드를 MyController의 멤버 함수로 주석을 달 수 있습니다.
/**
* @name $scope.aScopeFunction
* @function
* @memberOf angular_module.MyModule.MyController
* @description
*/
이렇게 하면 이 함수의 문서는 MyController의 html 페이지의 html 파일에 나타납니다.도트로 구분된 풀패스 문자열에 의해 연결이 구축됩니다.
namepath 구문에는 다음 세 가지 유형이 있습니다.
- Person #say // "say"라는 이름의 인스턴스 메서드.
- Person.say // "say"라는 이름의 정적 메서드.
- 사람~ say // "say"라는 이름의 내적 방법.
단, 컨트롤러에 클래스 생성자로 기술되어 있기 때문에 생성된html 문서에서 컨트롤러 이름 앞에 "새로운"이 발견된다는 것이 하나의 불완전한 점입니다.
또한 계층 구조를 추가하기 위해 네임스페이스를 정의할 수 있습니다.예를 들어 모든 컨트롤러를 포함하도록 네임스페이스를 정의할 수 있습니다.
/** * @namespace MyApp.Controllers */
컨트롤러에 「」를 붙입니다.MyApp.Controllers 를 정의할 .MyApp.Product ★★★★★★★★★★★★★★★★★」MyApp.Customer★★★★★★★★★★★★★★★.
완벽하지는 않지만 angularjs 코드를 문서화하기 위해 jsdoc을 사용하는 것을 좋아합니다.
- 간단합니다.
- 모듈 컨트롤러 기능 계층은 유지됩니다.
- 또한 jsdoc은 열람이 가능한 문서 사이트라는 장점이 있습니다.
테이블 스타일 jsdoc 스타일시트:
특히 기본 jsdoc 스타일시트를 Java API 문서와 같은 테이블 스타일에 맞게 수정했습니다.더 선명해 보여요.
의 파일을 합니다.C:\Users\user1\AppData\Roaming\npm\node_modules\jsdoc\templates\default\static\styleshttps://github.com/gm2008/jsdoc/blob/master/templates/default/static/styles/jsdoc-default.css 파일을 사용하여
바로 그겁니다.
위 유형 이외의 함수를 만들고 .run이나 factory 등의 함수를 호출해야 했습니다.
/**
* @author Example <jon.doe@example.com>
* @copyright 2014 Example Ltd. All rights reserved.
*/
(function () {
window.example = window.example || {};
/**
* Example Namespace
* @memberOf example
* @namespace example.angular
*/
window.example.angular = window.example.angular || {};
var exAngular = window.example.angular;
/**
* My example bootstrap run function
* @param {object} $http {@link http://docs.angularjs.org/api/ng.$http}
* @param {[type]} $cookies {@link http://docs.angularjs.org/api/ngCookies.$cookies}
*/
var runFunction = function ($http, $cookies) {
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
$http.defaults.headers.common['X-CSRFToken'] = $cookies.csrftoken;
};
/**
* A Example Angular Bootstrap Module
* @memberOf example.angular
* @namespace example.angular.bootstrap
* @function bootstrap
* @example
* <div ng-app="exampleAngularBootstrap">
* <div ng-view></div>
* </div>
*/
exAngular.bootstrap = angular.module('exampleAngularBootstrap', [
'ngRoute',
'ngResource',
'ngCookies'
])
.run(runFunction);
})();
언급URL : https://stackoverflow.com/questions/21285960/jsdoc-with-angularjs
'programing' 카테고리의 다른 글
| 어떻게 반응 js에서 한 페이지에서 다른 페이지로 이동합니까? (0) | 2023.04.04 |
|---|---|
| 페이지로 Visual Composer 단축 코드 렌더링 (0) | 2023.04.04 |
| WooCommerce 계정 등록 메일에서 사용자 이름에 액세스합니다(독일어로 WooCommerce를 통한 DOI). (0) | 2023.04.04 |
| _reactDom2.default.render는 함수가 아닙니다. (0) | 2023.04.04 |
| JOIN의 ON 절에서 참조되는 테이블의 순서가 중요합니까? (0) | 2023.04.04 |