AngularJS
구성 요소
수색…
매개 변수
| 매개 변수 | 세부 |
|---|---|
| = | 양방향 데이터 바인딩 사용. 즉, 구성 요소 범위에서 해당 변수를 업데이트하면 변경 내용이 상위 범위에 반영됩니다. |
| < | 부모 범위에서 값을 읽고 업데이트하지 않을 단방향 바인딩입니다. |
| @ | 문자열 매개 변수. |
| & | 구성 요소가 부모 범위에 무언가를 출력해야하는 경우 콜백에 사용됩니다. |
| - | - |
| 라이프 사이클 후크 | 세부 정보 (angular.version> = 1.5.3 필요) |
| $ onInit () | 요소의 모든 컨트롤러가 구성되고 바인딩이 초기화 된 후 각 컨트롤러에서 호출됩니다. 이것은 컨트롤러에 초기화 코드를 넣는 좋은 장소입니다. |
| $ onChanges (changesObj) | 단방향 바인딩이 업데이트 될 때마다 호출됩니다. changesObj 는 변경된 바운드 프로퍼티의 이름을 키로 가지는 해시이며 값은 { currentValue, previousValue, isFirstChange() } 형식의 객체입니다. |
| $ onDestroy () | 스코프를 포함하고있는 스코프가 파기되었을 때에 컨트롤러로 불려갑니다. 이 후크를 사용하여 외부 리소스, 시계 및 이벤트 처리기를 해제합니다. |
| $ postLink () | 이 컨트롤러의 요소와 그 자식이 링크 된 후에 호출됩니다. 이 후크는 Angular 2의 ngAfterViewInit 및 ngAfterContentInit 후크와 유사하다고 볼 수 있습니다. |
| $ doCheck () | 다이제스트 사이클의 각 차례마다 호출됩니다. 변경 사항을 감지하고 조치 할 수있는 기회를 제공합니다. 감지 한 변경 사항에 대한 응답으로 수행하려는 모든 조치는이 후크에서 호출되어야합니다. 이것을 구현하면 $ onChanges가 호출 될 때 아무런 효과가 없습니다. |
비고
구성 요소는 구성 요소 기반 응용 프로그램 구조에 적합한 간단한 구성을 사용하는 특수한 지시문입니다. 구성 요소가 Angular 1.5로 도입 된 경우이 섹션의 예제는 이전 AngularJS 버전에서는 작동하지 않습니다 .
구성 요소에 대한 전체 개발자 안내서는 https://docs.angularjs.org/guide/component에서 사용할 수 있습니다.
기본 구성 요소 및 LifeCycle Hooks
구성 요소가 무엇입니까?
- 구성 요소는 기본적으로보다 단순한 구성을 사용하는 지시어로 Angular 2와 관련된 구성 요소 기반 아키텍처에 적합합니다. 구성 요소를 위젯이라고 생각하십시오. 웹 응용 프로그램의 여러 위치에서 다시 사용할 수있는 HTML 코드입니다.
구성 요소
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
마크 업
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
구성 요소에서 외부 데이터 사용 :
매개 변수를 추가하여 구성 요소에 이름을 전달할 수 있습니다.이 매개 변수는 다음과 같이 사용됩니다.
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
마크 업
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
구성 요소에서 컨트롤러 사용
제어기를 컨트롤러에 추가하는 방법을 살펴 보겠습니다.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
마크 업
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
구성 요소에 전달 된 매개 변수는 $onInit 함수가 Angular에 의해 호출되기 바로 전에 컨트롤러 범위에서 사용할 수 있습니다. 다음 예제를 고려하십시오.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});
위의 템플릿에서 "Hello John, 나는 MacJohn입니다!"라고 렌더링합니다.
$ctrl 은 controllerAs 가 지정되지 않은 경우 각 값의 기본값입니다.
"require"를 Object로 사용하기
경우에 따라 구성 요소 내의 상위 구성 요소에서 데이터에 액세스해야하는 경우가 있습니다.
이것은 우리 구성 요소에 부모 구성 요소가 필요하다는 것을 지정함으로써 수행 할 수 있습니다. require는 필수 구성 요소 컨트롤러에 대한 참조를 제공하며, 아래 예제와 같이 컨트롤러에서 사용할 수 있습니다.
필수 컨트롤러는 $ onInit 훅 후에 만 준비가된다는 점에 유의하십시오.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet
this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}
}
});
그러나 이것이 자녀와 부모 사이의 긴밀한 연계 를 만들어 낸다는 것을 명심하십시오.
각도 JS의 구성 요소
angularJS의 구성 요소는 사용자 지정 지시문 (HTML 지시어에서 <html>이 값으로 사용자 지정 지시문 <ANYTHING>이됩니다)으로 시각화 할 수 있습니다. 구성 요소에는보기와 컨트롤러가 포함됩니다. 컨트롤러에는 사용자가 보는보기와 바인딩되는 비즈니스 로직이 포함됩니다. 이 구성 요소는 구성이 적기 때문에 각도 지시문과 다릅니다. 각도 성분은 이와 같이 정의 될 수 있습니다.
angular.module("myApp",[]).component("customer", {})
구성 요소는 각 모듈에 정의됩니다. 여기에는 두 개의 인수가 있습니다. 하나는 구성 요소의 이름이고 두 번째는 키 값 쌍이 들어있는 객체입니다.이 객체는 어떤보기와 어떤 컨트롤러를 사용할지 정의합니다.
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp"는 우리가 만들고있는 앱의 이름이고 customer는 우리 구성 요소의 이름입니다. 이제 기본 html 파일에서이를 호출하기 위해 다음과 같이 넣을 것입니다.
<customer></customer>
이제이 지시문은 사용자가 지정한 뷰와 컨트롤러에 작성한 비즈니스 논리로 대체됩니다.
참고 : 구성 요소는 지시문이 인수로 팩토리 함수를 사용하는 동안 객체를 두 번째 인수로 취하십시오.