구성 요소 아키텍처 이해 : 각도 앱 리팩토링

이 자습서는 모 놀리 식 각성 응용 프로그램을보다 모듈 식 구성 요소 아키텍처로 리팩터링하는 방법을 보여줍니다. 우리는 단일 구성 요소를 더 작고 재사용 가능한 구성 요소로 분류하여 유지 관리 및 이해를 향상시킬 것입니다.

주요 개선 사항 :

강화 유지 관리 가능성 :

작은 구성 요소로 리팩토링을 쉽게 이해하고 수정하고 디버그 할 수 있도록합니다. 재사용 성 : 더 작은 구성 요소는 응용 프로그램의 다른 부분에서 재사용 할 수 있습니다. 명확한 구조 :

구조화 된 구성 요소 트리는 전체 구성과 코드의 가독성을 향상시킵니다. 스마트 대 멍청한 구성 요소 : 접근 방식은 "스마트"구성 요소 (데이터 및 로직 관리) 및 "멍청한"구성 요소 (처리)를 사용하여 깨끗한 문제의 분리를 촉진합니다.

효율적인 통신 : 구성 요소는 맞춤 이벤트 및 속성 바인딩을 사용하여 효과적으로 통신하여 단단한 커플 링을 피합니다. 확장 성 : 제공 업체를 로 옮기는 것은 응용 프로그램 전체 서비스 가용성을 보장하고 미래의 성장 및 게으른 적재를 지원합니다. 테스트 가능성 :
• 모듈 식 설계는 단위 테스트를 단순화합니다 파트 1의 요약 :
Part 1은 각도 CLI를 사용하여 TODO 응용 프로그램을 설정하고 A
• 클래스, A 서비스를 작성하고 UI에 를 사용합니다. 응용 프로그램의 아키텍처는 단일, 큰
• 파트 2에서 리팩토링 :
이 부분은 를 생성하여 : : 새로운 Todos 생성을 처리합니다 : Todos 목록을 표시합니다 : 단일 TODO 항목을 표시합니다 : 나머지 토도의 수를 보여줍니다
• 학습 목표 :
각도 구성 요소 아키텍처 이해 속성 바인딩을 사용하여 데이터를 구성 요소로 전달합니다 구성 요소가 방출하는 이벤트를 처리하기 위해 이벤트 리스너를 사용합니다 더 작고 재사용 가능한 구성 요소의 이점 스마트와 멍청한 구성 요소의 차이
• 시작하기 :
  최신 각도 CLI를 설치하십시오 :
  1. (또는 이전 버전을 제거하려면 npm install -g @angular/cli@latest를 사용하십시오). 리포지토리를 복제하십시오 : npm uninstall -g @angular/cli angular-cli; npm cache clean; npm install -g @angular/cli@latest 의 종속성 설치 : 체크 아웃 파트 1 :
  2. <:> 앱을 실행하십시오 : git clone git@github.com:sitepoint-editors/angular-todo-app.git
  3. 원래의 appcomponent : cd angular-todo-app; npm install 원본 에는 모든 응용 프로그램의 논리와 UI가 단일 구성 요소에 포함되어 있으며, 이는 유지 관리에 이상적이지 않습니다.
  4. 새로운 구성 요소 만들기 : git checkout part-1
  튜토리얼에는 각도 CLI ()를 사용하여 각각의 새로운 구성 요소의 생성, 관련 HTML 및 로직을
  에서 새로운 구성 요소로 이동시킵니다. 데이터 바인딩 및 이벤트 처리를위한 ng serve 및
  데코레이터의 사용을 강조하여 새로운 구성 요소를 "멍청하고"재사용 할 수 있습니다.
  이동

  :

  제공자는

  에서 AppComponent로 이동하여 응용 프로그램 전체의 접근성을 보장합니다. 요약 :

  이 부분은 응용 프로그램을 성공적으로 리팩터링하여 각도 구성 요소 아키텍처에서 모범 사례를 보여줍니다. 다음 부분은 REST API를 통합합니다. 모든 코드는 Github에서 사용할 수 있습니다. 이 기사에는 각도 구성 요소 아키텍처의 주요 개념을 다루는 FAQ 섹션도 포함되어 있습니다.

위 내용은 구성 요소 아키텍처 이해 : 각도 앱 리팩토링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!