$locationProvider.html5Mode(true)の場合

AngularJSのURLからハッシュフラグメントを消す

AngularJSでハッシュ(#)記号なしのURLにしたい。

具体的には、

restful-cakephp.local/#/new

ではなく、

restful-cakephp.local/new

でアクセスできるようにしたい場合は、

$locationProvider.html5Mode(true);

を指定することで対応できる。この設定をしておけば、モダンブラウザであればハッシュなしでアクセスすることが可能になり、IE9以下のブラウザの場合には、ハッシュありのURLへとAngularJS側で置き換える処理が自動的に行われる。

AngularJSアプリのページをブラウザでリロードすると404エラーになったりする

$locationProvider.html5Mode(true);

を設定しているAngularJSアプリにモダンブラウザでアクセスしていて、表示中のページを直接リロードしたりすると404エラーになる。この現象は、

/new

へのアクセスをWebサーバがAngularJS関連のアクセスと扱わず、ルートディレクトリを対象にページを探そうとする点に原因がある。そのため404エラーになったりする。

この問題に対応するためには、

• mod_rewriteでURLを書き換える
• ハッシュ付URLへリダイレクトを行う

といった対処方法があるが、mod_rewriteを利用したURLの書き換えで対応した。具体的には、Webサーバのconfかhtaccessに以下の記述を追加する。

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ #/$1 [L]
</IfModule>

上の設定を行えば、モダンブラウザでハッシュ無しのURLで更新を行っても404エラーにならない。

AngularJSからRestfulなリクエストを送信のエントリーでは、CakePHPのwebrootにAngularJSアプリを配置して、フロント側からCakePHPで構成したバックエンドのAPIにリクエストを行う構成とした。その場合のmod_rewriteの記述は以下のようになる。

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond $1 ^(.+\.json$)
    RewriteRule ^(.*)$ index.php [QSA,L]
    RewriteCond $1 ^(new|edit|posts)
    RewriteRule ^(.*)$ #/$1 [L]
</IfModule>

API関連の.jsonへのアクセスはCakePHPで対処し、newやeditといったAngularJSアプリ用のURLの書き換えと処理を分けるようにしてある。CakePHPのwebrootにAngularJSを配置する場合には必要なノウハウになる。

mod_rewriteで書き換えを行った場合にはtemplateUrlの調整が生じる

上の設定を行った状態で、app.js内の$routeProviderに下の設定を行っているとする。

.when('/edit/:id', {
	templateUrl: 'app/partials/edit.html',
	controller: 'EditPostCtrl'
})

/edit/100

などのURLにアクセスすると、

edit/app/partials/edit.html

をtenmplateUrlとしてしまい、うまく表示することができなかった。この現象に対応するためには、index.htmlのheadタグ内に、

<base href="/">

の一行を追記することで対処することができる。また、cssなどのファイルがうまく読み込めない場合も上の記述でうまく対処できる。

参考
angular-seedで入門