각도 있는 프로젝트 아키텍처

각도 있는 프로젝트 아키텍처

나는 앱을 각도별로 만들고 있는데, 이것은 다른 API를 사용하며 사용자가 선택할 수 있는 옵션 제공이 기록되고 서버에 다시 전송됩니다.

저는 그것을 다음과 같이 디자인했습니다.

• 메인 컨트롤러의 모든 공통 로직과 다른 컨트롤러의 모든 옵션(메인 컨트롤러의 자식)
• 기본 컨트롤러는 앱을 실행하는 데 필요한 모든 데이터를 검색합니다.다른 모든 하위 컨트롤러에 의해 소비됩니다.
• 데이터가 로드되었는지 확인하기 위해 스코프에 첨부된 약속을 사용합니다.따라서 모든 하위 컨트롤러가 로드된 데이터를 인식합니다.
• 모든 하위 컨트롤러의 데이터 업데이트 부분을 메인 컨트롤러로 이동했습니다. 모든 업데이트가 하나의 개체로 이루어지기 때문입니다.
• 차일드 컨트롤러는 차일드 컨트롤러와 메인 컨트롤러 간의 통신을 위해 방출/브로드캐스트합니다.따라서 업데이트가 발생하면 자녀가 Main에 의해 캡처된 데이터와 함께 이벤트를 내보내고 업데이트를 수행합니다.

MainController {

  $scope.loaded = DataService.get();
  $scope.userOptions = {};
  $scope.$on('update',function(){
   updateUserOptions();
  })
}

ChildController {

  $scope.loaded.then(function(){
    //all logic of child controller
  }

  $scope.onselect = function(){
    $scope.$emit('update',data);
  }
}

문의사항

1. 컨트롤러 간에 이벤트를 사용하는 것이 좋은 방법입니까?
2. 어린이 컨트롤러의 범위에 첨부된 약속을 사용하는 것이 좋은가?
3. 서비스를 사용하기 시작하면 코드가 개선됩니까?

저는 제 경험을 바탕으로 당신의 질문에 답하도록 노력하겠습니다.최근에는 단일 페이지 애플리케이션을 구축하여 아키텍처를 리팩터링하고 있습니다.

제 답변은 다음과 같습니다.

1. 컨트롤러 간에 이벤트를 사용하는 것이 좋은 방법입니까?IMHO는 모든 컨트롤러가 분리된 범위(사용하는 경우)를 가진 경우에도 정보를 공유하는 가장 유연한 방법입니다.$broadcast ★★★★★★★★★★★★★★★★★」$emit★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★이를 옵서버 설계 패턴이라고 합니다.그러나 이벤트 대신 서비스를 사용하여 서비스 간에 데이터를 공유할 수 있습니다.★★★★★★★★★★★★★★★★★★★★를 사용해 주세요.$rootScope$scope s$rootScope.
2. 어린이 컨트롤러의 범위에 첨부된 약속을 사용하는 것이 좋은가?먼저 범위 상속의 구조에 대해 알아야 합니다.JS에서 속성 그림자를 피할 수 있도록 주의해야 합니다.둘째, 나는 모든 논리를 제거 할 것이다.scope.loadedChildController(「」등)에의 대응합니다.ChildService컨트롤러가 아닌 서비스 내에서 비즈니스 로직(요청 등)을 유지함으로써 재사용이 보증됩니다.비즈니스 로직의 분리는 훌륭한 설계 원칙입니다.
3. 서비스를 이용하면 코드가 개선됩니까? 위의 질문에 답했습니다.

또한 좋은 건축물을 짓기 위해 존 파파가 쓴 앵귤러 스타일 가이드를 읽었습니다.

다음과 같은 변경을 권장합니다.

1. 데이터가 로드되었는지 확인하기 위해 스코프에 첨부된 약속을 사용합니다. 따라서 모든 하위 컨트롤러가 로드된 데이터를 알 수 있습니다.대신 다음 명령어를 사용하여 메인컨트롤러에서 커스텀 '로드' 이벤트를 내보냅니다.$scope.$emit('loaded')후 에서 ChildController를 $scope.$on('loaded', function(){})이벤트를 처리합니다.
2. updateUserOptions필요한 컨트롤러에만 서비스를 주입합니다.

도움이 됐으면 좋겠네요!

컨트롤러 간에 이벤트를 사용하는 것이 좋은 방법입니까?데이터 공유의 기본 형태는 아니지만 데이터 준비 완료와 같은 시스템 이벤트에 대해 알리는 데 사용할 수 있습니다.

자녀컨트롤러 범위에 첨부된 약속을 사용하는 것이 좋은가?스코프 상속을 사용하지 마십시오. 성가신 문제가 많이 발생합니다.

내가 서비스를 이용하기 시작하면 내 코드가 개선될까?

내가 당신이라면 이렇게 할 거야

데이터 서비스 - 이 서비스는 송수신되는 모든 데이터에 대해 책임을 집니다.데이터 요구가 있을 때마다(데이터를 요구하는 컨트롤러에 관계없이), 서비스는 데이터를 캐시합니다(약속을 저장하는 것으로 충분합니다).새로운 데이터를 필요로 한다고 명시하지 않는 한 이후의 모든 요청은 캐시된 데이터를 가져옵니다.데이터가 갱신될 때마다(첫 번째 또는 새로 고침), 서비스는 $rootScope를 통해 메인컨트롤러 및 기타 서브스크라이버가 수신할 수 있는 'dataReady' 이벤트를 브로드캐스트합니다.이 서비스는 데이터 업데이트도 담당하며 데이터가 업데이트되면 $rootScope를 통해 이벤트를 브로드캐스트할 수도 있습니다.이벤트가 활성화되면 모든 가입자가 서비스를 조회하여 필요한 데이터를 가져옵니다.

컨트롤러 - 컨트롤러를 피하고 분리된 범위의 지시사항을 사용하며 속성을 사용하여 이들 간에 데이터를 전달합니다.이렇게 하면 모든 것이 아니라 각 디렉티브가 필요한 것을 얻을 수 있습니다.지시는 속성, 서비스, 방송/방출을 사용하여 통신할 수 있으며, 부모/자매가 긴밀히 협력할 경우 이를 요구할 수 있습니다.

1. 컨트롤러 간에 이벤트를 사용하는 것이 좋은 방법입니까?

아닙니다. Angular JS 2.0에서는 사용되지 않습니다.또한 이해하기 어렵고 디버깅하기 어려운 이벤트도 종종 발생합니다.서비스를 사용하여 컨트롤러 간에 데이터를 공유합니다.(같은 서비스를 여러 컨트롤러에 주입하면 서비스가 데이터를 보관하고 컨트롤러가 해당 데이터에 바인딩되어 자동으로 동기화됩니다.) 이 사용 사례에 대해 블로그에 글을 올렸습니다.

2. 자녀컨트롤러 범위에 첨부된 약속을 사용하는 것이 좋은가?

.사용안 함$scope 쓰지 않고controllerAs의 상속과 관련된 가지 때문에 1에서도 $$scope angular Angular JS 1 。XXXX자형X자형X자형X자형X자형X자형X자형X자형X자형X자형X자형입니다.이는 사용으로 인해 범위 상속과 관련된 여러 가지 문제가 발생하기 때문입니다.

3. 서비스를 사용하기 시작하면 코드가 개선됩니까?

네! 모든 논리 및 데이터 조작에 서비스를 사용합니다.UI 상호 작용에만 컨트롤러를 사용하고 모든 것을 서비스에 위임합니다., 「」를 사용합니다.ui-router응용 프로그램 상태를 관리합니다.

저는 다른 의견도 있기 때문에 당신의 질문에 직접 대답하지 않을 것입니다.말씀하신 접근방식은 각진 어플리케이션을 구축하는 최선의 방법이 아니라고 생각합니다.

1. 메인 컨트롤러의 모든 공통 로직과 다른 컨트롤러의 모든 옵션(메인 컨트롤러의 자식)

컨트롤러에 공통 논리를 배치하는 것은 모든 각진 스타일 가이드와 반대됩니다.컨트롤러는 뷰와 관련된 논리(데이터 바인딩, 유효성 검사 등)에만 사용해야 합니다.컨트롤러 내부의 코드는 재사용할 수 없기 때문에 컨트롤러 내의 코드가 적을수록 좋습니다.서비스 로직이 많을수록 응용 프로그램의 확장성이 높아집니다.

수정: 서버에서 데이터를 가져오는 서비스를 만들고 필요에 따라 컨트롤러에 이 서비스를 삽입할 것을 권장합니다.또한 어떤 컨트롤러가 정확히 어떤 서비스를 필요로 하는지 추적할 수 있기 때문에 의존관리가 향상됩니다.

2. 네스트 한 입니다.각도가 모든 액티브스코프를 추적하여 모든 액티브스코프를 재평가하기 때문입니다.$apply()loopsyslog.syslog..syslog.

수정: #1과 마찬가지로 메인 컨트롤러 대신 서비스를 사용합니다.

3. 데이터가 로드되었는지 확인하기 위해 스코프에 첨부된 약속을 사용합니다.따라서 모든 하위 컨트롤러가 로드된 데이터를 인식합니다.

데이터 취득에 대한 약속을 사용하는 것은 좋은 방법입니다.그러나 메인 컨트롤러보다 서비스를 유지하는 것이 훨씬 더 깨끗합니다.

4. 모든 하위 컨트롤러의 데이터 업데이트 부분을 메인 컨트롤러로 이동했습니다. 모든 업데이트가 하나의 개체로 이루어지기 때문입니다.

차일드 컨트롤러는 차일드 컨트롤러와 메인 컨트롤러 간의 통신을 위해 방출/브로드캐스트합니다.따라서 업데이트가 발생하면 자녀가 Main에 의해 캡처된 데이터와 함께 이벤트를 내보내고 업데이트를 수행합니다.

수정: 서비스 사용:update이벤트 대신 기능합니다.이벤트는 디버깅 및 추적하기가 더 어렵습니다.또한 컨트롤러 파괴 시 이벤트핸들러의 등록을 취소해야 합니다.이벤트 대신 기능/약속을 사용할 수 있다면 대개 더 나은 아이디어입니다.

컨트롤러 간에 이벤트를 사용하는 것이 좋은 방법입니까?

현재 셋업의 문제는 컨트롤러의 계층에 암묵적으로 의존하고 있다는 것입니다(한쪽이 다른쪽의 자식이라는 사실).emit이벤트를 포착할 수 있는 것은 계층 상위의 스코프뿐입니다.이는 (개발자가 기억해야 하는) 암묵적인 연결일 뿐만 아니라 이 기능의 확장성도 제한합니다.

한편, 필요한 모든 컨트롤러에 공유 서비스를 주입하면 컨트롤러 간의 접속이 명시적이고 문서화되어 계층 내에서의 스코프의 위치는 독립적입니다.이를 통해 아키텍처의 유지보수가 쉬워지고 테스트도 쉬워진다는 이점이 추가됩니다.

서비스에 옵서버 패턴을 실장할 수도 있습니다.

어린이 컨트롤러의 범위에 첨부된 약속을 사용하는 것이 좋은가?

다른 답변에서 지적된 오염 범위 문제는 유효하다.이것이 스코프에 접속하는 오브젝트의 수를 제한하고 모든 변수를 스코프에 직접 접속하는 것이 아니라 스코프의 변수 번들로 오브젝트를 사용하는 것이 좋은 이유 중 하나입니다(이러한 이유에 대해서는, 「바인딩에 항상 가 있다」에 관한 설명을 참조해 주세요).

(물론 단순히 변수 수를 줄이기 위해 무작정 이 작업을 수행하는 것이 아니라 의미 있게 번들될 수 있는 변수 간의 의미적 연결을 찾으십시오.)

서비스를 사용하기 시작하면 코드가 개선됩니까?

위의 답변은 이미 이에 대한 답변의 개요를 나타낸다고 생각합니다.그렇다.다른 이점도 있지만, 이 형식은 너무 긴 답변에는 적합하지 않기 때문에, 그 외에는 일람표시를 하지 않겠습니다.

대체로 위의 포인터들은 현재 당신의 코드에 큰 문제는 아니지만, 만약 당신이 최고의 아키텍처를 찾고 있다면 당신은 더 잘 할 수 있다고 생각합니다.

답변:

1. 아니요, 곧 폐지됩니다.

2. $190은 이미 사용되지 않습니다.

3. 서비스는 훌륭한 선택입니다.서비스를 통해 컨트롤러와 같은 다른 개체 간에 데이터와 동작을 공유할 수 있습니다.

언급URL : https://stackoverflow.com/questions/31758554/angular-project-architecture