[Angular.js][앵귤러js] AngularJS 2일차 [ng-model, ng-init, ng-repeat]

안녕하세요 슬릭데브입니다.

오늘은 Angular.js 2일차 입니다.

어제는 맛보기로 개발환경 만들기와 간단한 페이지를 하나 만들어 봤습니다.

오늘은 중요한 단어들을 먼저 설명하고 간단한 페이지를 하나 더 만들어 보겠습니다.

---

ng-app

ng-init

ng-model

ng-repeat

Angular.js 를 검색하다보면 이런 단어들을 자주 보게됩니다. 이런걸 ng로 시작되는 모든걸 Directives 라고 합니다.

ng-app: 여기서부터 Angular.js 앱이라는걸 알려줍니다. 

ng-init: 앱 데이터들을 initialize(초기설정? 한국에선 이렇게 부르나요?) 합니다.

ng-model: 변수들을 설정합니다.

ng-repeat: Collection(데이터 셋) 에 있는 item을 하나씩 보여줍니다. Iterator같은 개념입니다.

그럼 이 4개를 이용해서 간단한 앱을 만들어 봅시다.

---

아래 코드를 따라서 작성해보세요.

ng-init 에서 분식메뉴를 만들어봤습니다. 데이터는 JSON 포맷으로 합니다.

ng-repeat 에서는 For each 와 비슷한 개념이라고 보면 됩니다.

menu에 각 food를 repeat 합니다 라는 뜻입니다.

그럼 화면에는 아래와 같이 보이게 됩니다.

오늘은 여기까지 해보겠습니다. 

혹시 질문이나 팁이있으시면 댓글을 남겨주세요.