권장 스케일러블 각도JS 프로젝트 구조?

권장 스케일러블 각도JS 프로젝트 구조?

앵글을 여러 번 봤어요JS 프로젝트 템플릿: 공식 웹사이트 시드 프로젝트, Yooman's generated, Angular Fun.

다른 (비)의견 템플릿이나 스케일러블 Angular에 대해 제안하고 싶은 관련 패턴이 있습니까?JS 프로젝트?

확장성이라는 것은

• 컨트롤러, 지시, 필터 등을 자신의 파일로 분할할 수 있는 것.
• 브라우저가 모든 파일을 로드하지 않고 필요에 따라 이러한 파일을 로드할 수 있습니다.
• 공통의 크로스 프로젝트 컴포넌트(예를 들어 공통의 디렉티브, 필터, 서비스)를 가질 수 있습니다.

Pawel Kozlowski와 제가 함께 만들고 있는 데모 어플리케이션을 보실 수 있습니다.https://github.com/angular-app/angular-app

온디맨드 파일 로드는 지원되지 않지만 모듈을 별도의 파일로 분리하여 테스트를 퍼스트 클래스 컴포넌트로 설정하는 것을 볼 수 있습니다.빌드 프로세스(Grunt 사용)는 js 파일을 연결(및 출시 시 최소화)하여 유닛 및 엔드 투 엔드 테스트를 실행할 수 있습니다.

모듈을 디렉티브, 필터, 서비스 등으로 단순 분할하는 것이 아니라 기능 어플리케이션 영역과 공통 크로스 컷 라이브러리 코드로 분할하는 것을 선택했습니다.기능 영역에는 서비스, 지침, 컨트롤러 및 템플릿이 있을 수 있습니다.

따라서 모든 관련 항목이 한 곳에 있기 때문에 기능 영역에 대한 개발이 쉬워집니다.

이 프로젝트는 단순한 노드에 의존합니다.파일 전송(HTML5 모드 딥 링크 지원) 및 인증 및 권한 부여 서비스를 제공하는 JS 서버.

적어도 Angular를 수정하지 않고 당신의 모든 포인트를 쉽게 획득할 수 있다고 생각합니다.

• 컨트롤러, 지시, 필터 등을 자신의 파일로 분할할 수 있는 것.

컨트롤러/서비스에 스크립트 태그를 원하는 수만큼 포함할 수 있으므로 기본 Angular를 사용하여 이 작업을 수행할 수 있습니다.물론 확장성이 전혀 없기 때문에 최적의 옵션은 RequireJS와 같은 AMD 모듈을 사용하는 것입니다.이것은, 이러한 종류의 설정을 가지는 시드 중 하나입니다.https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

• 브라우저가 모든 파일을 로드하지 않고 필요에 따라 이러한 파일을 로드할 수 있습니다.

pkozlowski가 코멘트에서 제안했듯이, 이미 문제에 대한 설명이 있는 엔트리가 있습니다.저도 이 문제를 해결하기 위해 노력하고 있었고, 실제로 몇 가지 결과가 있었음을 알 수 있습니다.Require를 사용하여 필요에 따라 컨트롤러, 템플릿 및 지시사항을 로드하는 작업 예를 가지고 있다.루트 컨피규레이션의 JS 및 해결 파라미터.

• 공통의 크로스 프로젝트 컴포넌트(공통 디렉티브, 필터, 서비스 등)를 가질 수 있는

이전 사항을 해결하면 RequireJs 모듈을 사용하여 쉽게 얻을 수 있습니다.

---

agularjs-lazy-seed 프로젝트를 시작하는 게 좋은 생각일까요?그것에 대한 수요가 있습니까?예를 들어, 어플리케이션에 포함시키고 싶은 뷰를 포함한 views.json 파일(이상적으로는 json으로 응답하는 서비스)이 있다고 칩시다.

{
    "views" : {
        ....
        "account" : {             
             "path" : "/account" // route path
             "name" : "Account", // view name
             "partial" : "views/account/account.html", // partial file
             "controller" : "account/main" // RequireJS module
             "directives" : [ "directives/version", "directives/menu" ] // directives used in the view
        }
        ....
    }
}

이렇게 하면 다음과 같은 일이 가능합니다.

• 뷰를 분리하여 개발하고 이 json 부트스트랩을 기반으로 애플리케이션을 빌드합니다.
• 몇 가지 공통의 지시와 구성 요소를 가지고 있다
• 로그인 후 부트스트랩을 하면 사용자가 볼 수 있는 뷰를 필터링할 수 있습니다.
• ngView 내의 모든 것은 필요에 따라 로드됩니다.

물론 이 모든 추가 작업을 수행할 수 있도록 어플리케이션이 매우 커야 합니다.

ng-boiler plate를 사용해 보세요.더 큰 Angular를 위한 가장 유망한 킥스타트 템플릿JS 프로젝트: http://joshdmiller.github.io/ng-boilerplate/ #/home

지금까지 다른 사람이 말한 점에 동의합니다.다른 모듈로 분할하는 것은 매우 간단합니다.또한 모듈은 일반 Angular를 사용하여 서로 의존합니다.JS 같은 거.그런 다음 JS 코드를 원하는 파일 및 디렉토리 트리로 분할할 수 있습니다.

AngularJS를 기반으로 한 오픈 소스 hawtio 프로젝트에서 우리가 하고 있는 일을 언급하려고 합니다.모듈화는 다소 극단적으로 진행되었습니다:) hawtio는 실행 중인 서버에서 런타임에 검출할 수 있는 플러그인을 사용합니다(예: 실행 시 UI 기능의 전개 및 전개 해제).따라서 일부 REST 쿼리 또는 JMX 검출을 기반으로 플러그인을 동적으로 제거하거나 둘 다 할 수 있습니다.

예: 현재 기본 플러그인은 다음과 같습니다.

레이아웃에 관해서는 각 플러그인은 코드(js), html 부분(html) 및 기타 모든 것(css/img 디렉토리 등)을 위한 자체 디렉토리를 가지고 있으며, 이 디렉토리는 자체 html, js 및 img 폴더를 가진 camel 플러그인입니다.

그런 다음 특정 플러그인이 자체 Angular를 정의합니다.JS 모듈, 명령어, 필터 및 기타 모듈에 의존할 수 있습니다.

아직까지는 소스 파일에 도움이 되는 명명 규칙을 많이 생각해내지 못했습니다. :)컨트롤러별로 파일을 쓰는 것은 간단한 것처럼 보이지만 fooPlugin.ts 파일과 helpers.ts 파일(일반적인 모듈 고유의 도우미 기능용) 이외에는 아직 다른 의미 있는 명명 규칙은 발견되지 않았습니다.

이 프로젝트는 유망하게 들립니다.

기능별로 코드 베이스를 분할하여 코드를 재사용 가능한 상태로 유지할 수 있습니다.또한 커스텀 Grunt 태스크 덕분에 라이브 새로고침이 가능합니다.

또한 이 프로젝트는 유닛 테스트 지향으로 운영 환경에 최적화된 릴리스를 작성할 수 있는 커스텀 "원격 태스크"가 포함되어 있습니다.

경고:뻔뻔한 플러그.

발전기-angular-xl을 꼭 확인해 보세요.

특히 대규모 Angular를 만드는 것을 목표로 하고 있습니다.JS 어플리케이션에서는 코드를 논리적으로 그룹화하고 유닛 테스트를 실행하며 js와 css 파일을 index.html 등에 자동으로 삽입합니다.또한 데이터에 대한 모의 백엔드를 생성하여 완전한 응용 프로그램이 될 수 있는 프로토타입을 개발할 때 효과적으로 선택할 수 있습니다.백엔드 코드는 생성되지 않으므로 원하는 백엔드 기술을 자유롭게 선택할 수 있습니다.

언급URL : https://stackoverflow.com/questions/13522246/recommended-scalable-angularjs-project-structure