带闭包编译器的AngularJS - 简单的优化失败

有人能说清楚为什么简单的优化在AngularJS中失败了吗？更重要的是，我怎样才能让他们工作？（对于定义控制器的最佳实践/澄清也是受欢迎的）。带闭包编译器的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; 
         }; 
}

缩小的使用谷歌关闭编译器（http://closure-compiler.appspot.com/home）与SIMPLE_OPTIMIZATIONS，我得到这个，它打破：

//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是Angular寻找的关键字（依赖注入？），因为当我手动添加额外的步骤传递$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是$scope是可配置还是固定关键字，即我可以在定义控制器时将关键字更改为“$ myscope”？（不知道是否帮助我）

谢谢。

来源

2013-01-31 Marc

你应该阅读http://docs.angularjs.org/tutorial/step_05

我觉得你的关切注入“$范围”是正确的。你可以注入如下。

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

编辑：的微小重命名$scope，您可以通过添加防止这种情况：

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

来源

2013-02-01 00:10:15 Tosh

你的答案我指出了正确的方向，这样的感谢。该链接中最相关的部分标题为“关于缩小的注释”，它描述了如何显式注入'$ scope'，拉'PhoneListCtrl。$ inject = ['$ scope'];'。你的代码同样是正确的，并且教程中的某个部分（目前无法找到它）描述了正确声明它们的三种方法：'$ inject'（正如我写的），你的建议（就像'$ inject'的简写，以及所有示例（以及我最初的问题）中显示的基本方式。 – Marc

带闭包编译器的AngularJS - 简单的优化失败

回答

相关问题