AngularJS 폴더 구조 [닫힘]

확장 가능한 대규모 AngularJS 응용 프로그램의 폴더 구조를 어떻게 레이아웃합니까?

유형별 정렬

왼쪽에는 유형별로 앱이 ​​구성되어 있습니다. 작은 응용 프로그램에는 나쁘지 않지만 여기에서도 원하는 것을 찾기가 더 어려워지는 것을 볼 수 있습니다. 특정보기와 해당 컨트롤러를 찾으려면 다른 폴더에 있습니다. 코드를 구성하는 다른 방법이 확실하지 않은 경우 여기에서 시작하는 것이 좋습니다. 기능별 구조로 오른쪽의 기술로 쉽게 전환 할 수 있습니다.

기능별 정렬 (권장)

오른쪽에는 프로젝트가 기능별로 구성되어 있습니다. 모든 레이아웃보기 및 컨트롤러는 레이아웃 폴더로 이동하고 관리 내용은 관리 폴더로 이동하며 모든 영역에서 사용되는 서비스는 서비스 폴더로 이동합니다. 여기서 아이디어는 기능을 작동시키는 코드를 찾을 때 한곳에 있다는 것입니다. 서비스는 많은 기능을 "서비스"하므로 약간 다릅니다. 관리하기가 훨씬 쉬워지면서 앱이 구체화되기 시작하면이 기능이 마음에 듭니다.

잘 작성된 블로그 게시물 : http://www.johnpapa.net/angular-growth-structure/

앱 예 : https://github.com/angular-app/angular-app

Symfony-PHP, 일부 .NET MVC, 일부 ROR 응용 프로그램을 빌드 한 후 AngularJS 생성기와 함께 Yeoman.io 를 사용하는 것이 가장 좋습니다 .

그것은 가장 대중적이고 일반적인 구조이며 가장 잘 유지됩니다.

그리고 가장 중요한 것은이 구조를 유지함으로써 클라이언트 측 코드를 분리하고 서버 측 기술 (모든 종류의 다른 폴더 구조 및 다른 서버 측 템플릿 엔진)에 대해 무관심하게 만드는 데 도움이됩니다.

그렇게하면 자신과 다른 코드를 쉽게 복제하고 재사용 할 수 있습니다.

여기 grunt build 전입니다 : (yeoman generator를 사용하십시오. 그냥 만들지 마십시오!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

그리고 grunt build 후 (concat, uglify, rev 등) :

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

나는 angularjs 구조에 대한 이 항목을 좋아 한다

그것은 angularjs 개발자 중 한 사람에 의해 작성되었으므로 좋은 통찰력을 제공해야합니다

발췌문은 다음과 같습니다.

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

프레임 워크의 구조가 아니라 응용 프로그램 기능의 구조로 폴더를 구성하는 방법도 있습니다. 이것을 angular-app 라고하는 github starter Angular / Express 애플리케이션이 있습니다 .

나는 세 번째 angularjs 앱을 사용하고 있으며 지금까지 폴더 구조가 향상되었습니다. 나는 지금 내 것을 단순하게 유지한다.

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

단일 앱에 적합하다는 것을 알았습니다. 나는 실제로 여러 프로젝트가 필요한 프로젝트를 아직 보지 못했습니다.