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(); }; }], });
特にひねりもないですが・・・インラインコントローラーに配列風な記述をするだけです。
普通のコントローラでもこの書き方で回避できます。