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

80

저는 방금 Angular.js를 배우기 시작 했으며 Angular 홈페이지의 "Wire up a Backend"예제에서 project.js 를 살펴 보았습니다 .

컨트롤러 기능의 매개 변수에 대해 혼란 스럽습니다.

function ListCtrl($scope, Projects) {
  ... 
}   

function CreateCtrl($scope, $location, $timeout, Projects) {
  ... 
}

function EditCtrl($scope, $location, $routeParams, angularFire, fbURL) {
   angularFire(fbURL + $routeParams.projectId, $scope, 'remote', {}).
   then(function() {
     ...
   });
}

이러한 컨트롤러 함수는 routeProvider에서 호출되지만 매개 변수가 제공되지 않습니다.

$routeProvider.
  when('/', {controller:ListCtrl, templateUrl:'list.html'}).
  when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
  when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
  otherwise({redirectTo:'/'});
});

나는 아마도 무슨 일이 일어나고 있는지 설명하는 것이 지금까지 찾을 수있는 유일한 방법은 "주입 서비스 속 컨트롤러"를 설명하는 $location, $timeout하지만 방법 매개 변수하지 angularFire와 fbURL.

내 구체적인 질문은 다음과 같습니다.

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

  2. 컨트롤러 함수는 매개 변수와 함께 어디에서 호출됩니까? 아니면 매개 변수가 호출되지 않고 Angular.js 마법이 많은 연관이 발생하는 컨트롤러와 관련된 것입니다 (그렇다면 github에서 소스 코드를 볼 수 있습니까)?

  3. 어디에 angularFire 정의되어 있습니까?

  4. fbURLin 매개 변수 는 다음 과 어떻게 연결 됩니까?

    angular.module('project', ['firebase']).
    value('fbURL', 'https://angularjs-projects.firebaseio.com/').
    factory ...

  5. Angular.js가 제공하는 모든 서비스 (예 : $location및 $timeout)를 볼 수있는 곳이 있습니까? (목록을 찾으려고했지만 실패했습니다.)

angularjs 
— 앨리스
소스
5. Angular에 포함 된 모든 내장 서비스, 필터, 지시문의 목록은 API를 참조하십시오. docs.angularjs.org/api
— jpmorin
1
4. 이해하는 것처럼 컨트롤러의 매개 변수는 컨트롤러의 정의에서 각도로 주입됩니다. Angular는 등록 된 모든 서비스를 살펴보고 지정된 매개 변수 이름과 일치하는 항목을 찾고 해당 서비스를 삽입하려고합니다!
— jpmorin 2013 년
3. 프로젝트 모듈을 정의 할 때 firebase 모듈 종속성도 포함했습니다. firebase 모듈 내부에는 이전 fbURL과 같은 angularFire 서비스가 있어야합니다.
— jpmorin 2013 년
1
2. 컨트롤러를 정의하는 적절한 방법은 다음과 같습니다. angular.module('project').controller('EditCtrl', ['$scope', '$location', '$routeParams', 'angularFire', 'fbURL', function($scope, $location, $routeParams, angularFire, fbURL) { ... } ]);이렇게하면 먼저 삽입 할 서비스의 이름을 설정 한 다음 원하는 경우 해당 서비스에 다른 이름을 지정합니다. 사실, 이것은 나중에 각도 코드를 최소화하려는 경우 필수입니다 (최소화로 변수 이름이 변경되므로 각도는 여전히 서비스 이름을 찾을 수 있어야합니다).
— jpmorin 2013 년
1
@jpmorin은 답변으로 귀하의 의견을 추가하면 모두 정확합니다.
— toxaq 2013 년

답변:

152

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

    제어기 변수는 종속 되고, 주입 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 또는 지시문이 포함되어 있습니다.

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

— J. 브루니
소스
4
감사합니다! 무엇과 이유에 대한 좋은 설명.
— Kevin Shea
4
순전히 명명 된 매개 변수의 존재에 기반한 암시 적 행동은 직관적이지 않으며 절대적으로 증오하지만 훌륭한 답변에 감사드립니다.
— jarmod
1
@jarmod 내 생각은 정확히-이 게시물을 먼저 보지 않고 "phonecat"AngularJS 자습서를 살펴 보는 것은 당혹 스럽습니다!
— Monkpit
1
"간단하다." 아니.
— J. Dimeo
2
멋진 설명입니다. 일부 튜토리얼에서는 당연한 것으로 간주되는 많은 것들이 있습니다. "이렇게 입력하면 작동합니다." 나는 어떻게 그리고 왜 그랬는지 알 필요가 있고 이것은 많은 대답을했다. 시간 내 주셔서 정말 감사합니다!
— John Carrell
1

먼저이 프레임 워크를 선택하는 것이 좋습니다. 최고입니다. $ 기호로 표시되는 변수는 삽입되며 표준 프레임 워크의 일부입니다. 이러한 서비스는 당신의 삶을 훨씬 더 쉽게 만들어 줄 것입니다. 컨트롤러를 생각하는 가장 좋은 방법은 스크립트 시트입니다. 코드를 분리하는 데 도움이됩니다. 그것들을 방법으로 생각하지 마십시오. $ timeout 및 $ scope와 같은 변수는 특정 작업을 수행해야 할 때 편리하게 사용할 수있는 서비스입니다. 프레임 워크에 대한 모든 문서는 http://docs.angularjs.org/api/에 있지만이 자습서 http://docs.angularjs.org/tutorial/로 시작하겠습니다 .

앵귤러 파이어는 프레임 워크의 일부가 아닙니다. 강력한 실시간 분산 네트워크를 만들기 위해 프레임 워크를 활용하는 또 다른 서비스입니다. angularfirejs를로드하면 서비스와 함께 제공되며이 서비스는 표시되는 매개 변수로 삽입됩니다.

두 번째 질문에 답하기 위해 전달하는 매개 변수는 해당 서비스를 만드는 한 무엇이든 될 수 있습니다. 컨트롤러에 대한 고유 한 매개 변수를 만들려면 다음을 참조하십시오. http://docs.angularjs.org/guide/dev_guide.services.creating_services

fbURL은 만들 수있는 변수 일 뿐이며 질문에 넣은 코드는 만드는 방법에 대한 지침 일뿐입니다.

Angularjs는 제공하는 것을보고 배울 수있는 프레임 워크 유형이 아닙니다. 단순히 모든 것을 제공하기 때문입니다. 훌륭한 앱을 만들기 위해 가져올 수있는 모든 것. 대신 angular로 문제를 해결하는 방법을 Google에 묻는 데 집중해야합니다.

또한 YouTube에서 비디오를 확인하십시오. 훌륭한 것들을 찾을 수 있습니다.

— Pbrain19
소스
1

toxaq 의견에 따라 답변으로 의견이 있습니다.

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

    대부분은 서비스, 팩토리, 값, 상수 등이 될 수 있으며 경로 정의에서 해결을 사용하기 전에 또는 사용하기 전에 정의한 것입니다.

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

    컨트롤러를 정의하는 적절한 방법은 다음과 같습니다. 

    angular.module('project').controller('EditCtrl', [
    '$scope', 
    '$location', 
    '$routeParams', 
    'angularFire', 
    'fbURL', 
    function($scope, $location, $routeParams, angularFire, fbURL) { 
        ... 
    } 
]);

    이렇게하면 먼저 삽입 할 서비스의 이름을 설정 한 다음 원하는 경우 해당 서비스에 다른 이름을 지정합니다. 사실, 이것은 나중에 각도 코드를 최소화하려는 경우 필수입니다 (최소화로 변수 이름이 변경되므로 각도는 여전히 서비스 이름을 찾을 수 있어야합니다).

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

    프로젝트 모듈을 정의 할 때 firebase 모듈 종속성도 포함했습니다. firebase 모듈 내부에는 이전 fbURL과 같은 angularFire 서비스가 있어야합니다.

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

    이해하는 것처럼 컨트롤러의 매개 변수는 컨트롤러의 정의에서 각도로 주입됩니다. Angular는 등록 된 모든 서비스를 살펴보고 지정된 매개 변수 이름과 일치하는 항목을 찾고 해당 서비스를 삽입하려고합니다!

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

    Angular에 포함 된 모든 내장 서비스, 필터, 지시문의 목록은 API를 참조하십시오 : http://docs.angularjs.org/api

— jpmorin
소스
1

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

컨트롤러 함수는 ngController 지시문 으로 인스턴스화 되거나를 사용하여 경로 생성 중에 컨트롤러를 언급 한 경우에 인스턴스화됩니다 $routeProvider. AngularJS는이 작업을 tranperently 수행하고 컨트롤러에서 정의한 매개 변수를 DI.

DI는 매개 변수의 이름 (또는 일부 순서)을 일치시켜 작동합니다. 따라서 $scope현재 범위를 $http얻고 http 서비스를 얻습니다.

— Chandermani
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.