안녕하세요 슬릭데브 입니다 ^^
요즘 밖에 나가기 좋은 날씨입니다. 미세먼지만 빼고...
오늘은 모듈에 대해서 배워보려고 합니다.
그리고 코드 분할방법을 배워야죠. 코드를 분할을 하면 정리도 되고 유지 및 보수를 할 수 있습니다.
특히 다른 사람한테 코드를 넘겨줄때 그 코드를 받은 분이 좋아하실거에요.
Module (모듈)
- service, controller, application 파일들을 분리하고 파일 이름을 module.js 라고 만듭니다.
- 예를 들면, application module (애플리케이션 모듈) 은 애플리케이션 컨트롤러를 초기 설정해줍니다.
- Controller module (컨트롤러 모듈)은 controller (컨트롤러) 를 정의합니다.
- mainApp.js
- var mainApp = angular.module("mainApp",[]);
- menuController.js
아래 그림과 같이 메인 html 파일에서 컨트롤러 파일의 경로를 지정해줍니다.
자 그럼 코드를 분리해서 간단한 웹앱을 만들어 봅시다.
오늘은 식당 검색 앱을 아래와 같이 만들어 볼께요. 데이터 베이스는 다음에 연결 해봅시다.
일단 테이블안에 테이블이 있습니다.
식당이름은 유저가 넣을수 있도록 되어있습니다.
전화번호가 있는데 이건 function을 써서 return 값으로 받아오면 될거 같습니다.
메뉴판안에 있는 테이블은 ng-repeat을 써서 채워봅시다.
폴더를 하나 생성해서 그 폴더안에 파일들을 저장해봅시다.
mainApp.js 라는 파일을 만들고 아래 그림과 같이 저장합시다.
menuController.js 라는 파일을 만들고 아래 그림과 같이 저장합시다.
그리고 메인 html 파일을 searchRestaurant.html 이렇게 이름을 짓고 아래 그림과 같이 저장합시다.
위에 그림처럼 head 태그에 파일 경로를 설정합니다.
head 태그를 자세히 보시면 style 태그가 있습니다. 이건 CSS 파일에 따로 넣으셔도 됩니다.
오늘은 여기까지 배웠습니다.
이제 간단한 앱은 만들수 있을거 같은데 아직 데이터베이스 연결하는걸 안배웠네요.
조만간 배우면 더 실용성 있는 앱을 만들어 봅시다.
질문이나 팁, 조언 등등 댓글로 남겨주시면 24시간 이내에 답장 드리겠습니다.
감사합니다.
//슬릭데브
