Angular에서 각 괄호를 사용하는 목적은 무엇입니까?

Angular에서 각 괄호를 사용하는 목적은 무엇입니까?

나는 선언의 차이를 이해하고 싶다.MyOtherService그리고.MyOtherComplexService특히 대괄호 부분의 용도는 무엇입니까?사용할 때와 사용하지 않을 때?

var myapp = angular.module('myapp', []);

myapp.factory('MyService', function($rootScope, $timeout) {
    return {
        foo: function() {
            return "MyService";
        }
    }
});

myapp.factory('MyOtherService', function($rootScope, $timeout, MyService) {
    return {
        foo: function() {
            return "MyOtherService";
        }
    }
});

myapp.factory('MyOtherComplexService', ['$rootScope', '$timeout', 'MyService', function($rootScope, $timeout, MyService) {
    return {
        foo: function() {
            return "MyOtherComplexService";
        }
    } 
}]);

myapp.controller('MyController', function($scope, MyOtherService, MyOtherComplexService) {

    $scope.x = MyOtherService.foo();
    $scope.y = MyOtherComplexService.foo(); 
});

Angular를 사용할 수 있습니다.최소화할 JS 코드.각진JS는 파라미터 이름을 사용하여 값을 컨트롤러 함수에 주입합니다.JavaScript 최소화 프로세스에서는 이들 파라미터의 이름이 보다 짧은 문자열로 변경됩니다.문자열 배열로 함수에 주입되는 파라미터를 알려줌으로써 Angular파라미터의 이름이 변경되어도 JS는 올바른 값을 주입할 수 있습니다.

Ufuk의 답변에 추가하려면:

ngmin - 표준 모듈을 min-safe 모듈로 컴파일합니다.

Angular의 min-safe 대괄호 표기법은 모든 의존관계를 두 번 입력하고 인수순서가 중요하기 때문에 그다지 편리하지 않습니다.표준 모듈을 min-safe 모듈로 컴파일하는 ngmin이라는 툴이 있습니다.그 때문에, 이러한 모든 것을 수작업으로 관리할 필요는 없습니다.

각도 + 커피 스크립트

Coffee Script를 사용하고 있다면 상황은 더욱 악화됩니다.소스 맵을 파괴하는 ngmin과 직접 작성하려면 코드 전체를 대괄호로 묶어야 합니다.이것은 매우 보기 흉합니다.

angular.module('whatever').controller 'MyCtrl', ['$scope', '$http' , ($scope, $http) ->
  # wrapped code
]

내 생각에 이것은 CoffeeScript의 결함이 아니라 Angular 팀의 잘못된 설계 결정입니다. 왜냐하면 함수를 마지막 인수로 사용하지 않는 것은 모든 JS/CoffeeScript 규칙에 위배되기 때문입니다.충분히 외치고 있습니다.다음은 이 문제를 해결하기 위한 도우미 기능입니다.

deps = (deps, fn) ->
  deps.push fn
  deps

이것은 2개의 인수를 받아들이는 매우 단순한 함수입니다.첫 번째는 의존관계를 포함하는 문자열 배열이고 두 번째는 모듈의 함수입니다.다음과 같이 사용할 수 있습니다.

angular.module('whatever').controller 'MyCtrl', deps ['$scope', '$http'] , ($scope, $http) ->
  # unwrapped code \o/

앞서 말한 내용을 예시하기 위해 다음 구문을 사용할 경우:

myapp.factory('MyService', function($scope, $http, MyService) { ... });

대부분의 JS 미니어는 다음과 같이 변경됩니다.

myapp.factory('MyService', function(a, b, c) { ... });

functions 인수명은 일반적으로 짧은 이름으로 이름을 바꿀 수 있습니다.그러면 Angular 코드가 해제됩니다.

Angular에서 코드를 모든 미니어로 최소화할 수 있도록 하려면 대괄호 구문을 사용합니다.

myapp.factory('MyService', ['$scope', '$http', 'MyService', function($scope, $http, MyService) { ... }]);

다음과 같이 최소화할 수 있습니다.

myapp.factory('MyService', ['$scope', '$http', 'MyService', function(a, b, c) { ... }]);

Minipper는 문자열에 영향을 주지 않으므로 Angular는 Miniated 코드와 match 인수를 순서대로 볼 수 있습니다.

$scope    = a
$http     = b
MyService = c

이 험악한 각 괄호 구문을 피하기 위해서는 ng-annotate 등의 스마트미니어를 사용해야 합니다.

현시점에서는 ng-min은 권장되지 않습니다.대신 ng-annotate를 사용합니다.

개발 시 min-safe/bracket 표기법을 사용할 필요가 없도록 빌드 작업에서 ng-notate를 사용하는 것이 좋습니다.코드 읽기 및 유지보수가 어려워지기 때문입니다.

npm에는 grunt-plugin과 gulp 플러그인이 있습니다.

언급URL : https://stackoverflow.com/questions/18032068/what-is-the-purpose-of-square-bracket-usage-in-angular