[angularjs] Angular.js 컨트롤러 매개 변수 이해

• 컨트롤러 매개 변수는 무엇 일 수 있습니까?

  제어기 변수는 종속 되고, 주입 AngularJS와 인젝터 서비스. 그들은 무엇이든 될 수 있습니다. 그러나 일반적으로 컨트롤러 내부에서 사용되는 서비스 입니다.

• 컨트롤러 함수는 매개 변수와 함께 어디에서 호출됩니까?

  컨트롤러뿐만 아니라 지시어, 필터, 서비스 및 AngularJS의 다른 많은 것들이 함수 입니다. 하지만 프레임 워크는 많은 관리 할 때 와 방법을 이러한 함수가 호출 .

  관련 항목 이라고 부르는 이름 은 위에서 언급했듯이 종속성 이라는 이름이 있습니다. 마법 이라고 부르는 것은 작동중인 AngularJS 종속성 주입 메커니즘입니다.

  이러한 함수 (컨트롤러 및 기타)가 인젝터에 의해 호출되면 매개 변수 이름 (예 : $scope또는 $http또는 angularFire) 을 읽고 해당 이름 으로 등록 된 서비스를 검색 한 다음 함수가 호출 될 때 매개 변수로 제공됩니다.

  간단하다. 인젝터에 대한 “종속성”(인젝터가 관리하는 매개 변수)에 대해 지시하는 몇 가지 방법이 있습니다.

  단순히 함수를로 선언 function myCtrl($scope) {}하면 인젝터는 $scope매개 변수 이름에서 서비스 를 찾을 수 있습니다 . 당신은하지만 작게를 자바 스크립트 코드를 매개 변수 이름은 “a”또는 “X”와 같은 작은 문자열을 수정할 수 있기 때문에, 인젝터는 더 이상 서비스를 찾을 수 없습니다. 이 문제를 피하기 위해 배열 표기법을 사용하여 삽입 할 서비스 이름을 지정할 수 있습니다 . 이 경우 다음과 같이 함수를 선언합니다.myCtrl = ['$scope', function($scope) {}]

  AngularJS 세계에서 많은 배열 표기법 사용을 볼 수 있습니다. 이제 당신은 그것을 이해하기 시작합니다. 함수에 다른 이름 을 삽입 $scope하여 angularFire사용할 수도 있습니다 (이름 변경은 권장되지 않습니다 -이 예제는 학습 목적으로 제공됨 ) .-이렇게하면 함수 내에서 $ scope를 “skop”로 사용하고 angularFire를 다음과 같이 사용할 수 있습니다. “af”. 순서 배열의 서비스는 매개 변수의 순서와 일치합니다.['$scope', 'angularFire', function(skop, af) {}]

다른 예시:

var myController = ['$scope', '$resource', '$timeout',
    function($scope, $resource, $timeout) {
        // this controller uses $scope, $resource and $timeout
        // the parameters are the dependencies to be injected
        // by AngularJS dependency injection mechanism
    }
];

• angularFire는 어디에 정의되어 있습니까?

  에서 중포 기지 모듈 .

  이미 알고 있듯이 인젝터는 해당 “사물” 이름이 등록되어 있고 기록에 사용 가능한 한 모든 것을 주입 합니다. 해당 이름 의 “서비스”가있는 경우 그는 다음을 제공 할 수 있습니다. 할 있습니다.

  그러면 어떻게 만들어 지는지 name => stuff 인젝터가 사용하는 목록은 어떻게 작성됩니까?

  모듈 이 답입니다. 모듈 의 목록보다 조금 더입니다 name => stuff. 그것은에있는 모듈서비스, ​​팩토리, 필터, 지시문 등을 등록 에 있습니다.

  공식 문서에서 Module 메소드를 주의 깊게 살펴보십시오 . 거의 모든 메소드가 매개 변수로 수신됩니다 : name 및 일부 ” stuff “(여기서 “stuff”는 거의 항상 컨트롤러, 공장 또는 지시문을 정의 하는 함수입니다 . ). 지정된 이름을 통해 주입 할 수있는 것은이 모든 “물건”입니다 .

  “$ timeout”, “$ http”등과 같은 AngularJS 서비스는 ng 모듈 이 이미 프레임 워크에 의해로드 되었기 때문에 기본적으로 사용할 수 있습니다 .

  추가 서비스의 경우 모듈 을로드 / 요구해야합니다 . 당신이 무엇을 그의 ngRouter , 중포 기지 적재에 의해 … 등, 모듈 , 등록 된 물건은 주입 할 수 있는 당신의 모듈 / 응용 프로그램.

단계별 예를 살펴 보겠습니다.

// An empty module:
var module = angular.module('myModule', []);

// Now, adding an "injectable" constant: 
module.constant('niceStuff', { blip: 'blop', blup: 307 });

// We could add a service:
module.service('entityManager', ['$http', function($http){  }]);

// and so on... if I wanted to use "$resource" instead of "$http"
// in the entityManager service above...
// ...I would need to require the ngResource when creating the module above,
// like this: var module = angular.module('myModule', ['ngResource']);
// because "$resource" is not available by default

// NOW, anywhere else, since the code above already ran
// I can use those NAMES as dependencies like this:

// We are creating another module now:
var koolModule = angular.module('km', ['myModule']);
// Note that I am requiring the previous module through its registered name

// Now, anything I've declared in that module
// - just like "ng" (by default) and "firebase" (required) does -
// is available for "injection"!!!

koolModule.controller('koolController',
    ['niceStuff', 'entityManager', function(niceStuff, entityManager) {
        console.log(niceStuff.blip);      // 'blop'
        console.log(niceStuff.blup + 10); // 317
    }]
);

이것이 angularFire와 같은 firebase 항목을 사용할 수있는 방법입니다! 우리는 무엇을 했습니까? 먼저 “myModule”을 만들고 NAMED 항목을 등록했습니다. 나중에 “koolModule”에 “myModule”이 필요했습니다.이 이름은 이미 주입기 name => stuff목록 에서 사용할 수 있습니다 .

• 매개 변수의 fbURL은 어떻게 연결됩니까?

  방금 본 것처럼 대부분의 모듈 메서드 는 단순히 항목을 등록하고 주입 할 수 있도록 항목에 이름 을 부여 합니다. 입니다. 나중에 이러한 이름을 통해 및 / 또는 사용할 .

  경우 module.value('fbURL', 'https://angularjs-projects.firebaseio.com/')라고, fbURL (지정된 값)가에 등록 된 name => stuff목록 …이 경우, 이름은 “fbURL는”이며, 값은 / 물건은 URL 문자열입니다 -하지만 아무것도 될 수 있습니다!

• Angular.js에서 제공하는 $ location 및 $ timeout과 같은 모든 서비스를 볼 수있는 곳이 있습니까?

  예, API 참조 : http://docs.angularjs.org/api/

  시에주의 하는 방법은 왼쪽 측면 탐색이 구성되어 있습니다 …에 의해 모듈 ! 먼저, 수많은 지시문, 서비스, 필터 등 이 포함 된 ng 모듈입니다. 그 다음 아래에는 다른 모듈 (ngRoute, ngResource, ngMock 등)이 있으며, 각 모듈에는 자체 서비스, fitler 또는 지시문이 포함되어 있습니다.

이러한 생각을 공유 할 기회를 주셔서 감사합니다. 나는 그것들을 쓰는 것을 즐겼다.