ソースコードから理解する技術-UnderSourceCode

手を動かす(プログラムを組む)ことで技術を理解するブログ

gemを使わずにAngularJSを使用する - ロード時にAngularJSのソースを表示させない

Ruby on Railsにてgemを使わずに、AngularJSを使おうとしたら
AngularJSにより生成されたHTMLが表示される前に
AngularJSのソースが表示される問題に出くわしました。

意外にも苦戦したので、やり方をメモして置きます。
(gemで用意されていないバージョンを使う場合などを想定しています。)

Rails、AngularJSのバージョン
Rails 4.0.0
・AugularJS 1.2.3

■手順
1.AngularJSのサイトより、zipをダウンロードする。

2.zipを解凍し、angular.min.js、angular-resource.min.jsを
 \app\assets\javascriptsにコピーする。

3.application.html.erbのhtmlタグに"ng-app"を追加する。
<html lang="en" ng-app>

ここまでは、通常の手順だと思います。
AngularJSではheadタグ内にscriptタグを出力しないと、上記の
事象が起こるようなので、以下の対策を行います。

4.application.html.erbのjavascript_include_tagを、headタグ内に
 移行する。

<head>
以下略
<%= javascript_include_tag "application" %>
</head>

5.AngularJSのソースを記述し、実行する。

これで、ロード時にAngularJSのソースは表示されず、AngularJSにより
生成されたHTMLが初期表示されるはずです。

なお、Railsのデフォルトの設定である、bodyタグの最後でJavaScript
読み込ませたい場合は、以下のようにすることができます。
(他にもやり方はあると思いますが・・・)

6.\app\assets\javascriptsの中に、フォルダを作成する。

7.フォルダの中に、bodyタグの最後でロードしたいJavaScriptを格納する。

8.application.html.erbのbodyタグの最後(javascript_include_tagがあった行)
 に、先のフォルダのJavaScriptをロードするよう記述する。

<%= javascript_include_tag "フォルダ名/ファイル名" %>
</body>

以上です。

参考サイト
AngularJSでロード中に評価前のマークアップを表示させない方法 - Qiita [キータ]
railsでiphone対応をする基礎知識的な - kobaken75の日記