AngularJS Skeleton (Seed)

첨부파일 : Hans-Angular-Skeleton.zip
GitHub : Hans-Angular-Skeleton

AngularJS로 처음 프로젝트를 진행하다보면 간단하게 구조를 잡는 것도 많은 시행착오를 겪게된다. 디렉토리 구조는 어떻게 잡아야 할지?? 선언한 js파일들의 include는 어떤 방식으로 해야 할지? controller 선언, directive 정의, filter, service 등등 고민해야 할 것들이 한 두 가지가 아니다.

오늘은 AngularJS를 이용해서 처음 프로젝트를 구성하는 분들을 위해서 필자가 직접 만들었던 소스를 이용해서 사용하기 쉽게 단순화해서 프로젝트를 구성해 보았다. 이 소스를 내려 받아서 자신이 필요한 부분을 추가해 가면서 AngularJS에 대해 이해도가 좀 더 깊어지길 바래본다.

소스에는 AngularJS에서 가장 많이 작업이 필요한 부분인 Controller, Directive, Service, Filter를 쉽게 추가해 가면서 진행할 수 있도록 뼈대를 만들어 놓았다. 필요한 부분의 js파일을 만든 후에 각 폴더에 index.js 파일에 추가해서 새로 만든 파일을 추가해서 사용하면 되는 구조이므로, 간단히 추가해서 사용할 수 있을 것이다.

또한 프로젝트 소스 안에는 Controller, Directive, Service, Filter에 간단한 예제를 만들어 놓았으므로, 참고해보면 좀 더 쉽게 이해가 가능하리라 생각한다.

내려 받은 소스를 실행하는 방식은 간단히 웹서버를 구성하고, URL에 localhost:port와 소스의 index.html이 포함된 경로를 입력해서 실행하면 된다. 웹서버를 구성하는 방식은 여러 가지가 존재하므로 별도 설명은 하지 않도록 하겠다.

처음 프로젝트를 실행시키면 아래의 4개의 이미지와 같은 화면이 출력되며, 간략한 설명을 보여지는 화면에 출력해 놓았다. 대표적인 개념인 Filter, Directive, Service와 Data Binding에 대한 메뉴로 구성되어 있다. Controller은 주로 Data를 조작하는 역할을 하므로 별도 메뉴는 구성하지 않았지만 각각의 메뉴에 모두 포함되어 있다.

프로젝트 폴더 구성은 아래의 이미지와 같으며, 사용하는 lib는 여러가지가 있지만 핵심 4가지 lib가 사용되고 있음을 인지하고 있으면 되겠다. 각각의 lib에 대해서는 하나하나가 유명한 lib로 깊이있게 다루길 원한다면 AngularJS를 포함해서 스터디하길 권한다.
1. AngularJS
2. requareJS
3. jQuery
4. bootstrap
프로젝트 js폴더 하위 구성은 크게 controller, directive, filter, service로 구성해서 필요한 파일들을 관련 폴더에 만들어서 사용할 수 있게 구성했지만 만약 프로젝트가 규모가 크다면 특정 묶음 단위로 폴더를 구성해고, 그 하위에 controller, directive, filter, service등을 구성하는 것도 좋은 방법이라 생각된다. 아래 폴더의 구성은 하나의 예일뿐 개인의 입맛에 맞게 구성하면 된다.

프로젝트 각각에 대한 설명을 이곳에 다 하기에는 공간이 부족하므로, 소스에 대한 설명을 각각의 파일에 간략히 적어 놓았다. 설명이 부족한 부분이 많이 존재하지만 적어놓은 설명을 참고하고 자신이 직접 소스를 바꿔가면서 실행해보면 쉽게 소스에 대해서 이해할 수 있으리라 생각한다.