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の日記