dgeni with angularjs application
TRANSCRIPT
Dgeni with AngularJS Application
@k_kinzal
某ビジネスチャット所属
about me
about me
Scraping tool
angular/dgeni
AngularJSで使っているngdocに対応したドキュメント生成器
What is dgeni?
What is dgeni?
/**
* @ngdoc provider
* @name
* @description
* Use to change the default behavior of the {@link ng. } service.
* */
function $HttpProvider() {
// ...
}
個人的には静的サイトジェネレーターだと思ってる
What is dgeni?
What is dgeni?
What is dgeni?
What is dgeni?
高いカスタマイズ性があるので公開用のAPIページとか得意
What is dgeni?
出力に限らずやりたい放題できるので
What is dgeni?
troch/dgeni-less-package
What is dgeni?
lessでドックコメントを書けるようにする人が出てきてる
What is dgeni?
さすがに使ったことはない
カスタマイズ性能が高い
What is dgeni?
その代わり導入の敷居は高い
What is dgeni?
What is dgeni?
覚えることいっぱい
手軽に始めるには方法は3つ
Get started
1. Yeomanのgeneratorを使う
Get started
Quramy/generator-ngdoc
Get started
Get started
$ npm install -g yo generator-ngdoc
$ yo ngdoc
$ cd docs
$ gulp docs:serve
簡単
Get started
簡単
Get started
AngularJSのコード書いたらDgeniでAPIページ作って公開したれhttp://qiita.com/Quramy/items/42418def7c8e6544a415
Get started
2. dgeni-angularパッケージを使う
Get started
petebacondarwin/dgeni-angular
Get started
Get started
$ git clone https://github.com/petebacondarwin/dgeni
$ npm install
$ gulp assets dgeni
$ npm install -g http-server
$ http-server build/
$ open http://127.0.0.1:8080/get.html
Get started
簡単
Get started
3. grunt-dgeniを使う
Get started
k-kinzal/grunt-dgeni
Get started
Get started
$ npm install --save-dev grunt grunt-dgeni
Get started
$ vi Gruntfile.js
module.exports = function (grunt) {
// config
grunt.initConfig({
dgeni: {
options: {
basePath: 'src/'
},
src: ['**/*.js'],
dest: 'docs/'
}
});
// load task
grunt.loadNpmTasks('grunt-dgeni');
// register tasks
grunt.registerTask('default', ['dgeni']);
};
Get started
$ grunt dgeni
Get started
簡単
Get started
始めるだけならだいぶ敷居が下がった
Get started
grunt-ngdoc
grunt-ngdocs
gulp-ngdocs
docular
とか使っている人たちは乗り換えると良いと思う
Get started
おしまい