재사용이 가능한 각도 구성 요소 생성
각도에 대한 각도 앱 준비
오늘 새로운 응용 프로그램을 구축하려고하는 경우에 의심의 여지가 당신은 타이프 스크립트(각도 2+)에 내장 된 각도로 시작할 수 있습니다. 그러나 수천 개의 각도(각도 1.아직 생산중인 앱은 아직 아무데도 가지 않습니다. 사실,앵굴라즈는 여전히 팀의 지속적인 개발과 지원을 받고 있습니다.
**업데이트**
각도는 현재 버전 6 에 있으며 대규모 프로덕션 앱에 적합합니다. 오늘 새로운 응용 프로그램을 구축하는 경우,각도 6+로 봐 주시기 바랍니다.
각도
로 재사용이 가능한 구성 요소를 만드는 새로운 가이드를 확인하십시오. 각도에 앱을 만들 수 있는 몇 가지 이유가 있습니다. 앱을 마이그레이션하는 것이 중요하다면 앱을 구성 요소화하는 것이 마이그레이션의 필수 조건입니다.
1.5 이후의 새로운 기능.주로 구성 요소 및 단방향 데이터 바인딩을 지원합니다. 이러한 기능을 최대화하여새로운 각도 프레임 워크에 더 가까운 각도 응용 프로그램에 대해 재사용이 가능한 구성 요소를 만드는 방법을 살펴볼 것입니다.
구성 요소 조직
이 구성 요소에서 길을 잃기 쉽습니다. 이해해야 할 가장 중요한 부분 중 하나는 어떤 구성 요소가 무엇에 대한 책임을 져야하는지입니다.
페이지 수준 구성 요소를 뷰의 원동력으로 유지하면서 재사용 가능 또는”벙어리”구성 요소를 사용하여 일반적인 작업을 처리합니다.
이렇게하면 모든 루틴 코드와 기능을 재사용 가능한 청크로 캡슐화하면서 페이지 특정 논리를 단일 구성 요소에 유지합니다.
내가 본 가장 큰 실수 중 하나는 데이터를 변경하거나 매우 구체적인 사용 사례를 가정하거나 모든 곳에서 서비스를 통해 통신하는 하위 구성 요소에 데이터를 전달하는 것입니다. 이것은 결국 그들이 하드 이해/테스트 및 하드 특정 사용 사례에 코딩 될 때 전혀 재사용 할 수 없습니다 수 있습니다.
첫 번째”안녕하세요 세계”구성 요소
가능한 가장 간단한 구성 요소는 다음과 같습니다. 이 지시문이 얼마나 유사한 지 확인하십시오.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
개발자가 지시문을 계속 사용할 수 있다는 점은 주목할 가치가 있습니다. 구성 요소 위에 템플릿 지시문을 사용하려는 경우는 드뭅니다. 아마도 일부 컴파일 또는 링크 단계에 의존한다면…. 그러나 지시문은 구성 요소에 다른 기능을 추가하는 속성으로 사용해야합니다…
의심스러운 경우 구성 요소 모델을 선호합니다. 앱을 구성 요소 트리로 구성하려는 경우 구성 요소 대 지시문에 대한 자세한 내용은 각도문서를 참조하십시오. 지시문은 구성 요소를 향상시키는 데 사용되는 템플릿이 없는 구성 요소를 생각해야 합니다.
바인딩 옵션
구성 요소 매개 변수는bindings속성을 통해 전달됩니다. 지시문 범위 변수를 할당하는 이전 방법과 유사합니다.
angular.module('myApp')
.component('myComponent', {
template:'<h1>$ctrl.name</h1>',
bindings:{
name: '<' //one way data binding
},
controller: function(){
//component controller }})* < - One way data bindingUtilize one-way data binding for your bindings. Two way data bindings were great and one of the neatest feature of AngularJS, but it comes at a performance cost with the bound properties being watched within the component scope. This also means anything you change in component scope would be reflected in the parent in a two-way binding.!Important! - Its important to note that objects are passed by reference instead of a new copy. This means if your bound property is an object or array, changes to these objects would indeed reflect changes in the parent scope and still give you a two way data binding result. This is why its important to not mutate the object/array in the component scope and make those changes in the parent.* = - Two way data bindingNo worries if you need it though. Two way data binding is still around. #yolo* & - Output event. Provides a hook to parent componentsBindings marked with '&' signify a parameter that accepts a callback function from the parent component. This allows the parent to listen or catch any changes/messages. This is how our "dumb" component will talk back to the parent component with the change or event.* @ - String input
구성 요소 통신
메신저 앱을 만들고 있다고 가정합니다. 기본 보기는 다시 사용할 수 있는 연락처 목록 구성 요소가 있는 페이지 수준 구성 요소입니다. 우리는 우리의 응용 프로그램의 다른 영역에서 연락처 목록 구성 요소를 사용하려는,그래서 가능한 한 재사용이 가능하게하는 것이 중요합니다.
연락처 목록 구성 요소에는 단일 용도가 있습니다. 서버에서 사용 가능한 연락처 목록을 렌더링하고 선택한 항목을 출력합니다.
메신저 구성 요소는 연락처 목록 구성 요소에서 선택한 항목을 수락하고 받는 사람 목록에 추가해야 합니다.
