とある角度から

お腹いっぱいたべられる幸せ

JSFiddleでAngularJSを使う

前回の記事でのAngularJSのサンプルはJSFiddle内で動作確認してみたのですが、AngularJSをJSFiddle内で使うのに、ちょっとだけテクニックが必要だったのでまとめてみました。

1. まず、AngularJSを使いたいfiddleのFrameworks & Extensions設定を以下の設定にします。

  • No-Library(pure JS)
  • No wrap - in

f:id:n_1010real:20140501161959p:plain

2. css内に以下のコードを貼り付けます。

3. html内ではbodyタグは使えないので、bodyにng-appを追加している場合はdivに置き換える。
f:id:n_1010real:20140501162011p:plain

これで、AngularJSが利用できます。

Frameworks & Extensions設定の中でAngularJSの項目もありますが、選べるバージョンが少ないのと、設定によってうまく動かなかったりしたのでこちらの方法で動作確認しました。
この方法だと、自分が利用したいバージョンでAngularJSが読み込めます。

しかし、JSFiddle便利。。。