큰 각도JS 응용 프로그램 설계

큰 각도JS 응용 프로그램 설계

Angular 디자인에 대한 조언이 필요합니다.여러 개의 복잡한 모듈을 갖춘 JS 어플리케이션 및 사용자 역할에 따라 인증 및 인가 후 모듈이 로드됩니다.1개의 단순한 모듈에 액세스 할 수 있는 사용자도 있고 대시보드에 액세스 할 수 있는 사용자도 있고 2개 이상의 모듈에 액세스 할 수 있습니다.

여러 모듈에서 재사용할 수 있는 많은 지침이 있습니다.설계 단계에서는, 이하의 몇개의 항목에 대한 회답이 있습니다만, 아직 전문가의 어드바이스가 필요합니다.

• 모듈에는
  • 부분
  • 컨트롤러
  • 지시.
  • 서비스
• 예외 처리(HTTP 상태 코드 또는 비즈니스 오류)
• 로깅(회선번호 포함, 기능 시작)
• 로그에 기록된 정보를 서버에 저장해야 할 수도 있습니다.
• 로깅을 켜거나 끌 수 있어야 합니다.
• 팩토리 클래스를 통한 커스텀 위젯(다른 모듈에서 재사용)
• 공유 지침(분리된 범위)
• 공유 모듈
• 공유 유틸리티(정렬, 필터링 등)
• 마스터 데이터에 따른 열거자
• 싱글톤을 통한 상수
• 인증(CSRF)
• 오프라인 저장소
• REST 서비스
• 한 모듈에서 디스패치하여 다른 모듈에서 처리하기 위한 이벤트 처리

응용 프로그램의 UI는 사용자의 역할에 따라 왼쪽 상단에 드롭다운 탐색이 있는 고정 메뉴 모음과 여러 링크가 있는 것처럼 보입니다.사용자가 링크를 클릭하면 해당 모듈이 페이지에 로드됩니다.실행 시 수동으로 부트스트랩하여 다른 모듈을 로드하는 빈 프로젝트가 있어야 합니다.

이 접근방식은 다음과 같은 폴더 구조를 갖는 것입니다.

• ②.
  • 자산
    • css
    • lib js
    • 이미지들
  • 공통 성분
    • 지시.
    • 유틸리티
    • 인증
    • $resource 호출을 보류하는 서비스 프록시
    • 에넘
    • 상수
  • 모델
    • 엔티티 json(고객, 제품 등)
  • A
    • 부분
    • 지시 사항
    • 서비스
    • 컨트롤러
  • 비즈니스 모듈 B
  • 비즈니스 모듈 C
  • index.displaces를 표시합니다.
  • Requirejs 구성 파일

그래서 질문하겠습니다.

• 모듈 내의 서비스가 다른 모듈과 통신하려면 어떻게 해야 합니까?
• 모듈을 독립적으로 개발 및 실행해야 합니까?
• 데이터 전송을 통해 모듈 간 통신을 어떻게 처리할 수 있습니까?
• 위의 모든 요소, 특히 예외 처리, 로깅을 통합하는 방법은 무엇입니까?
• 개발자는 우리가 정의한 규약을 이해해야 합니다.
• 모듈 간에 로깅 및 정보 전송을 위해 호출하는 방법은 무엇입니까?

워크플로우에 yoman을 포함시켜 프로젝트에 제너레이터를 사용하는 것이 좋습니다.이것에 의해, 특히 팀워크를 하고 있는 경우는, 앱의 구조가 훨씬 쉬워집니다.

올해 초 Angular의 사람들이 당신의 앱 구조에 대한 베스트 프랙티스를 담은 문서를 공개했는데, 그것을 읽어보시길 권합니다.cg-angular라는 이름의 베스트 프랙티스를 기반으로 한 제너레이터가 있다고 합니다.

cg-angular 사이트에서 인용하겠습니다.

모든 하위 생성기는 사용자에게 새 파일을 저장할 위치를 지정하라는 메시지를 표시합니다.따라서 중첩을 포함하여 원하는 디렉토리 구조를 작성할 수 있습니다.생성기는 프로젝트의 루트에 index.html, app.js 및 app.less를 포함한 소수의 파일을 만듭니다.프로젝트의 나머지 구성 방법을 결정합니다.

질문 내용:

• 모듈 내의 서비스가 다른 모듈과 통신하려면 어떻게 해야 합니까?

지침/서비스/다른 모듈에서 재사용할 폴더를 생성할 수 있습니다.

• 모듈을 독립적으로 개발 및 실행해야 합니까?

하나의 앱에 여러 개의 모듈을 포함할 수 있습니다(필요에 따라 필요한 js를 사용하여 로드할 수 있지만 이는 주제에서 벗어납니다).

• 데이터 전송을 통해 모듈 간 통신을 어떻게 처리할 수 있습니까?

서비스를 사용하여 서로 다른 모듈 내의 컨트롤러 간에 정보 전달

• 위의 모든 요소, 특히 예외 처리, 로깅을 통합하려면 어떻게 해야 합니까?

모든 모듈에 대해 범용 오류 핸들러와 범용 http 대행 수신기를 실행할 수 있습니다.

• 개발자는 우리가 정의한 규약을 이해해야 합니다.

발전기를 사용하고, 그들이 의견을 제시하며, 당신이 팀에 필요한 순서와 규약을 알려준다.

좋은 질문들이 많이 있습니다.첫 번째는 코드 구조에 관한 질문이고 두 번째는 메트릭(로그 등)에 관한 질문입니다.

모듈 내의 서비스가 다른 모듈과 통신하려면 어떻게 해야 합니까?

모듈에는 디렉티브를 사용하는 것이 이상적입니다. 컨트롤러 할 수 .require소유물.디렉티브와 컨트롤러 간의 데이터 공유에 관한 페이지입니다.

모듈을 독립적으로 개발 및 실행해야 합니까?

유닛 테스트를 생각하시는 것 같은데요.네, 테스트를 쉽게 할 수 있도록 모듈의 범위를 최대한 좁혀야 합니다.

데이터 전송을 통해 모듈 간 통신을 어떻게 처리할 수 있습니까?

여기가 바로 그 장소입니다services일반적으로 사용됩니다.의 : 비스 、 장장 、 장장 angular angular angular angular angularJS에서 동일한 의미를 가지며, 단지 약간 다른 방식으로 선언될 뿐입니다.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

위의 모든 요소, 특히 예외 처리, 로깅을 통합하려면 어떻게 해야 합니까?

로깅은 별개의 문제입니다. 의 은 할 수 입니다.JS는 프레임워크의 기존 부분을 매우 쉽게 보강하여 적합한 기능 또는 동작을 추가할 수 있습니다., 이렇게 해요.decorators다음은 사용자가 관심을 가질 수 있는 사용 사례에 대해 설명하는 예외 로깅의 예입니다.

개발자는 우리가 정의한 규약을 이해해야 합니다.

이에 대한 답은 항상 같습니다. 즉, 커뮤니케이션은 그들이 아는 방법입니다.개발자들은 컨벤션을 사회화해야 합니다.그렇지 않으면 당신은 절대 매수할 수 없습니다.

모듈 간에 정보를 전송하고 로깅을 호출하는 방법은 무엇입니까?

상기의 회답.

큰 각도에서의 코드 구성JS 및 JavaScript 응용 프로그램

많은 개발자들이 크기가 커지면 응용 프로그램의 코드 베이스를 구성하는 방법을 고민하고 있습니다.최근에 앵귤러에서 본 적이 있는데JS 및 JavaScript 애플리케이션이지만 과거에는 많은 Java 및 Flex 애플리케이션을 포함한 모든 기술에 문제가 있었습니다.

유형별로 정리하는 강박관념이 대세다.그것은 사람들이 옷을 정리하는 방식과 놀랄 만큼 유사하다.

바닥의 말뚝

Angular의 공식 시작점인 Angular-seed를 살펴보겠습니다.JS 앱「app」디렉토리에는, 다음의 구조가 있습니다.

css/img/ js/app.js controllers.js directives.js filters.js services.js lib/partials/ JavaScript 디렉토리에는 쓰는 오브젝트 유형별로 1개의 파일이 있습니다.이것은 옷을 바닥에 여러 무더기로 정리하는 것과 같다.양말, 속옷, 셔츠, 바지 등이 쌓여 있습니다.검은 양말이 구석에 있는 저 더미 속에 있다는 거 알겠지만 그걸 파내려면 시간이 좀 걸릴 거야.

엉망진창이다.사람들은 이렇게 살면 안 되고 개발자들은 이렇게 코드화해서는 안 된다.컨트롤러나 서비스를 6개 정도 초과하면 이러한 파일은 다루기 어려워집니다.필요한 오브젝트를 찾기 어렵거나 소스 컨트롤의 파일 변경 세트가 불투명해지는 등입니다.

양말 서랍

JavaScript를 정리할 때 다음 논리 경로에서는 일부 원형에 대한 디렉토리를 만들고 개체를 자신의 파일로 분할합니다.이 옷의 은유를 이어가기 위해 우리는 멋진 모하오니 드레서에 투자하여 양말을 한 서랍에 넣고 속옷을 다른 서랍에 넣고 바지와 셔츠를 깔끔하게 접을 계획입니다.

로그인 플로우, 제품 카탈로그 및 쇼핑 카트 UI를 사용하여 간단한 전자 상거래 사이트를 구축하고 있다고 가정해 보겠습니다.또한 모델(비즈니스 로직 및 상태)과 서비스(HTTP/JSON 엔드포인트 프록시)를 Angular의 단일 "서비스" 원형으로 묶지 않고 새로운 원형도 정의했습니다.이제 JavaScript 디렉토리는 다음과 같습니다.

controllers/LoginController.js RegistrationController.js ProductDetailController.js SearchResultsController.js directives.js filters.js filters.js 모델/CartModel.js ProductModel.js 서비스 사용자 js 서비스 사용자 js.파일 트리를 참조하거나 IDE 숏컷을 사용하여 오브젝트를 쉽게 찾을 수 있게 되었습니다.소스 컨트롤의 변경 세트에는 변경된 내용이 명확하게 표시됩니다.이것은 큰 개선이지만 여전히 몇 가지 제약이 있습니다.

당신이 사무실에 있다고 상상해 보세요. 그리고 내일 아침 출장을 위해 드라이클리닝된 옷 몇 벌이 필요하다는 것을 깨달으세요.당신은 집에 전화를 걸어 당신의 소중한 사람에게 당신의 검은 숯과 파란색 줄무늬 정장을 세탁소에 가져다 달라고 부탁한다.그리고 검은색 페이즐리 넥타이가 달린 회색 셔츠와 단색의 노란색 넥타이가 있는 흰색 셔츠를 잊지 마세요.당신의 소중한 상대방이 당신의 옷장과 옷장에 대해 전혀 익숙하지 않다고 상상해 보세요.그들이 당신의 넥타이 서랍을 뒤질 때 노란색 넥타이가 세 개 보인다.어떤 걸 고를까요?

옷을 옷별로 정리하면 좋지 않을까요?실제 세계에서는 비용이나 공간과 같은 실질적인 제약이 있지만, 이와 비슷한 것을 코드로 무료로 할 수 있습니다.

모듈러성

진부한 비유는 지루하지 않길 바라지만, 여기 요약이 있다.

당신의 중요한 다른 한 명은 팀의 새로운 개발자로, 앱의 많은 화면 중 하나의 버그를 수정하라는 요청을 받았습니다.개발자는 디렉토리 구조를 살펴보고 모든 컨트롤러, 모델 및 서비스가 깔끔하게 정리되어 있는 것을 확인합니다.안타깝게도 어떤 객체가 서로 관련이 있는지 또는 서로 종속되어 있는지에 대해서는 아무 것도 알 수 없습니다.개발자가 코드의 일부를 재사용하고 싶은 경우는, 다른 폴더로부터 파일을 수집해, 다른 폴더로부터 코드를 잊어버릴 필요가 있습니다.믿거나 말거나, 당신이 만들고 있는 새로운 보고서 앱에서 전자상거래 앱의 모든 컨트롤러를 재사용할 필요는 거의 없다.다만, 인증 로직의 일부를 재이용할 필요가 있는 경우가 있습니다.그게 다 한 곳에 있었으면 좋겠죠?기능 영역에 따라 앱을 재구성해 보겠습니다.

Cart/CartModel.js CartService.js common/directives.js filters.js productResultsController.js SearchResultsModel.js ProductDetailController.js ProductModel.jsProductService.js 사용자/로그인컨트롤러 등록.j.응용 프로그램의 기능을 파악합니다.동일한 폴더의 개체는 관계가 있으며 일부는 다른 개체와 종속됩니다.로그인 및 등록 프로세스의 구조를 이해하는 것은 폴더 내의 파일을 참조하는 것만큼이나 간단합니다.복사/붙여넣기를 통한 초기 재사용은 적어도 폴더를 다른 프로젝트에 복사하여 수행할 수 있습니다.

각도 포함JS는 한 걸음 더 나아가 다음과 같은 관련 코드의 모듈을 만들 수 있습니다.

2345 6 7 8 angular. []), { UserService }), 1 3 4 6 7 81011 13 var = 。모듈('userModule', []), userModule.factory('userService', [$devail', functions]) {새로운 UserService($http),},
userModule.factory('userModel', 'userService', function(userService) {return new UserModel(userService); })) ;
userModule.controller('loginController', ['$controller', 'userModel', 'LoginController]), userModule.controller('registrationController', [$controller', 'userModel', 등록컨트롤러', ❤에서 호스팅하는 원시 사용자 모듈.또한 이 위치는 Require에 대한 로더 지시사항을 추가하는 데 적합합니다.JS 또는 Browserify.

공통 코드의 힌트

모든 응용 프로그램에는 많은 모듈에서 사용되는 공통 코드가 있습니다."common" 또는 "shared" 또는 원하는 폴더일 수 있는 공간이 필요합니다.매우 큰 어플리케이션에서는 기능과 크로스 컷에 관한 문제가 중복되는 경향이 있습니다.이것은, 다음의 몇개의 방법으로 관리할 수 있습니다.

모듈 객체가 여러 "공통" 객체에 직접 액세스해야 하는 경우 하나 이상의 패케이드를 작성합니다.이렇게 하면 공동작업자가 너무 많으면 일반적으로 코드 냄새가 나므로 각 개체의 공동작업자 수를 줄일 수 있습니다.'공통' 모듈이 커지면 해당 모듈을 특정 기능 영역 또는 문제를 해결하는 하위 모듈로 세분화합니다.응용 프로그램모듈은 필요한 '공통' 모듈만 사용해야 합니다.이는 SOLID의 '인터페이스 분리 원칙'의 변형입니다.$rootScope에 유틸리티 메서드를 추가하여 하위 범위에서 사용할 수 있도록 합니다.이것에 의해, 애플리케이션의 모든 컨트롤러에 같은 의존 관계(「Permissions Model」등)를 배선할 필요가 없어집니다.글로벌 스코프가 복잡해져 의존관계가 명확하지 않게 되는 것을 피하기 위해서, 이 조작은 신중하게 실시할 필요가 있습니다.이벤트를 사용하여 서로에 대한 명시적 참조가 필요하지 않은 두 구성 요소를 분리합니다.각진JS는 Scope 객체의 $emit, $broadcast 및 $on 메서드를 통해 이를 가능하게 합니다.컨트롤러는 이벤트를 기동하여 액션을 실행하고 액션이 완료되었음을 통지받을 수 있습니다.자산 및 테스트에 대한 빠른 메모

HTML, CSS, 이미지 정리에는 유연성이 있다고 생각합니다.모듈의 "자산" 서브폴더에 배치하면 모듈의 자산 의존성을 캡슐화하는 것과 지나치게 복잡하지 않은 것 사이에서 최적의 균형을 이룰 수 있습니다.다만, 앱의 패키지 구조를 반영한 폴더 구조를 포함한 이 컨텐츠에 대해서는, 다른 톱 레벨의 폴더도 적당하다고 생각합니다.시험에도 효과가 있는 것 같아요.

아래 링크를 봐주세요.

https://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/

언급URL : https://stackoverflow.com/questions/25874809/large-angularjs-application-design