각도를 정의할 때 배열 표기법을 사용하는 이유JS 컨트롤러

각도를 정의할 때 배열 표기법을 사용하는 이유JS 컨트롤러

이 질문이 너무 명백하게 들렸다면 사과드립니다.

나는 최근에 AngularJs를 탐색하고 배우기 시작했다.좋은 튜토리얼을 몇 개 해봤는데...

• 공식 문서
• w3c 스쿨
• 멋진 사이트

..그리고 내가 본 몇 가지 다른 것들이 있다.

내가 모든 서류를 읽었다고 말하는 것은 아니다.

질문은 여기서 시작합니다.

이제 질문입니다만, 컨트롤러의 정의는 한 곳에서 다른데 다른 곳에서 다른 것을 알 수 있습니다.

하나의 정의에서는 주입에 일종의 배열 표기법(공식 용어 불명)을 사용합니다.

app.controller("MyCtrl", ['$scope', function($scope){
    $scope.someData = "Array notation";
}]);

또, 어레이가 없는 것도 있습니다.

app.controller("MyCtrl", function($scope){
    $scope.someData = "non-array notation";
});

내가 이해하려고 하는 것은 이것뿐이라고는 말하지 않지만, 그렇다, 나는 반드시 그 차이를 이해하고 싶다.

둘 사이에 큰 차이가 있나요?

정말 감사해요.

메모: SO에서 유사한 질문을 검색했지만 원하는 질문을 찾을 수 없었습니다.미안하다.

차이점은 두 번째가 최소화되면 파라미터 이름이 최소화되고 각도가 인수를 검사하여 어떤 의존관계를 주입할지를 결정할 수 없다는 것입니다.문자열에 종속성이 있는 배열 구문은 최소화가 안전하다는 것을 의미합니다.

요.ng-annotate그러면 두 번째 예가 첫 번째 예시로 변경되어 코드가 다시 최소화로 안전해집니다.

두 접근법 사이에는 큰 차이가 없다.양쪽 코드는 동일하게 동작한다.하지만 두 번째 코드를 사용하면 코드를 최소화한 후 혼란스러울 수 있습니다.

예를 들어 보겠습니다.-

  app.controller("MyCtrl", function(a){ ... });//$scope is changed to a

또한 AngularJs 코드는 $scope 변수를 사용하기 때문에 첫 번째, 두 번째, 세 번째 등의 파라미터를 사용하지 않기 때문에 코드가 작동하지 않습니다.

따라서 첫 번째 코드는 두 번째 코드보다 안전합니다. 코드를 최소화할 때 동일한 변수가 사용됩니다.$140입니다.

예를 들어 보겠습니다.

app.controller("MyCtrl", ['$scope', function(a){...}]);//a refers to $scope

따라서 a 대신에 $scope가 삽입되므로 코드를 최소화하면 위의 코드가 정상적으로 작동합니다.따라서 여러 파라미터를 전달하면 이 예에서는 순서가 중요합니다.

다음 사항을 확인합니다.

 app.controller("MyCtrl", ['$scope','$timeout' ,function(a,t){...}]);

여기서 a는 $120으로 주입되고 t는 $120으로 주입됩니다.

따라서 전달된 파라미터의 순서를 변경할 경우

app.controller("MyCtrl", ['$timeout', $scope', function(a,t){...} ] ） 。a는 $190, t는 $190입니다.

따라서 이 예에서는 코드 순서가 중요하지만 두 번째 예에서는 코드 순서가 $scope, $timeout과 같이 이름이 중요하므로 문제가 되지 않습니다.

다음과 같은 첫 번째 예제 코드를 사용하는 경우 변수를 주입하는 다른 방법도 있습니다.

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

매개 변수가 여러 개인 경우,

 MyCtrl.$inject = ['$scope','$timeout'];

주석에는 주로 세 가지 종류가 있습니다.

1. 암묵적 주석 - 첫 번째 예제 코드
2. $inject 속성 주석 - $inject 메서드
3. 인라인 어레이 주석 - 두 번째 예제 코드

자세한 내용은 이쪽에서 확인하실 수 있습니다.

최소화에 관한 한 차이가 있다.퍼포먼스를 향상시키기 위해 파일을 최소화할 경우 옵션2를 사용하면 문제가 발생할 수 있습니다.

Angular는 컨트롤러의 의존성을 인수 이름에서 컨트롤러의 컨스트럭터 함수로 유도하기 때문에 컨트롤러의 JavaScript 코드를 최소화하면 모든 함수 인수가 최소화되어 의존성 인젝터가 서비스를 올바르게 식별할 수 없게 됩니다.

따라서 기본적으로 첫 번째 옵션을 사용하는 것이 좋습니다. 타이핑이 조금 더 많이 필요하지만 코드를 최소화하면 더 안전하고 고장나지 않습니다. :-)

이것은 꽤 짧은 튜토리얼이지만 잘 설명하고 있다.

나는 크고 복잡한 앵글을 가지고 있다.JS프로젝트이기 때문에 모든 코드를 수동으로 변경하는 것은 매우 번거로운 일이었을 것입니다.하지만 나는 바벨 플러그-앵글러-아나노테이트를 사용하여 해결했다.

플러그인 설치:

$ npm install babel-plugin-angularjs-annotate --save-dev

다음으로 플러그 인을 추가합니다..babelrc파일:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["angularjs-annotate"]
}

언급URL : https://stackoverflow.com/questions/30088534/reason-for-using-array-notation-when-defining-angularjs-controller