AngularJS 지시어 대 서비스 대 컨트롤러

회사 내부 웹 사이트에서 변경 요청 구현을 시작하려고합니다.이 요청을 통해 여러 필드를 확인하고 특정 지침과 일치하면 강조 표시합니다. 예를 들어, 생년월일이 오늘 인 경우 해당 필드에 대한 개요가 표시되고 툴팁에 "생일 축하 해요!"라고 표시됩니다.

스펙은 나머지 페이지 렌더링이 완료된 후에로드하도록 요청하므로로드 시간을 늘리지 않습니다. angularJS를 처음 사용하기 때문에 이것이 제대로 수행되어야하는 '적절한'방법을 확신하지 못합니다.

이슈 :

여기에는 테두리 및 이미지 추가 및 제목 속성 (DOM 조작)이 포함되므로 지시문을 사용해야하는 것 같습니다.

그러나 이것은 대부분의 지시문처럼 재사용하거나 짧지 않습니다.

확인 해야하는 데이터의 절반이 페이지로드시 원래 호출로 반환되므로 다시 저장하고 다른 호출을 낭비하지 않기 위해 서비스가 모든 데이터를 저장하는 데 좋을 것이라고 생각합니다.

컨트롤러 에서이 작업을 수행하는 방법을 알고 있지만 나쁜 나쁜 코드입니다 .P

이 작업을 수행하는 가장 좋은 방법에 대한 아이디어가 있습니까? 기본적으로 모든 데이터를 확인하려면 http 호출이 필요합니다. 이는 각 유형의 'Call Out'에 대해 bool 값을 가진 객체를 반환합니다. 그런 다음이 목록을 살펴보고 값이 true이면 테두리, 이미지 및 툴팁 텍스트를 추가하십시오.

이 질문이 충분히 명확한 지 잘 모르겠으므로 세부 정보를 추가하려면 문의하십시오. 감사합니다!

당신이 옳습니다, 많은 옵션이 있습니다.

컨트롤러는 새로운 각도로 무언가를 쓰기 시작하기에 좋은 곳입니다. 컨트롤러를 마크 업에 연결하면 angular의 기존 서비스와 함께 angular의 기존 지시문 라이브러리를 사용할 수 있습니다.

이것과 함께 사는 동안 아주 짧은 후에 컨트롤러가 너무 커졌습니다. 이제 리팩토링 할 시간입니다. 여기에 따르는 일반적인 지침이 있습니다.

• 컨트롤러 : 컨트롤러는 $ scope에 연결된 값 / 기능을 연결하고 관리합니다. 궁극적으로 $ scope는 프레젠테이션을 많이하는 경향이 있습니다 . IE는 뷰 모델입니다.
• 서비스 : 서비스는 인프라, 백엔드 또는 기타 브라우저 기능과 연계되는 경향이 있습니다.
• 지시문 : 지시문을 사용하면 기존 핸들러에서 처리하지 않는 DOM 이벤트 / 기능과 통합 할 수 있습니다.

따라서 다음 세 방향 중 하나로 코드를 푸시하려고합니다.

1. 내 컨트롤러의 코드는 실제로 논리적으로 또 다른 프리젠 테이션 데이터 / 논리이며 다른 컨트롤러 로 분리되어야합니다 . $ scope에서 항목으로 작업 할 때 각 컨트롤러가 담당하는 부분을 $ scope의 자체 개체로 분리하는 것이 가장 좋습니다. 예를 들어 한 컨트롤러의 경우 $ scope.creditCard. [blah] 대 다른 컨트롤러의 경우 $ scope.billingAddress. [blah]입니다. 이것은 $ scope에서 앵귤러의 프로토 타입 상속 사용과 관련된 문제를 방지하는 데 도움이됩니다.

2. 내 컨트롤러의 코드는 응용 프로그램 인프라 또는 유틸리티 코드로, 앱을 통해 공유해야 할 수도 있고 서비스

3. 내 컨트롤러의 코드는 프리젠 테이션 / DOM 구성에 크게 관심이 있으므로 자체 지시문으로 분리해야합니다.

1의 예는 나머지 지불 양식과 별도로 신용 카드 입력 / 확인을 처리하는 것입니다. 사용자가 주소를 입력 할 수 있도록하는 로직과는 별개의 컨트롤러에 많은 신용 카드 로직이 있으므로 논리적으로 별도의 컨트롤러가됩니다.

2의 예는 신용 카드 백엔드 서비스와 통신하는 부분을 이동하여 지불을 승인 / 거부하는 것입니다. 또는 다른 예는 백엔드와 통신하여 사용자 작성 API를 처리하는 모듈 일 수 있습니다.

3의 예는 신용 카드에 4 개의 숫자를 입력 한 후 4 개의 편집 상자간에 커서를 이동시키는 일종의 자동 탭 기능을 작성하는 것입니다.

이에 따라 앱을 분할하십시오.