使用AngularJS来显示Markdown（CoffeeScript版本）
我想做的事情：
我正在使用AngularJS进行应用程序练习。当我使用Yeoman创建示例时，会生成一个名为”about”的页面，所以我想在这里放上使用Markdown编写的记录…这是我的初衷。
顺便提一下，由于这次使用了 CoffeeScript，目标是为了学习 CoffeeScript 进行替代。
基本上，我们在下面的文章中得到了很大的帮助…。
-
- JavaScript で Markdown 文書を表示してみた
AngularでMarkdownを表示する
用于利用的设置等
-
- Yeomanを使ってひな形作成
- 言語はCoffeeScriptベースで作成
我参考了angular-marked、marked和highlightjs的示例，将它们添加到了bower.json的模板中。
{
"name": "myApp",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"bootstrap-sass-official": "^3.2.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0",
"angular-marked": "0.0.12",
"marked": "~0.3.x",
"highlightjs": "~8.4.0"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "myApp"
}
-
- bower install実施。
- bower_components/ 以下に必要なものが配置されます。
应用程序的设置
由于不熟悉JavaScript和CoffeeScript，所以将感激不已的示例转换成CoffeeScript真是一件费劲的事情…。
我依靠这里进行了转换^^;
- http://js2.coffee
'use strict'
angular
.module 'myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute', # routing利用
'ngSanitize',
'ngTouch',
'hc.marked' # ここがMarkdown用
]
.config ($routeProvider) ->
# angular-route 用のルーティング設定
$routeProvider
.when '/',
templateUrl: 'views/main.html'
controller: 'MainCtrl'
.when '/about',
templateUrl: 'views/about.html'
controller: 'AboutCtrl'
.when '/contact',
templateUrl: 'views/contact.html'
controller: 'ContactCtrl'
.otherwise
# その他のところは、リンクがあってもデフォルト（main）に飛ばされる。
redirectTo: '/'
.config [
# ここがMarkDown用の設定
'markedProvider'
(markedProvider) ->
markedProvider.setOptions
gfm: true
tables: true
highlight: (code) ->
hljs.highlightAuto(code).value
return
]
Markdown使用组件指定
-
- 実際はgruntを使っていますので、grunt buildでindex.htmlにも以下が挿入されます。
- 手差しでもいいんだと思いますが…。
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<!-- 中略 -->
<script src="bower_components/marked/lib/marked.js"></script>
<script src="bower_components/angular-marked/angular-marked.js"></script>
<script src="bower_components/highlightjs/highlight.pack.js"></script>
<!-- endbower -->
尝试使用Markdown写关于.html的部分
<p>This is the about view.</p>
<!-- Yeomanのひな形はここまで -->
<!-- 以下、markedディレクティブで囲んだ部分をMarkdownで記述してみる -->
<marked>
### Markdown directive
*It works!*
*This* **is** [markdown](https://daringfireball.net/projects/markdown/) in the view.
</marked>
<!-- README.md というファイルもインクルードしてみる -->
<section marked ng-include="'README.md'"></section>
关于Yeoman的模板，目录的构成如下。虽然在about.html中指定了include，但是用ng-include指定的文件需要指定路径，否则会读取与index.html相同层级的文件，请注意。
% tree
.
├── 404.html
├── README.md <- ここだと ng-include="'README.md'
├── favicon.ico
├── images
│ └── yeoman.png
├── index.html
├── robots.txt
├── scripts
│ ├── app.coffee
│ └── controllers
│ ├── about.coffee
│ ├── contact.coffee
│ └── main.coffee
├── styles
│ └── main.scss
└── views
├── WorkMemo.md <- ここだと ng-include="'views/README.md'
├── about.html
├── contact.html
└── main.html
5 directories, 15 files
结果
– Result
因为使用了 grunt 进行 LiveReload，所以很快就可以确认…。
暂时成功了。
试一试后的感悟
-
- 簡単な日記なら、日記部分のみMarkdownで書いて行くのがいいのかな？と思いました。（既にこういうのありそうですが…）
- ng-includeの場合は、****.md （マークダウンのファイル側）を変更しても、gruntでは変更を認識してくれなかったので、Gruntfile.jsを調整しました…。
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'.tmp/scripts/{,*/}*.js',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.app %>/{,*/}*.md' # ここ追加。
]
}
在进行以上配置调整后，包含的 *.md 文件进行更新时，现在可以通过实时重新加载进行重新编译。嗯，这个问题也只是程度上的问题而已…。
Running "watch" task
Waiting...
>> File "Gruntfile.js" changed.
>> File "app/README.md" changed.
Completed in 0.000s at Mon Apr 20 2015 08:26:36 GMT+0900 (JST) - Waiting...
请提供参考信息。
http://js.studio-kingdom.com/angularjs/ng_directive/ng_include (ng-include)
