Angular 中的缩小

什么是缩小?

这是从源代码中删除所有不必要的字符而不更改其功能的过程。

普通语法

如果我们使用普通的角度语法来编写控制器,那么在微调我们的文件之后它将破坏我们的功能。

控制器(缩小前):

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

使用缩小工具后,将如下所示缩小。

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

这里,minification 从代码中删除了不必要的空格和$ scope 变量。因此,当我们使用这个缩小的代码时,它不会在视图上打印任何内容。因为$ scope 是控制器和视图之间的关键部分,现在它被小的’e’变量取代。因此,当你运行应用程序时,它将给出未知提供程序’e’依赖性错误。

有两种方法可以使用服务名称信息来注释你的代码,这些信息是安全的最小化:

内联注释语法

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

$ inject 属性注释语法

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

缩小后,此代码将是

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

这里,angular 将变量’a’视为$ scope,它将输出显示为’Hello World!’。