8

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

谢谢，最后一件事，

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

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

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

}]);

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

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

6 回答 6

11

在 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 无法识别您的依赖项名称。所以建议不要在你的项目中使用隐式依赖注入。从以上两个内联数组注释是程序员中最流行的方式。

于 2015-03-26T13:57:14.647 回答
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) {
}]);
于 2015-02-01T00:00:14.567 回答
1

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

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

将被缩小为

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

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

于 2015-02-13T13:31:31.517 回答
0

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

app.controller(['$scope', function(mrScope) {
    mrScope.yourProperty = 'it does not matter the dependency variable names if you use annotations'; 
}]);
于 2015-03-05T02:52:39.443 回答
0

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

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

于 2015-04-14T08:07:09.807 回答
0

I had the same problem when minifying, and like you, it only failed for the $routeProvider config elements.. The answer for me was to use the $inject method like Himanshu says for my configs, even though the syntax you show for your first example works for my controllers. So I'll post my .config() code here since I don't see it specifically listed in the answers above:

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

This fixed my error for configs, but my controllers work the way your first example is written:

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

The Angular Documentation seems to suggest that both ways should work, so I think it's possible there is a bug with configs, or $routeProvider, or something else entirely...

于 2015-11-20T22:21:56.017 回答