AngularJS, Directory Structure

어플리케이션의 규모가 커지다보면 파일관리가 복잡해지며

 

이러한 경우는 곧 디버깅의 어려움으로 직결되어지기 마련입니다

 

코드는 간결하고 의존을 줄여 독립성을 높이고 재사용성을 높일 수록 효과적입니다.

 

한 가지 기능만을 넣는 것을 추천하는데요

 

Angular는 이러한 모듈별로 디렉토리를 구성하는 것을 좋아합니다.

app/
  phone-list/
    phone-list.module.js
    phone-list.component.js
    phone-list.component.spec.js
  app.module.js

다음과 같이 phone-list 라는 모듈을 만들기 위해

 

해당 디렉토리를 만들고 그 안에 모듈과 관련된

• 모듈 파일
• 컴포넌트 파일
• 테스트 파일 등을 넣는 것을 확인할 수 있습니다

angular.module('phonecatApp', [
  // ...which depends on the `phoneList` module
  'phoneList'
]);

또한 다음과 같이 만들어진 모듈을 루트 모듈에다가 추가해줌으로서

 

모듈을 효율적으로 관리할 수 있습니다.

 

또한 index.html에 script파일로 지루할 수 있지만 명시적으로 넣어줘야합니다.

 

또한 복잡하고 긴 컴포넌트 안에 있는 template 또한 따로 html 파일로 분리하여

 

다음과 같이 외부로 빼내어 관리할 수 있습니다.

angular.
module('phoneList').
component('phoneList', {
  // Note: The URL is relative to our `index.html` file
  templateUrl: 'phone-list/phone-list.template.html',
  controller: ...
});

app/
  phone-list/
    phone-list.component.js
    phone-list.component.spec.js
    phone-list.module.js
    phone-list.template.html
  app.css
  app.module.js
  index.html

💡 어 그런데 html 파일이면 http get요청이 많아지는 것 아닌가요?

 

get요청이 많아지면 그 만큼 비용이 더 드는 것 아닌가요?

 

filename.template.html 과 같이 suffix를 추가해 줌으로

 

$templateRequest, $templateCache를 사용합니다.

 

get을 요청하는 것이 아니라 put을 통해 추가적인 템플릿의 html정보를 받아옴으로서

 

사용자에게 많은 양의 데이터를 한 번에 요청하여 오랜시간 걸리는 좋지 못한 경험이

 

아니라 부분적으로 요청하고 응답받는 과정을 통해 컴포넌트를 독립적으로 경험할 수 있도록 돕습니다.