AngularJS 폴더 구조

AngularJS 폴더 구조

닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오.

9년 전에 문을 닫았어요

이 질문을 개선하다

크기가 크고 축척 가능한 각도(Angular)를 위한 폴더 구조를 레이아웃하려면 어떻게 해야 합니까?JS 어플리케이션?

유형별 정렬

왼쪽에는 앱이 종류별로 정리되어 있습니다.소규모 앱으로는 나쁘지 않지만, 여기서도 원하는 것을 찾는 것이 더 어려워지는 것을 알 수 있습니다.특정 보기와 해당 컨트롤러를 찾으려면 서로 다른 폴더에 있어야 합니다.오른쪽의 구조체(기능별 구조체)로 전환하기 쉽기 때문에 코드를 어떻게 정리해야 할지 모르는 경우에는 여기서 시작하는 것이 좋습니다.

기능별 정렬(권장)

오른쪽에는 프로젝트가 기능별로 정리되어 있습니다.모든 레이아웃 뷰와 컨트롤러는 레이아웃 폴더에 들어가고 관리 콘텐츠는 admin 폴더에 들어가고 모든 영역에서 사용되는 서비스는 services 폴더에 들어갑니다.여기서의 개념은 기능을 작동시키는 코드를 찾을 때 기능이 한 곳에 배치된다는 것입니다.서비스는 많은 기능을 '서비스'하기 때문에 조금 다릅니다.앱이 모양을 갖추기 시작하면 관리가 훨씬 쉬워지기 때문에 마음에 듭니다.

블로그 투고: http://www.johnpapa.net/angular-growth-structure/

어플리케이션 예: https://github.com/angular-app/angular-app

어플리케이션을 몇 개 빌드한 후 Symfony-PHP에서 몇 개, 몇 개.NET MVC, ROR, Yeoman을 사용하는 것이 가장 좋은 방법이라는 것을 알게 되었습니다.Io with the AngularJS 제너레이터

그것이 가장 인기 있고 흔한 구조이며 가장 잘 유지되고 있습니다.

또한 이 구조를 유지함으로써 클라이언트 측 코드를 분리하여 서버 측 기술(모든 종류의 폴더 구조 및 서버 측 템플릿 엔진)에 의존하지 않도록 할 수 있습니다.

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

다음은 grunt build 전입니다. (하지만 yoman 제너레이터를 사용합니다.그냥 만들지는 마세요.

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

그리고 Grunt 빌드(콘센트, uglife, 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
    └── ...

또한 프레임워크 구조가 아닌 응용프로그램 기능의 구조에 따라 폴더를 구성하는 방법도 있습니다.이를 설명하는 Github Starter Angular/Express 어플리케이션이 있습니다.

세 번째 angularjs 앱을 사용하고 있는데 폴더 구조는 매번 개선되고 있습니다.지금은 심플하게 하고 있어요.

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

싱글 앱에 적합하다고 생각합니다.저는 아직 여러 개가 필요한 프로젝트를 해본 적이 없습니다.

언급URL : https://stackoverflow.com/questions/18542353/angularjs-folder-structure