[AngularJS] 8. AngularJS로 게시판 만들기(1)

AngularJS를 이용하여 CRUD 패턴을 익히기 위해 게시판을 만들었다.

 

https://github.com/rthfickro3/AngularJSBoard

GitHub - rthfickro3/AngularJSBoard: make board with AngularJS

 

개발환경

- Spring Boot

- AngularJS

- MyBatis

- jquery

- bootstrap

- jsp

---

먼저 프로젝트의 패키지 구조이다.

패키지 구조를 각자 역할에 따라 명확히 구분하였다.

이 구조는 추후 필요에 따라 변경할 것이며 변경할 때 마다 블로그에 기록을 남길 것이다.

 

지금 이 구조는 본인이 생각하기에 사용자가 눈으로 볼 view영역을 webapp 디렉토리에 넣었고

view에서 사용하는 AngularJS 모듈의 컴포넌트들 작업은 static/js 디렉토리에 넣어 

jsp파일과 AngularJS 스크립트를 구분하여 분리하였다.

 

이렇게 분리하면 서버와 jsp의 MVC 아키텍처 구현작업과

jsp 내의 AngularJS를 이용한 MVC 아키텍처 구현작업을 나눠 작업 할 수 있기에

유지보수가 쉽고 훨씬 작업하기 용이할 것 같았다.

 

board_main.jsp

AngularJS를 이용해 SPA 방식의 게시판을 만들건데,

이 board_main.jsp가 SPA 애플리케이션의 메인 페이지이다.

즉, 사용자가 페이지를 이동하면 이 메인 페이지 내에 있는 <div ui-view="cont"> 내의 컨텐츠들이 바뀌는 것이다.

 

AngularJS 모듈을 생성할때 설정되는 config 컴포넌트이다.

 

주소와 페이지를 연결하여 주는 URL 라우팅 정보의 각 단위를 state라고 부른다.

위와 같이 개별 state를 $stateProvider로 추가하여 준다.

ex)  #/list 주소 요청이 들어올 경우 /board/list로 서버에 요청을 하여 반환받은 view를 ui-view 영역에 출력한다.

 

18LINE - 요청한 state가 존재하지 않는 state일 경우 list state로 요청된다.

 

boardCtrl.js

그 다음은 모듈에서 사용되는 Controller 정의 부분이다.

이 컨트롤러들은 페이지에 따라 사용되는 컨트롤러이다.

 

각 컨트롤러마다 topTitle을 재정의하는데, 이 topTitle은 최상위 scope에 정의된 topTitle이다.

boardRun.js

이 컴포넌트는 앱이 실행될때 초기화 함수를 등록하는 컴포넌트이다.

이곳에 topTitle을 최상위 scope에 정의하여 하위에 컨트롤러들이 재정의할 수 있는 것이다.

 

이 구조로 인해 페이지가 변경될 때 마다 사용하는 컨트롤러가 각각 나뉘어져 있기 때문에

페이지가 호출되면 그 페이지가 사용하는 컨트롤러에서 topTitle을 재정의하여 상단의 title이 변경되는 것이다.

 

---

RESULT

LIST페이지

임시 WRITE 페이지