angular JSをビルドする際、minify化していますか?容量節約、難読化という意味でもminify化はしておいたほうが良いですよ。
Angular JSをminify化する上での問題点
Angular JSの依存関係を記載する箇所で、minify化すると問題が顕著化することが既に知られています。それに対する対応策も既に知られています。今回の記事はただの焼き増しですので、ご存知の方も多いことでしょう。
今回、Angular JS + Bootstrapを使った開発です。いつものようにビルドして動かすと、ある箇所で動かなくなりました
bootstrapのModal機能はminify化すると動かなくなります
見出しの通りですが、bootstrapのモーダルウインドウで、インラインコントローラー(正式名称はわかりません)を使ってコーディングすると、minifyした時にエラーが発生します。
インラインコントローラーというのかわかりませんが、ここではcontrollerの中にcontrollerを書くことを言っています。
エラーの出たコード
$scope.MtrialConfirm = function(targetId){
var modalInstance = $uibModal.open({
animation:true,
templateUrl:'Mtrial.html',
controller: function ($scope, $log, $uibModalInstance) {
$scope.deleteSubmit = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss();
};
},
});
//略
モーダルウインドウはウインドウのコントローラーを作る必要があるのですが、大した処理をしないのであれば、わざわざ分けて書くのも大変なので、インラインで記述できます。
しかし、minify化すると、
Error: [$injector:unpr] Unknown provider: aProvider <- a
というエラーが発生します。
これはAngular JSにはよくあるエラーなんですが、minify化すると、$scopeとかいった引数が、aとかbといった無意味な名前に書き換えられることが原因です。
yoemanで最初から準備してくれるminify化ツールを使うと、このあたりをある程度自動で回避してくれるみたいですが、残念ながらインラインコントローラは無理でした。
バグらないためのminify化の対応策
そのため、インラインコントローラーでは次のように修正する必要があります
$scope.MtrialConfirm = function(targetId){
var modalInstance = $uibModal.open({
animation:true,
templateUrl:'Mtrial.html',
controller: ['$scope' , '$log' , '$uibModalInstance' , function ($scope, $log, $uibModalInstance) {
$scope.deleteSubmit = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss();
};
}],
});
特にひねりもないですが・・・インラインコントローラーに配列風な記述をするだけです。
普通のコントローラでもこの書き方で回避できます。

