帶閉包編譯器的AngularJS - 簡單優化失敗

Question

有人可以說明為什么簡單的優化在AngularJS中失敗了嗎？ 更重要的是，我怎樣才能讓他們工作？ （也歡迎定義控制器的最佳實踐/澄清）。

這是我的場景，大大簡化了。

我正在使用這個HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html ng-app="">
  <head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js" type="text/javascript"></script>
    <script src="simple_script.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
    <script>
    //inline JS here
    $(function() {
        var spinner = $( "#qtySpinner" ).spinner({
            spin: function( event, ui ) {
                scope.qty = ui.value;
                scope.$digest();
                //console.log( event );
            }
        }); //end spinner

        var scope = angular.element(spinner).scope();
    });
    </script>
    <title>Angular Testing</title>
  </head>
  <body>
    <div ng-controller="InvoiceCntl">
      <b>Invoice:</b><br>
      <br>
      <table>
        <tr>
          <td>
            Quantity
          </td>
          <td>
            Cost
          </td>
        </tr>
        <tr>
          <td>
            <input id="qtySpinner" type="integer" min="0" ng-model="qty" required="">
          </td>
          <td>
            <input type="number" ng-model="cost" required="">
          </td>
        </tr>
      </table>
      <hr>
      <b>Total:</b> {{calculate(qty,cost)}}
    </div>
    <br>
  </body>
</html>

我正在使用這種高度縮小證明（我認為）JS文件為“simple_script.js”，它實際上是這樣工作的：

//this works
window["InvoiceCntl"] = function ($scope) {
   $scope["qty"] = 1;
   $scope["cost"] = 19.95;
   $scope["calculate"] = function (xval, yval) {
                            return xval * yval;
                         };
}

通過SIMPLE_OPTIMIZATIONS縮小使用Google Closure Compiler（ http://closure-compiler.appspot.com/home ），我得到了這個，它打破了：

//this breaks, seemingly because "a" replaces "$scope"?
window.InvoiceCntl=function(a){a.qty=1;a.cost=19.95;a.calculate=function(a,b){return a*b}};

我相信這是因為$scope是一個關鍵的詞角驗看（依賴注入？），因為當我添加了額外的步驟，手動，傳球$scope ，並在分配給a函數中的第一行，它的工作原理。 像這樣：

//manually passing "$scope" and immediately assigning it to "a" works
window.InvoiceCntl=function($scope){var a=$scope;a.qty=1;a.cost=19.95;a.calculate=function(a,b){return a*b}};

為什么在這種情況下$scope行為與普通函數參數不同？
有沒有辦法使用Closure編譯器（或其他東西）縮小（簡單或高級）角度代碼，而無需像這樣的手動步驟？
$scope配置的還是一個固定的關鍵字，也就是說，當我定義控制器時，我可以將關鍵字改為“$ myscope”嗎？ （不確定這對我有幫助）

謝謝。

Answer 1

你應該閱讀http://docs.angularjs.org/tutorial/step_05

我認為你對注入'$ scope'的擔憂是正確的。 您可以注入以下內容。

var module = angular.module('youApp', []);
module.controller('yourCtrl', ['$scope', function($scope) {
   $scope["something"] = "somevalue";
})];

編輯：縮小重命名$scope ，您可以通過添加以下內容來阻止：

InvoiceCntl.$inject = ['$scope'];

帶閉包編譯器的AngularJS - 簡單優化失敗

問題描述

1 個解決方案

解決方案1
2 已采納 2013-02-01 00:10:15

帶閉包編譯器的AngularJS - 簡單優化失敗

問題描述

1 個解決方案

解決方案1 2 已采納 2013-02-01 00:10:15

解決方案1
2 已采納 2013-02-01 00:10:15