缩小角度答案

【问题标题】：minifying angular缩小角度
【发布时间】：2013-03-29 19:31:37
【问题描述】：

我对使用编译器工具自动化/简化 Angular 项目很感兴趣，它可能适用于其他所有东西，但是 Angular 注入和命名空间很尴尬，以至于无法逃避编译器知识。这样做的最佳/专业方法是什么？

谢谢，最后一件事，

app.controller('ctrl',['$rootScope',function($rootScope){
    ...
}]);

缩小时有效，但我如何缩小

app.config(['$routeProvider', function($routeProvider){

}]);

当我缩小连续动作时它会起作用吗？

app.controller(...).directive(...).run(...)

【问题讨论】：

这些应该都可以正常工作。查看我的构建脚本：github.com/joshdmiller/ng-boilerplate。但我不确定你在这里具体问什么。您遇到了什么问题？
app.config(['$routeProvider', function($routeProvider){$routeProvider.something()...}]);缩小时变成 app.config(['$routeProvider', function(e){e.f=function()...} ，并导致 e->eProvider 错误。所以我在这个过程中遗漏了什么？我应该使用$injector 或 $inject 在应用程序的某个地方？
您提供的代码对我来说很好用 - 再次查看该链接。你也可以发布函数的主体吗？
好的，我试试，我把注入的行格式放好后还有什么需要注意的吗？
我不知道。 config 缩小我从来没有遇到过任何问题。

标签： angularjs minify

【解决方案1】：

在 Angular 中，您需要为注入器注解函数以了解您希望在函数中注入哪些依赖项。基本上有三种方法可以在您的函数中注入依赖项，这些方法在官方 Angular 网站上进行了描述。三种方式分别是：

1.使用内联数组注解

 yourModule.controller('yourController', ['$scope', function($scope) {}]);

2.使用$inject属性注解

var yourController = function($scope) {};

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

yourModule.controller('yourController', yourController);

3.隐含从函数参数名

yourModule.controller('yourController', function($scope) {});

现在，当您缩小项目时，您的依赖项名称将被重命名。在第一种情况下，您的代码将类似于

yourModule.controller('yourController', ['$scope', function(e) {}]);

在第三种情况下，您的代码将类似于

yourModule.controller('yourController',  function(e) {});

它会破坏您的应用程序，因为 Angular 无法识别您的依赖项名称。所以建议不要在你的项目中使用隐式依赖注入。综上所述，内联数组注解是最受程序员欢迎的方式。

【讨论】：

【解决方案2】：

我建议使用https://github.com/olov/ng-annotate。它将允许您编写如下代码。

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) {
});

然后 ngAnnotate 将其转换为可安全缩小的以下内容。

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout",   function($scope, $timeout) {
}]);

【讨论】：

【解决方案3】：

minifier 保持字符串不变，这就是我们使用数组表示法的原因。链接方法不会改变压缩器保持字符串完整的方式。

var app=module(myapp);
app.config(['$routeProvider', function($routeProvider){
 $routeProvider.dosomestuffs()
}]);

将被缩小为类似

var a=module(myapp);
a.config(['$routeProvider', function(b){
      b.dosomestuffs()
}]);

但是由于 '$routeProvider' 字符串，angular 仍然会找到它的方式。

【讨论】：

【解决方案4】：

如果您总是使用注释，那么缩小 Angular 脚本应该不会有问题。

app.controller(['$scope', function(mrScope) {
    mrScope.yourProperty = 'it does not matter the dependency variable names if you use annotations'; 
}]);

【讨论】：

【解决方案5】：

只要您对要注入的依赖项使用数组表示法，就不会出现缩小问题。您使用的缩小工具应该可以毫无问题地处理您的任何示例（在我的项目中，我们使用 uglify 来完成此操作）。

事实上，对于名称奇特的注入（以点和字符命名会导致函数名称无效，如 ABC.CDE），数组表示法是注入它们的最佳方式。

【讨论】：

【解决方案6】：

我在缩小时遇到了同样的问题，和你一样，它只对 $routeProvider 配置元素失败了。我的答案是使用 $inject 方法，就像 Himanshu 对我的配置所说的那样，即使语法您展示的第一个示例适用于我的控制器。所以我会在这里发布我的.config() 代码，因为我没有在上面的答案中看到它具体列出：

var app = angular.module('myApp');
var RouteProviderConfig = function ($routeProvider) {
        $routeProvider
            .when(...)
            .otherwise(...);
    };
RouteProviderConfig.$inject = ['$routeProvider'];
app.config(RouteProviderConfig);

这修复了我的配置错误，但我的控制器按照您编写第一个示例的方式工作：

app.controller('ctrl',['$rootScope',function($rootScope){
    ...
}]);

Angular Documentation 似乎表明这两种方式都应该起作用，所以我认为可能存在配置错误，或者 $routeProvider 或其他完全...

【讨论】：