網頁

AngularJS Code Minified 後的問題: Error: [$injector:unpr] http://errors.angularjs.org/1.2.26/$injector/unpr?

今天在把 AngularJS 的 Code 放上 Production 環境時出現了一個問題:

文件描述$injector設定錯誤,但小弟檢查一遍原code後發現無相關錯誤。

後來直接看Production上minified的code才發現上Production環境時因javascript minified的關係,造成$scope被轉成a了!
(註:minified會透過縮減變數名稱節省檔案大小,故$scope會變成a)

附上原Code:
App.controller("MyCtrl", function ($scope) {
    $scope.foo= "foo";
});
Minified後:(大家可以透過線上minified網站試試看)
App.controller("MyCtrl",function(o){o.foo="foo"});
發生錯誤:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.26/$injector/unpr?.....

解決方法是改變code的寫法,在inject時明確指定inject的物件:
App.controller("MyCtrl", ["$scope", function ($scope) {
    $scope.foo= "foo";
}]);
再次Minified後,跑起來不會發生錯誤了:
App.controller("MyCtrl",["$scope",function(o){o.foo="foo"}]);

沒有留言:

張貼留言

Related Posts Plugin for WordPress, Blogger...