angularJS 컨트롤러, 디렉티브, 서비스의 용도
April 10, 2014
angularJS seed 프로젝트를 풀어보면 js 폴더에는 컨트롤러, 디렉티브, 서비스로 나누어져 있다는 것을 알 수 있다. 백본을 사용할 때도 그랬지만 사실 각각의 역할을 잘 정의해두지 않으면 컨트롤러에서 모델 처리하고, 뷰 처리하고 엉망이 되는 것을 경험했기에 angularJS는 나름대로 코딩 규칙을 좀 세워보고자 한다.
Controller
angularJS에서 컨트롤러는 app.js의 route에서 호출된다. 따라서 ng-view를 기준으로 컨트롤러를 만들면 되겠다. 이 안에 들어가는 요소에 대해서는 디렉티브를 적용하여 재사용성을 높인다.
Directive
이놈이 참 어려운 놈이다. 이놈은 컴포넌트를 구성할 수도, 이벤트에 대한 함수를 작성할 수도, 컨트롤러를 포함할 수도 있다. 대략 다음과 같은 것들이 얘기되는데 사실 잘 정리가 안된다. 하지만 대략 컨트롤러의 조각이 되는 부분들은 Directive를 이용하면 좋을 것 같다.
- restrict : E는
</directive>, A는 <div directive></div> 식이다. E는 뷰에 대한 걸로, A는 기능에 대한 것으로 사용하면 좋을 것 같다. 형태로 쓰기도 하니까 말이다. - require : 다른 Directive에 영향을 받을 때 필요
- controller : 특정 함수를 정의해 둘 수도 있다. 그러니까 뷰 컴포넌트에 특정 함수를 정의해두고, A 컴포넌트는 require로 E를 포함한 후에 기능 호출 식이 되지 않을까?
- link : 디렉티브 자체에서 처리하는 함수.
- scope : 아직 잘 모르겠다.
- template : 템플릿을 만들 수 있다. 대략 E에 해당하는 듯. 자매품 templateUrl 도 있다.
Service
사실 컨트롤러와 가장 헷갈리는 놈이다. 아직 한번도 작성해본 적 없다. 대략 모델을 처리하는 놈 같은데 컨트롤러에서도 충분히 가능하기 때문에 어떤 것에 특화해서 사용하면 좋을 지 모르겠다.
작업하면서 참고할 자료들